编程 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 相关文章推荐

JS处理VBArray的函数使用说明

May 11 Javascript

js 自定义个性下拉选择框示例

Aug 20 Javascript

使用jquery prev()方法找到同级的前一个元素

Jul 11 Javascript

使用requestAnimationFrame实现js动画性能好

Aug 06 Javascript

下一代Bootstrap的5个特点超酷炫！

Jun 17 Javascript

jQuery EasyUI Tab 选项卡问题小结

Aug 16 Javascript

JavaScript实现垂直向上无缝滚动特效代码

Nov 23 Javascript

JavaScript实现经典排序算法之选择排序

Dec 28 Javascript

详解vuejs2.0 select 动态绑定下拉框支持多选

Apr 25 Javascript

js实现掷骰子小游戏

Oct 24 Javascript

Nuxt页面级缓存的实现

Mar 09 Javascript

完美解决通过IP地址访问VUE项目的问题

Jul 18 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

yii2.0之GridView自定义按钮和链接用法

2014/12/15 PHP

thinkPHP实现将excel导入到数据库中的方法

2016/04/22 PHP

PHP 的比较运算与逻辑运算详解

2016/05/12 PHP

PHP序列化操作方法分析

2016/09/28 PHP

PHP正则之正向预查与反向预查讲解与实例

2020/04/06 PHP

JavaScript Cookie的读取和写入函数

2009/12/08 Javascript

cnblogs TagCloud基于jquery的实现代码

2010/06/11 Javascript

Jquery + Ajax调用webService实例代码(asp.net)

2010/08/27 Javascript

JavaScript将Table导出到Excel实现思路及代码

2013/03/13 Javascript

js/html光标定位的实现代码

2013/09/23 Javascript

js实现在字符串中提取数字

2013/11/05 Javascript

JavaScript中调用函数的4种方式代码实例

2015/07/08 Javascript

jquery SweetAlert插件实现响应式提示框

2015/08/18 Javascript

Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

2016/02/28 Javascript

浅析Bootstrap表格的使用

2016/06/23 Javascript

微信小程序引用公共js里的方法的实例详解

2017/08/17 Javascript

vue的diff算法知识点总结

2018/03/29 Javascript

vue中如何实现pdf文件预览的方法

2018/07/12 Javascript

在Vue-cli里应用Vuex的state和mutations方法

2018/09/16 Javascript

微信小程序中遇到的iOS兼容性问题小结

2018/11/14 Javascript

vue实现登录、注册、退出、跳转等功能

2020/12/23 Vue.js

简单介绍Python2.x版本中的cmp()方法的使用

2015/05/20 Python

python利用Opencv实现人脸识别功能

2019/04/25 Python

用Python徒手撸一个股票回测框架搭建【推荐】

2019/08/05 Python

容易被忽略的Python内置类型

2020/09/03 Python

Lampenwelt德国：欧洲领先的灯具和照明在线商店

2018/08/05 全球购物

int和Integer有什么区别

2013/05/25 面试题

Java程序员面试90题

2013/10/19 面试题

大学生职业生涯规划范文

2014/01/22 职场文书

新闻发布会主持词

2014/03/28 职场文书

公证书样本

2014/04/10 职场文书

代办委托书怎么写

2014/08/01 职场文书

同事欢送会致辞

2015/07/31 职场文书

2016年“抗战胜利纪念日”71周年校园广播稿

2015/12/18 职场文书

2019让人心动的商业计划书

2019/06/27 职场文书

Redis入门教程详解

2021/08/30 Redis