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做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
随机推荐
- IDEA使用maven建web项目示例
运行环境:OSX-10.13.3. IDEA-2017.3.3. maven-3.5.2 步骤1:选择maven-webapp模板新建web项目 步骤2:设置项目GroupId等 需从网上下载相关构件 ...
- JDBC入门（3）--- PrepareStatement
一.PrepareStatement概述 PrepareStatement是Statement接口的子接口: 1.强大之处: 防SQL攻击: 提高代码的可读性: 提高效率; 2.PrepareStat ...
- 微服务架构之spring cloud ribbon
现在负载均衡是通用的解决分压的技术方案,实现方式一般分为服务端或者客户端,服务端大部分是使用中间件实现,spring cloud ribbon 是一个客户端负载均衡组件.跟spring cloud e ...
- 如何在Ubuntu上安装gcc-6.3
装显卡驱动推荐 gcc 6.3 版本,其实linux上多个版本的gcc是可以共存的,需要的的时候切换就好,参加之前的博客 https://www.cnblogs.com/jins-note/p/951 ...
- 路飞学城知识点3缓存知识点之二redis
redis:支持的字符类型多,可以做持久化 memchache:只能存储到内存中,不能做持久化,仅支持字符串类型. 参考博客 redis安装服务端: github安装包 安装客户端: pip inst ...
- CentOS 7 yum 安装 Nginx
1.添加Nginx到YUM源 添加CentOS 7 Nginx yum资源库,打开终端,使用以下命令: sudo rpm -Uvh http://nginx.org/packages/centos/7 ...
- 传递给数据库 'model' 中的日志扫描操作的日志扫描号无效
状况描述:在服务器的管理中重新启动MSSQLSERVER启动后马上又停止 通过"事件查看器" 发现 错误: ,严重度: ,状态: LSN(::)无效.该 LSN 是传递给数据库 ...
- FTP作业
实现一个FTP网盘的功能 pa's's
- ubuntu13.04更新源
最近163的源出问题了,又要换一次源. 报错如下: 查更新源的命令查了好多次,这次还是记下来吧,估计以后还会用到很多次. 常规来说,是要先备份的,不过感觉备份也没什么用,所以就直接跳过吧.. 1 打 ...
- rabbitmq集群方案
RabbitMQ的集群方案有以下几种: 1.普通的集群 exchange,buindling再所有的节点上都会保存一份,但是queue只会存储在其中的一个节点上,但是所有的节点都会存储一份queue的 ...