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做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
随机推荐
- 使用gunzip、tar、rar、（zip压缩和unzip解压缩）
---------------------20171119------------------------------ 解压gz后缀 使用gunzip filename.gz ------------ ...
- 【SSH网上商城项目实战14】商城首页UI的设计
转自:https://blog.csdn.net/eson_15/article/details/51373403 前面我们利用EasyUI和SSH搭建好了后台的基本框架,做好了后台的基本功能,包括对 ...
- js delete 操作符
delete操作符很陌生,很少会用到,但是既然碰到了,就mark一下: delete 操作符用于删除一个对象的属性: 注意点:只能删除自己的属性,从原型链上继承的属性是无法删除的:
- 关于this的全面解析（call,apply,new）
我们在写代码的时候,时常会被this弄的傻傻分不清楚,看源码的时候也经常被call啊apply啊弄的头皮发麻.this到底是什么?本文主要根据书上和实际应用做了一些归纳.一般情况下this有4种绑定规 ...
- C# 求百分比并保留2位小数
, b = ; decimal c = (decimal)a / b; , ); , )).ToString() + "%"; Console.WriteLine( - resul ...
- Java线程唤醒与阻塞
阻塞指的是暂停一个线程的执行以等待某个条件发生(如某资源就绪),学过操作系统的同学对它一 定已经很熟悉了.Java 提供了大量方法来支持阻塞,下面让我们逐一分析. 转载于:http://blog.cs ...
- H5禁止手机自带键盘弹出
一个功能中用到这个, 调用软键盘, 不想弹出手机默认的输入法 网上找了个 http://blog.csdn.net/qq_24147051/article/details/52958610 处理方式 ...
- WebService程序数据集之WSDL取数
在通用的webservice集合中,在集合中使用wsdl取数的方式获取数据,并将数据转换为程序数据集,那么怎样通过wsdl取数并转换为程序数据集呢? 首先将wsdl获取到的数据数据转换为二维数组,然后 ...
- SSM 框架-04-使用maven创建web项目
SSM 框架-04-使用maven创建web项目 本篇介绍使用MAVEN来管理jar包,就不用一个一个去添加和下载jar包了,直接在maven配置文件中配置就可以了,maven可以帮助我们自动下载.本 ...
- Dancing Line、网易蜗牛读书——创新性分析
Dancing Line——视听效果极佳的解压游戏 介绍:跳舞的线是由猎豹移动公司和BoomBitInc制作的一款游戏,发行于2016年12月12日. 游戏规则:跟着音乐的节奏点击屏幕,完成转向,躲避 ...