编程 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获取select默认选中的Option并不是当前选中值

May 07 Javascript

js实现键盘操作实现div的移动或改变的原理及代码

Jun 23 Javascript

JavaScript动态创建form表单并提交的实现方法

Dec 10 Javascript

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

Jan 19 Javascript

jQuery内容折叠效果插件用法实例分析(附demo源码)

Apr 28 Javascript

在web中js实现类似excel的表格控件

Sep 01 Javascript

简单理解vue中track-by属性

Oct 26 Javascript

对比分析Django的Q查询及AngularJS的Datatables分页插件

Feb 07 Javascript

微信小程序开发之数据存储参数传递数据缓存

Apr 13 Javascript

深入浅析ES6 Class 中的 super 关键字

Oct 20 Javascript

基于滚动条位置判断的简单实例

Dec 14 Javascript

ES10 特性的完整指南小结

Mar 04 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

《星际争霸》各版本雷兽特点图文解析雷兽不同形态一览

2020/03/02 星际争霸

FireFox浏览器使用Javascript上传大文件

2013/10/30 PHP

PHP可变函数学习小结

2015/11/29 PHP

YII2框架中使用yii.js实现的post请求

2017/04/09 PHP

Laravel框架查询构造器 CURD操作示例

2019/09/04 PHP

ie和firefox中img对象区别的困惑

2006/12/27 Javascript

document.addEventListener使用介绍

2014/03/07 Javascript

js设置控件的隐藏与显示的两种方法

2014/08/21 Javascript

使用jQuery jqPlot插件绘制柱状图

2014/12/18 Javascript

《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法

2015/01/09 Javascript

基于JavaScript实现轮播图代码

2016/07/14 Javascript

AngularJS 自定义指令详解及实例代码

2016/09/14 Javascript

bootstrap table分页模板和获取表中的ID方法

2017/01/10 Javascript

ES6中javascript实现函数绑定及类的事件绑定功能详解

2017/11/08 Javascript

vue实现个人信息查看和密码修改功能

2018/05/06 Javascript

微信小程序之事件交互操作实例分析

2018/12/03 Javascript

原生JS使用Canvas实现拖拽式绘图功能

2019/06/05 Javascript

[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路

2015/04/13 DOTA

在Python中操作时间之strptime()方法的使用

2020/12/30 Python

Pycharm学习教程（4） Python解释器的相关配置

2017/05/03 Python

python中requests库session对象的妙用详解

2017/10/30 Python

python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法

2019/06/10 Python

jupyter 导入csv文件方式

2020/04/21 Python

python3:excel操作之读取数据并返回字典 + 写入的案例

2020/09/01 Python

HTML5 LocalStorage 本地存储详细概括（多图）

2017/08/18 HTML / CSS

澳大利亚首屈一指的在线购物目的地：Kogan.com

2017/02/02 全球购物

雅诗兰黛澳大利亚官网：Estée Lauder澳大利亚

2019/05/31 全球购物

库房主管岗位职责

2013/12/31 职场文书

完美主义个人的自我评价

2014/02/17 职场文书

计划生育宣传标语

2014/06/21 职场文书

安全生产知识竞赛活动总结

2014/07/07 职场文书

财务负责人岗位职责

2015/02/03 职场文书

2015年五一劳动节慰问信

2015/03/23 职场文书

庆祝教师节新闻稿

2015/07/17 职场文书

2016党员学习心得体会范文

2016/01/23 职场文书

Redis 哨兵机制及配置实现

2022/03/25 Redis