编程 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事件机制扩展插件 jquery鼠标右键事件。

Dec 26 Javascript

细说javascript函数从函数的构成开始

Aug 29 Javascript

JQuery中$.ajax()方法参数详解及应用

Dec 12 Javascript

js window.open弹出新的网页窗口

Jan 16 Javascript

JavaScript中的标签语句用法分析

Feb 10 Javascript

jQuery数据缓存用法分析

Feb 20 Javascript

javascript实现类似百度分享功能的方法

Jul 27 Javascript

JS实现登录页面记住密码和enter键登录方法推荐

May 10 Javascript

JavaScript中push(),join() 函数实例详解

Sep 06 Javascript

JS实现倒计时(天数、时、分、秒)

Nov 16 Javascript

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

Nov 28 Javascript

JS+css3实现幻灯片轮播图

Aug 14 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下用cookie统计用户访问网页次数的代码

2010/05/09 PHP

php计算程序运行时间的简单例子分享

2014/05/10 PHP

详解PHP中instanceof关键字及instanceof关键字有什么作用

2015/11/05 PHP

PHP底层运行机制与工作原理详解

2020/07/31 PHP

用js获取电脑信息(是使用与IE浏览器)

2013/01/15 Javascript

javascript中Date对象的getDay方法使用指南

2014/12/22 Javascript

jQuery中removeAttr()方法用法实例

2015/01/05 Javascript

浅谈Javascript中的Function与Object

2015/01/26 Javascript

JavaScript中toString()方法的使用详解

2015/06/05 Javascript

JavaScript实战之带收放动画效果的导航菜单

2016/08/16 Javascript

基于Vue 2.0的模块化前端 UI 组件库小结

2017/12/21 Javascript

Angular4.0动画操作实例详解

2019/05/10 Javascript

详解Vue.js中引入图片路径的几种方式

2019/06/17 Javascript

nodejs中内置模块fs,path常见的用法说明

2020/11/07 NodeJs

[00:52]DOTA2齐天大圣预告片

2016/08/13 DOTA

python使用urllib模块和pyquery实现阿里巴巴排名查询

2014/01/16 Python

Python下使用Psyco模块优化运行速度

2015/04/05 Python

Python中str.join()简单用法示例

2018/03/20 Python

python中找出numpy array数组的最值及其索引方法

2018/04/17 Python

使用pandas read_table读取csv文件的方法

2018/07/04 Python

Python使用MyQR制作专属动态彩色二维码功能

2019/06/04 Python

Python 3.8 新功能大揭秘【新手必学】

2020/02/05 Python

css图标制作教程制作云图标

2014/01/19 HTML / CSS

英国精品买手店：Browns Fashion

2016/09/29 全球购物

SmartBuyGlasses意大利：购买太阳镜、眼镜和隐形眼镜

2018/11/20 全球购物

JAKO-O德国野酷台湾站：德国首屈一指的婴幼童用品品牌

2019/01/14 全球购物

类、抽象类、接口的差异

2016/06/13 面试题

2014年中班元旦活动方案

2014/02/14 职场文书

商场租赁意向书

2014/07/30 职场文书

乡镇党的群众路线教育实践活动个人整改方案

2014/10/31 职场文书

2015年元旦标语大全

2014/12/09 职场文书

2014预防青少年违法犯罪工作总结

2014/12/10 职场文书

培训督导岗位职责

2015/04/10 职场文书

学习雷锋主题班会

2015/08/14 职场文书

小学生反邪教心得体会

2016/01/15 职场文书

关于艺术节的开幕致辞

2016/03/04 职场文书