同一个页面多个page之间的切换
今天接触了JQ Mobile以下是本小白的理解（不怕大家笑话）：
创建移动 web 应用程序的框架；适用于所有流行的智能手机和平板电脑； 将“写得更少、做得更多”这一理念提升到了新的层次：它会自动为网页设计交互的易用外观，并在所有移动设计上保持一致。
从官网上可以看出jQuery mobile内容分为四大部分：
jQM的内容分为四大部分：
(1)Page & Navigation
(2)CSS Framework
(3)Widgets(小部件)
(4)Form Widgets
以下用到的文件都可在官网下载到：
CSS文件：jquery.mobile.css
jQuery文件：jquery.js
jQuery Mobile文件：jquery.mobile.js
这次主要接触的是页面和页面切换效果
jQM中的“Page（页面）” jqm中的Page指WebApp中的“一屏内容”——一个HTML文件中可以只声明一个Page（单页模板），也可以声明多个Page（多页模板）——浏览器中某个时刻最多只能显示一个Page！
一个Page的基本结构：
<div/section data-role="page">
<div/header data-role="header"></div/header>
<div/section class="ui-content"></div/section>
<div/footer data-role="footer"></div/footer>
</div>
在多个Page间跳转有两种方式：
(1)超链接：
<a href="#PageID/xx.html"></a>
(2)JS编码：
<button onclick="$.mobile.changePage('#PageID/xx.html');"></button>
|
jQM中常用的data-*属性： |
|
data-role="page" |
|
data-role="header" |
|
data-role="content" |
|
data-role="footer" |
|
data-theme="a/b" 用于任何元素，设置当前元素的主题色 |
|
data-position="fixed" 用于footer，实现固定在Page的底部 |
|
data-title="" 用于Page，指定当前浏览器的标题栏内容 |
|
data-rel="back" 用于超链接，可以返回到当前Page的上一个Page |
|
data-transition="十种可能值" 用于页面跳转的超链接，指定页面切换过场动画 |
|
data-role="button" 用于超链接，使其呈现块级按钮的外观 |
|
data-inline="true" 用于按钮，声明为行内按钮，本质就是添加.ui-btn-inline |
|
data-icon="50种图标" 可用于为按钮指定图标 |
|
data-iconpos="left/right/top/bottom/notext" |
以下是今天做的案例分享分享：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="jqm/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="p21">
<div data-role="header">
<h1>头部-p21</h1>
</div>
<div class="ui-content">
<h1>一个HTML页面包含多个page</h1>
<h2>p21-第一个page</h2>
<a href="#p22">跳转到第二个page</a>
<button onclick="$.mobile.changePage('#p23')">跳到第三个页面-p23</button>
</div>
<div data-role="footer">
<h1>尾部</h1>
</div>
</div>
<div data-role="page" id="p22">
<div data-role="header">
<h1>头部-p22</h1>
</div>
<div class="ui-content">
<h2>p22-第二个page</h2>
<a href="#p23">跳转到第三个page</a>
</div>
<div data-role="footer">
<h1>尾部</h1>
</div>
</div>
<div data-role="page" id="p23">
<div data-role="header">
<h1>头部-p23</h1>
</div>
<div class="ui-content">
<h2>p23-第三个page</h2>
<a href="#" data-rel="back">返回上一个页面</a>
</div>
<div data-role="footer">
<h1>尾部</h1>
</div>
</div>
</body>
</html>
同一个页面多个page之间的切换的更多相关文章
- Vue路由实现之通过URL中的hash（#号）来实现不同页面之间的切换（图表展示、案例分析、附源码详解）
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- 用Swift完成不同View Controller之间的切换
之前用objective-c开发时,页面之间的切换很容易.其实用swift没有很大的变化,如果你是用storyboard完成的界面,基本上是同样的方式,只不过在代码部分写成swift风格的就行了. 今 ...
- Bootstrap <基础二十三>页面标题（Page Header）
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...
- asp.net mvc jqgrid 同一个页面查询不同的表，jqgrid显示不同表的表头和数据并且分页
基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...
- 页面对象（Page Object）模式
内容转载自 https://www.cnblogs.com/yytesting/p/6973474.html 页面对象(Page Object)模式是目前自动化测试领域普遍使用的设计模式之一,此模式可 ...
- 系统管理模块_岗位管理_改进_使用ModelDroven方案_套用美工写好的页面效果_添加功能与修改功能使用同一个页面
改进_使用ModelDroven方案 @Controller @Scope("prototype") public class RoleAction extends ActionS ...
- 请解释ASP. NET中的web页面与隐藏类之间的关系
请解释ASP.NET中的web页面与其隐藏类之间的关系 其实页面与其隐藏类之间就是一个部分类的关系,你在页面上放一个一个的控件就是在这个类中定义一个一个的属性, 因为是同一个类的部分类的关系,所以隐藏 ...
- 请解释ASP.NET中的web页面与其隐藏类之间的关系
其实页面与其隐藏类之间就是一个部分类的关系,你在页面上放一个一个的控件就是在这个类中定义一个一个的属性, 因为是同一个类的部分类的关系,所以隐藏类可以访问到页面上控件,这样做是为了把展现与处理逻辑分开 ...
- 回发或回调参数无效。在配置中使用 pages enableEventValidation=true 或在页面中使用 %@ Page EnableEventValidation=true % 启用了事件验证
WebForm中回发或回调参数无效问题的解决 解决 .NET中回发或回调参数无效问题的解 该错误的详细提示信息为: 回发或回调参数无效.在配置中使用 <pages enableEventVali ...
随机推荐
- PHP面试总结
从8月15号来到北京一直到今天,一月有余.来的这段时间一直准备笔试面试,大大小小的公司,乱七八糟面了10多家,近期才安顿下来.面试的这段时间感觉自己成长了不少.初来到这个陌生的城市一脸茫然,不会乘地铁 ...
- 让Git忽略所有obj和bin目录的同步
DotNet的项目里,编译出来的二进制文件默认都是放在每个项目对应的bin和obj目录下,有时候开发人员会不小心把这些目录的文件错误的提交到Git服务器.Git里的忽略文件功能可以通过一个.gitig ...
- IIS与Apache共用80端口
Windows server 2003服务器上安装有默认 IIS 6和Apache两个服务器,IIS运行的一个.net程序,apache运行php程序,现在想让它们同时都能通过80端口访问,设置起来还 ...
- Xamarin教程索引页
持续更新中-- 近期学习处理Xamarin.Android动画内容 Xamarin指南 -- 官网教程翻译 Xamarin跨平台开发 Xamarin Workbooks Xamarin Workboo ...
- git客服端基本操作
以下操作基于git+gerrit 1.生成公钥 ssh -keygen -t rsa 默认公钥生成路径 C:\Documents and Settings\用户名\.ssh 2.配置姓名和邮箱地址 ...
- ExtJS 中类的继承
ExtJS 允许对现有的类进行扩展,其扩展可以通过继承来实现.接下来我们就对刚刚使用ExtJS定义的Person类进行继承,定义一个Developer类,它继承自Person,同时还拥有Coding方 ...
- linux线程
线程:轻量级进程,在资源.数据方面不需要进行复制 不间断地跟踪指令执行的路径被称为执行路线 进程的结构:task_struck:地址空间 线程:轻量级的进程 在同一个进程中创建的线程,在共享进程的地址 ...
- HTML5开发笔记：图片上传预览
我们知道通过<input type="file">可以用来进行一个图片或者文件的上传,然而浏览器自带的一个缩略图预览的功能其实是相当不美观的,很多时候我们希望可以在上传 ...
- git使用
1.权限校验 首先,您的数据保存在远端服务器一份,服务器需要对您的身份进行识别,一段RAS加密字串, 启动GUI,step1:创建秘钥,generate SSHkey. step2:添加密钥:去你的代 ...
- DNS枚举工具DNSenum
DNS枚举工具DNSenum DNSenum是一款非常强大的域名信息收集工具.它能够通过谷歌或者字典文件猜测可能存在的域名,并对一个网段进行反向查询.它不仅可以查询网站的主机地址信息.域名服务器. ...