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

JavaScript去除空格的几种方法

Oct 03 Javascript

jquery 插件人性化的消息显示

Jan 21 Javascript

javascript Prototype 对象扩展

May 15 Javascript

javascript preload&lazy load

May 13 Javascript

Extjs中通过Tree加载右侧TabPanel具体实现

May 05 Javascript

Extjs407 getValue()和getRawValue()区别介绍

May 21 Javascript

jQuery实现列表自动滚动循环滚动展示新闻

Aug 22 Javascript

Google 地图API资料整理及详细介绍

Aug 06 Javascript

javascript中this用法实例详解

Apr 06 Javascript

详解如何使用PM2将Node.js的集群变得更加容易

Nov 15 Javascript

配置一个vue3.0项目的完整步骤

Apr 26 Javascript

加速vue组件渲染之性能优化

Apr 09 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

基于asp+ajax和数据库驱动的二级联动菜单

2010/05/06 PHP

使用cookie实现统计访问者登陆次数

2013/06/08 PHP

PHP中的session安全吗？

2016/01/22 PHP

php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)

2016/05/12 PHP

用JQuery 实现的自定义对话框

2007/03/24 Javascript

javascript prototype，executing，context，closure

2008/12/24 Javascript

当鼠标移动到图片上时跟随鼠标显示放大的图片效果

2013/06/06 Javascript

JavaScript获取当前网页最后修改时间的方法

2015/04/03 Javascript

在JavaScript中操作时间之setYear()方法的使用

2015/06/12 Javascript

jQuery绑定自定义事件的魔法升级版

2016/06/30 Javascript

利用Node.js了解与测量HTTP所花费的时间详解

2017/09/22 Javascript

详解Vue-cli代理解决跨域问题

2017/09/27 Javascript

JS设计模式之状态模式概念与用法分析

2018/02/05 Javascript

Swiper 4.x 使用方法(移动端网站的内容触摸滑动)

2018/05/17 Javascript

10行代码实现微信小程序滑动tab切换

2018/12/28 Javascript

详细介绍解决vue和jsp结合的方法

2020/02/06 Javascript

Node.js+Vue脚手架环境搭建的方法步骤

2020/03/08 Javascript

uniapp与webview之间的相互传值的实现

2020/06/29 Javascript

解决vscode进行vue格式化,会自动补分号和双引号的问题

2020/10/26 Javascript

[08:44]和酒神一起战斗 DOTA2教你做大人

2014/03/27 DOTA

[00:31]DOTA2荣耀之路7：Miracle-空血无敌斩

2018/05/31 DOTA

用Python输出一个杨辉三角的例子

2014/06/13 Python

Python深入学习之内存管理

2014/08/31 Python

详解Python当中的字符串和编码

2015/04/25 Python

Python 3实战爬虫之爬取京东图书的图片详解

2017/10/09 Python

Python实现KNN（K-近邻）算法的示例代码

2019/03/05 Python

Python (Win)readline和tab补全的安装方法

2019/08/27 Python

python selenium循环登陆网站的实现

2019/11/04 Python

使用Python的Turtle库绘制森林的实例

2019/12/18 Python

利用Python如何实时检测自身内存占用

2020/05/09 Python

Ruby如何进行文件操作

2014/07/17 面试题

大学生水文观测实习自我鉴定

2013/09/29 职场文书

办公室秘书自我鉴定

2014/01/18 职场文书

四风问题个人对照检查剖析材料

2014/09/27 职场文书

幼儿园庆元旦主持词

2015/07/06 职场文书

中学生打架检讨书之500字

2019/08/06 职场文书