编程 Javascript

jquery Mobile入门—多页面切换示例学习

Posted in Javascript onJanuary 08, 2013

1、在JQuery Mobile中，多个页面的切换是通过<a>元素、并将<href>属性设置为#+对应的id号的方式进行的。

2、多页面切换示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta name="viewport" content="width=device-width,initial-scale=1"/> 
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> 
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script> 
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
</HEAD> 
<BODY> 
<section id="page1" data-role="page"> 
<header data-role="header"><h1>JQuery Mobile</h1></header> 
<div data-role="content" class="content"> 
<p>这是首页</p> 
<p><a href="#page2">详细页</a></p> 
</div> 
<footer data-role="footer"><h1>3I工作室版权所有</h1></footer> 
</section> 
<section id="page2" data-role="page"> 
<header data-role="header"><h1>JQuery Mobile</h1></header> 
<div data-role="content" class="content"> 
<p>这里是详细页</p> 
<p><a href="#page1">返回首页</a></p> 
</div> 
<footer data-role="footer"><h1>3I工作室版权所有</h1></footer> 
</section> 
</BODY> 
</HTML>

3、效果图预览：

jquery Mobile入门—多页面切换示例学习

点击详细页将切换到另一页：

jquery Mobile入门—多页面切换示例学习

4、除了内链接外，还有外链接，实现方法与内链接相同，只是在<a>中增加了另外一个rel属性，并将该属性值设为external表示外链，如：

<a href="a1.html" rel="external">详细页</a>

5、动画效果切换页面，只需在<a>中添加data-transition属性，如：

<a href="a1.html" rel="external" data-transition="pop">详细页</a> //以弹出的效果打开页面

slide：从右到左滑动的动画效果
pop：以弹出的效果打开页面
slideup：向上滑动的动画效果
slidedown：向下滑动的动画效果
fade：渐变褪色的效果
flip：飞入的效果

jquery Mobile入门—多页面切换示例学习

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery手风琴特效插件

Feb 04 Javascript

javascript格式化指定日期对象的方法

Apr 21 Javascript

javascript中DOM复选框选择用法实例

May 14 Javascript

jQuery中使用animate自定义动画的方法

May 29 Javascript

Bootstrap基本插件学习笔记之模态对话框(16)

Dec 08 Javascript

JavaScript变量类型以及变量作用域详解

Aug 14 Javascript

javascript变量提升和闭包理解

Mar 12 Javascript

React key值的作用和使用详解

Aug 23 Javascript

利用hasOwnProperty给数组去重的面试题分享

Nov 05 Javascript

详解angular2 控制视图的封装模式

Dec 27 Javascript

小程序云开发如何实现图片上传及发表文字

May 17 Javascript

微信小程序点击view动态添加样式过程解析

Jan 21 Javascript

javascript 系统文件夹文件操作及参数介绍

Jan 08 #Javascript

12款经典的白富美型—jquery图片轮播插件—前端开发必备

Jan 08 #Javascript

滚动图片效果 jquery实现回旋滚动效果

Jan 08 #Javascript

打豆豆小游戏用javascript编写的[打豆豆]小游戏

Jan 08 #Javascript

jQuery.buildFragment使用方法及思路分析

Jan 07 #Javascript

js新闻滚动 js如何实现新闻滚动效果

Jan 07 #Javascript

YUI Compressor压缩JavaScript原理及微优化

Jan 07 #Javascript

You might like

修改了一个很不错的php验证码(支持中文)

2007/02/14 PHP

php操作SVN版本服务器类代码

2011/11/27 PHP

浅析PKI加密解密 OpenSSL

2013/07/01 PHP

PHP依赖注入(DI)和控制反转(IoC)详解

2017/06/12 PHP

tp5(thinkPHP5)框架连接数据库的方法示例

2018/12/24 PHP

如何让PHP编码更加好看利于阅读

2019/05/12 PHP

Laravel定时任务的每秒执行代码

2019/10/22 PHP

jquery 的 $("#id").html() 无内容的解决方法

2010/06/07 Javascript

JS在textarea光标处插入文本的小例子

2013/03/22 Javascript

JS实现很酷的水波文字特效实例

2015/02/26 Javascript

JavaScript实现数字数组按照倒序排列的方法

2015/04/06 Javascript

JavaScript中setTimeout的那些事儿

2016/11/14 Javascript

javascript 判断用户有没有操作页面

2017/10/17 Javascript

mint-ui 时间插件使用及获取选择值的方法

2018/02/09 Javascript

Antd中单个DatePicker限定时间输入范围操作

2020/10/29 Javascript

详解vite+ts快速搭建vue3项目以及介绍相关特性

2021/02/25 Vue.js

vue脚手架项目创建步骤详解

2021/03/02 Vue.js

[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder

2018/08/11 DOTA

python创建和使用字典实例详解

2013/11/01 Python

Python中列表list以及list与数组array的相互转换实现方法

2017/09/22 Python

Python设计模式之解释器模式原理与用法实例分析

2019/01/10 Python

python实现宿舍管理系统

2019/11/22 Python

python使用gdal对shp读取,新建和更新的实例

2020/03/10 Python

jupyter notebook参数化运行python方式

2020/04/10 Python

css3实现3D色子翻转特效

2014/12/23 HTML / CSS

结合CSS3的布局新特征谈谈常见布局方法

2016/01/22 HTML / CSS

英国袜子店：Sock Shop

2017/01/11 全球购物

英国品牌男装折扣网站：Brown Bag

2018/03/08 全球购物

Linux常见面试题

2013/03/18 面试题

中西医结合临床医学专业大学生自荐信

2013/09/28 职场文书

营业员个人总结的自我评价

2013/10/25 职场文书

社团文化节策划书

2014/02/01 职场文书

葛优非诚勿扰搞笑征婚台词

2014/03/17 职场文书

软件项目实施计划书

2014/05/02 职场文书

安全口号大全

2014/06/21 职场文书

团队拓展活动方案

2014/08/28 职场文书