编程 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 冒泡事件阻止实现代码

Jan 27 Javascript

js给页面加style无效果的解决方法

Jan 20 Javascript

js中array的sort()方法使用介绍

Feb 20 Javascript

对javascript继承的理解

Oct 11 Javascript

vue.js实例对象+组件树的详细介绍

Oct 20 Javascript

详解vue中点击空白处隐藏div的实现（用指令实现）

Apr 19 Javascript

JavaScript使用math.js进行精确计算操作示例

Jun 19 Javascript

在Vue 中使用Typescript的示例代码

Sep 10 Javascript

element-ui table span-method(行合并)的实现代码

Dec 20 Javascript

微信小程序批量监听输入框对按钮样式进行控制的实现代码

Oct 12 Javascript

js校验开始时间和结束时间

May 26 Javascript

vue-cil之axios的二次封装与proxy反向代理使用说明

Apr 07 Vue.js

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

fleaphp下不确定的多条件查询的巧妙解决方法

2008/09/11 PHP

一个简单且很好用的php分页类

2013/10/26 PHP

php实现发送微信模板消息的方法

2015/03/07 PHP

PHP+JS三级菜单联动菜单实现方法

2016/02/24 PHP

php自定义函数实现二维数组排序功能

2016/07/20 PHP

给Javascript数组插入一条记录的代码

2007/08/30 Javascript

javascript设计模式之工厂模式示例讲解

2014/03/04 Javascript

js的延迟执行问题分析

2014/06/23 Javascript

jQuery Ajax调用WCF服务详细教程

2015/03/31 Javascript

浅谈js对象属性通过点(.) 和方括号([]) 的不同之处

2016/10/29 Javascript

vue实现列表的添加点击

2016/12/29 Javascript

jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】

2017/03/04 Javascript

Bootstrap 响应式实用工具实例详解

2017/03/29 Javascript

Node.js中看JavaScript的引用

2017/04/22 Javascript

结合Vue控制字符和字节的显示个数的示例

2018/05/17 Javascript

原生js实现日历效果

2020/03/02 Javascript

vue实现整屏滚动切换

2020/06/29 Javascript

[55:45]LGD vs OG 2019国际邀请赛淘汰赛胜者组 BO3 第三场 8.24

2019/09/10 DOTA

python类继承用法实例分析

2015/05/27 Python

django rest framework之请求与响应(详解)

2017/11/06 Python

机器学习10大经典算法详解

2017/12/07 Python

python中文编码与json中文输出问题详解

2018/08/24 Python

使用python进行拆分大文件的方法

2018/12/10 Python

python flask解析json数据不完整的解决方法

2019/05/26 Python

python和c语言哪个更适合初学者

2020/06/22 Python

python 线程的五个状态

2020/09/22 Python

如何在存储过程中使用Loop

2016/01/05 面试题

大学生毕业求职自荐书范文

2014/02/04 职场文书

财务会计专业求职信

2014/06/09 职场文书

洗手间标语

2014/06/23 职场文书

大学生毕业个人总结

2015/02/15 职场文书

2015年维修电工工作总结

2015/04/25 职场文书

深度学习详解之初试机器学习

2021/04/14 Python

vue数据字典取键值项目的字典问题

2022/04/12 Vue.js

使用Nginx的访问日志统计PV与UV

2022/05/06 Servers

python实现一个简单的贪吃蛇游戏附代码

2022/06/28 Python