编程 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 分栏效果实现代码

Aug 29 Javascript

Js event事件在IE、FF兼容性问题

Jan 01 Javascript

js页面滚动时层智能浮动定位实现(jQuery/MooTools)

Aug 23 Javascript

页面图片浮动左右滑动效果的简单实现案例

Feb 10 Javascript

IE中图片的onload事件无效问题和解决方法

Jun 06 Javascript

浅谈JavaScript Array对象

Dec 29 Javascript

Vuejs第六篇之Vuejs与form元素实例解析

Sep 05 Javascript

jQuery异步提交表单实例

May 30 jQuery

AngularJS实现图片上传和预览功能的方法分析

Nov 08 Javascript

vue.js单文件组件中非父子组件的传值实例

Sep 13 Javascript

微信小程序+云开发实现欢迎登录注册

May 24 Javascript

原生js实现html手机端城市列表索引选择城市

Jun 24 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猜单词游戏

2015/09/29 PHP

php实现按天数、星期、月份查询的搜索框

2016/05/02 PHP

用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载

2007/08/08 Javascript

兼容ie和firefox js关闭代码

2008/12/11 Javascript

点击隐藏页面左栏或右栏实现js代码

2013/04/01 Javascript

escape函数解决js中ajax传递中文出现乱码问题

2014/10/30 Javascript

jQuery使用before()和after()在元素前后添加内容的方法

2015/03/26 Javascript

Angular中管道操作符(|)的使用方法

2017/12/15 Javascript

如何利用@angular/cli V6.0直接开发PWA应用详解

2018/05/06 Javascript

微信小程序实现星级评分和展示

2018/07/05 Javascript

解决vue路由后界面没有变化,但是链接有的问题

2018/09/01 Javascript

swiper.js插件实现pc端文本上下滑动功能示例

2018/12/03 Javascript

JS实现的全选、全不选及反选功能【案例】

2019/02/19 Javascript

vue列表单项展开收缩功能之this.$refs的详解

2019/05/05 Javascript

JS实现可切换图片的幻灯切换效果示例

2019/05/24 Javascript

layUI实现列表查询功能

2019/07/27 Javascript

分享一下Python 开发者节省时间的10个方法

2015/10/02 Python

python 异常处理总结

2016/10/18 Python

Python结巴中文分词工具使用过程中遇到的问题及解决方法

2017/04/15 Python

Python实现解析Bit Torrent种子文件内容的方法

2017/08/29 Python

Python3.5 处理文本txt,删除不需要的行方法

2018/12/10 Python

Python新手学习标准库模块命名

2020/05/29 Python

PyCharm最新激活码（2020/10/27全网最新）

2020/10/27 Python

美国大城市最热门旅游景点门票：CityPASS

2016/12/16 全球购物

Lookfantastic挪威官网：英国知名美妆购物网站

2017/07/26 全球购物

Expedia英国：全球最大的在线旅游公司

2017/09/07 全球购物

国庆促销活动总结

2014/08/29 职场文书

个人作风建设自查报告

2014/10/22 职场文书

离婚协议书怎么写的

2014/12/14 职场文书

中学生清明节演讲稿

2015/03/18 职场文书

欠条样本

2015/07/03 职场文书

2016廉洁教育心得体会

2016/01/20 职场文书

2016年企业先进员工事迹材料

2016/02/25 职场文书

Keras多线程机制与flask多线程冲突的解决方案

2021/05/28 Python

python利用pandas分析学生期末成绩实例代码

2021/07/09 Python

浅析JavaScript中的变量提升

2022/06/01 Javascript