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

extjs DataReader、JsonReader、XmlReader的构造方法

Nov 07 Javascript

animate动画示例(泪奔的小孩)及stop和delay的使用

May 06 Javascript

JQuery 操作/获取table具体代码

Jun 13 Javascript

JavaScript四种调用模式和this示例介绍

Jan 02 Javascript

jquery删除提示框弹出是否删除对话框

Jan 07 Javascript

javascript函数重载解决方案分享

Feb 19 Javascript

js获取url中"?"后面的字串方法

May 15 Javascript

快速解决js中window.location.href不工作的问题

Nov 02 Javascript

Jquery 整理元素选取、常用方法一览表

Nov 26 Javascript

jQuery实现弹窗居中效果类似alert()

Feb 27 Javascript

JS基础之逻辑结构与循环操作示例

Jan 19 Javascript

Promise静态四兄弟实现示例详解

Jul 07 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进行MySQL删除记录操作代码

2008/06/07 PHP

收集的二十一个实用便利的PHP函数代码

2010/04/22 PHP

兼容PHP和Java的des加密解密代码分享

2014/06/26 PHP

整理php防注入和XSS攻击通用过滤

2015/09/13 PHP

php ajax异步读取rss文档数据

2016/03/29 PHP

javascript内存管理详细解析

2013/11/11 Javascript

javascript快速排序算法详解

2014/09/17 Javascript

JavaScript设计模式之外观模式实例

2014/10/10 Javascript

node.js中的querystring.unescape方法使用说明

2014/12/10 Javascript

谷歌Chrome浏览器扩展程序开发小记

2016/01/06 Javascript

AngularJS 中的指令实践开发指南(一)

2016/03/20 Javascript

JavaScript事件用法浅析

2016/10/31 Javascript

jQuery使用Layer弹出层插件闪退问题

2016/12/22 Javascript

AngularJS实现路由实例

2017/02/12 Javascript

详解使用grunt完成requirejs的合并压缩和js文件的版本控制

2017/03/02 Javascript

layui文件上传实现代码

2017/05/20 Javascript

js获取对象,数组所有属性键值(key)和对应值(value)的方法示例

2019/06/19 Javascript

vue-cli配置flexible过程详解

2019/07/04 Javascript

[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场

2018/04/06 DOTA

跟老齐学Python之坑爹的字符编码

2014/09/28 Python

Python操作MySQL模拟银行转账

2018/03/12 Python

浅谈django的render函数的参数问题

2018/10/16 Python

python利用小波分析进行特征提取的实例

2019/01/09 Python

kali中python版本的切换方法

2019/07/11 Python

jupyter notebook中美观显示矩阵实例

2020/04/17 Python

探讨HTML5移动开发的几大特性(必看)

2015/12/30 HTML / CSS

法国珠宝店：CLEOR

2017/01/29 全球购物

工程学毕业生自荐信

2014/06/14 职场文书

党的群众路线教育实践活动实施方案

2014/10/31 职场文书

践行党的群众路线心得体会

2014/11/05 职场文书

晚会闭幕词

2015/01/28 职场文书

2015年医院药剂科工作总结

2015/05/04 职场文书

联欢会开场白

2015/06/01 职场文书

小学生班干部竞选稿

2015/11/20 职场文书

python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)

2021/04/12 Python

Kubernetes中Deployment的升级与回滚

2022/04/01 Servers