jquery Mobile入门—多页面切换示例学习
1、在JQuery Mobile中，多个页面的切换是通过<a>元素、并将<href>属性设置为#+对应的id号的方式进行的。
2、多页面切换示例代码：
<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、效果图预览：
点击详细页将切换到另一页：
4、除了内链接外，还有外链接，实现方法与内链接相同，只是在<a>中增加了另外一个rel属性，并将该属性值设为external表示外链，如：
5、动画效果切换页面，只需在<a>中添加data-transition属性，如：
slide：从右到左滑动的动画效果
pop：以弹出的效果打开页面
slideup：向上滑动的动画效果
slidedown：向下滑动的动画效果
fade：渐变褪色的效果
flip：飞入的效果
jquery Mobile入门—多页面切换示例学习的更多相关文章
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- JQuery Mobile入门——设置后退按钮文字(转)
http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28 CSDN博客原文 h ...
- 【学习】一本案例驱动的jQuery Mobile入门书
清华大学出版社推出的<构建跨平台APP:jQuery Mobile移动应用实战> 提供的全是jQuery Mobile的案例: 手机入侵 题库应用 音乐专辑 通讯录 新闻列表 销售排名 九 ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- jQuery Mobile入门教程
简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...
- jquery mobile 入门
简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...
- 小强的HTML5移动开发之路（47）——jquery mobile基本的页面框架
一.单容器页面结构 <!DOCTYPE html> <html> <head> <title>Jquery mobile 基本页面框架</titl ...
- 小强的HTML5移动开发之路（23）—— jQuery Mobile入门
一.下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包 下载成功后如下图 解压目录如图: 点击index.html进入d ...
- jQuery Mobile中的页面加载与跳转机制
第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
随机推荐
- 01 使用Git基本方法
什么是Git? Git是目前世界上最先进的分布式版本控制系统(没有之一). 你得先有一个Git仓库,才能进行操作.创库就是Git存放你要保存的快照的数据的地方. 拥有一个Git仓库,有两种方法. 创建 ...
- groovy函数、字符串、循环
三重单引号字符串 '''a triple single quoted string''' 三重单引号字符串是普通的java.lang.String 三重单引号字符串是多行的.您可以跨越行边界跨越字符串 ...
- 关于JAVA项目报表选型过程
本人一直在走.NET技术路线,考虑到后期公司搞JAVA项目,也算是进行技术灾备,开始对JAVA技术进行关注.万事开头难,也是上来一头包.没办法,顶着上吧.上面开始分给我任务了.就是对后期项目报表进行方 ...
- 让你跟上nodejs的资源
For a long time, JavaScript developers hoped for a server-side solution that would allow them to ful ...
- 修改maven默认的jdk版本
修改maven默认的jdk版本,想改彻底需要在maven的全局配文件(settings.xml)增加以下信息: 在profiles 节点下增加: <profile> <id> ...
- aspnetcore 认证相关类简要说明一
首先我想要简要说明是AuthenticationScheme类,每次看到Scheme这个单词我就感觉它是一个很高大上的单词,其实简单翻译过来就是认证方案的意思.既然一种方案,那我们就要知道这个方案的名 ...
- CAMediaTimingFunction的使用
CAMediaTimingFunction的使用 CAMediaTimingFunction可以用在POP动画的自定义动画当中,算是非常实用的工具,当然,系统的动画也是可以使用的. 效果: 需要用到的 ...
- [翻译] ABCIntroView
ABCIntroView ABCIntroView is an easy to use onboarding which allows you to introduce your users to t ...
- Java并发基础（上）——Thread
并发编程可以使我们将程序划分为多个分离的,独立运行的任务.通过多线程机制,这些独立任务都将由执行线程来驱动.在使用线程时,CPU将轮流给每个任务分配占用时间,每个任务都觉得自己在占用CPU,但实际上C ...
- ORA-28001：口令已经失效
Oracle11G创建用户时缺省密码过期限制是180天(即6个月),如果超过180天用户密码未做修改则该用户无法登录. 查看密码的有效期设置,LIMIT字段是密码有效天数. select * from ...