今天接触了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之间的切换的更多相关文章

  1. Vue路由实现之通过URL中的hash（#号）来实现不同页面之间的切换（图表展示、案例分析、附源码详解）

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

  2. 用Swift完成不同View Controller之间的切换

    之前用objective-c开发时,页面之间的切换很容易.其实用swift没有很大的变化,如果你是用storyboard完成的界面,基本上是同样的方式,只不过在代码部分写成swift风格的就行了. 今 ...

  3. Bootstrap <基础二十三>页面标题（Page Header）

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  4. asp.net mvc jqgrid 同一个页面查询不同的表，jqgrid显示不同表的表头和数据并且分页

    基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...

  5. 页面对象（Page Object）模式

    内容转载自 https://www.cnblogs.com/yytesting/p/6973474.html 页面对象(Page Object)模式是目前自动化测试领域普遍使用的设计模式之一,此模式可 ...

  6. 系统管理模块_岗位管理_改进_使用ModelDroven方案_套用美工写好的页面效果_添加功能与修改功能使用同一个页面

    改进_使用ModelDroven方案 @Controller @Scope("prototype") public class RoleAction extends ActionS ...

  7. 请解释ASP. NET中的web页面与隐藏类之间的关系

    请解释ASP.NET中的web页面与其隐藏类之间的关系 其实页面与其隐藏类之间就是一个部分类的关系,你在页面上放一个一个的控件就是在这个类中定义一个一个的属性, 因为是同一个类的部分类的关系,所以隐藏 ...

  8. 请解释ASP.NET中的web页面与其隐藏类之间的关系

    其实页面与其隐藏类之间就是一个部分类的关系,你在页面上放一个一个的控件就是在这个类中定义一个一个的属性, 因为是同一个类的部分类的关系,所以隐藏类可以访问到页面上控件,这样做是为了把展现与处理逻辑分开 ...

  9. 回发或回调参数无效。在配置中使用 pages enableEventValidation=true 或在页面中使用 %@ Page EnableEventValidation=true % 启用了事件验证

    WebForm中回发或回调参数无效问题的解决 解决 .NET中回发或回调参数无效问题的解 该错误的详细提示信息为: 回发或回调参数无效.在配置中使用 <pages enableEventVali ...

随机推荐

  1. 51nod1459(带权值的dijkstra)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1459 题意:中文题诶- 思路:带权值的最短路,这道题数据也没 ...

  2. 【Java远程debug】

    转自 http://blog.csdn.net/hongchangfirst/article/details/44191925 一.远程debug原理 Java远程调试的原理是两个JVM之间通过deb ...

  3. Python-面向对象

    面向过程变成:函数式变成,C程序等 面向对象编程:C++,Java,Python等   类和对象: 类:是对事物的抽象,比如人类.球类 对象:是类的一个实例,比如足球.篮球   实例说明: 球类可以对 ...

  4. 【转】UML图与软件开发过程那点关系

    首先,软工文档, 软工文档,也就是计划,设计,描述,使用软件的一些文件,它最大的特点就是固定不变,用来给不同的人和计算机来阅读.在期间,文档起到了桥梁的作用,看这张图很形象: 在这里在看一下国家统一规 ...

  5. xsl-mode属性用法

    本文出自 “熔 岩” 博客,出处http://lavasoft.blog.51cto.com/62575/60517 对某一个元素做多次处理,那么选择<xsl:apply-template元素处 ...

  6. mac apache 2.4的配置

    开启vhost 文件 命令行输入 vim /etc/apache2/httpd.conf 找到把前边的# include /private/etc/apache2/extra/httpd-vhost. ...

  7. unity 角色旋转

    using UnityEngine; using System.Collections; public class Triangle : MonoBehaviour { public float sp ...

  8. js遍历json

    function test1(){ var json = [{name:'wang',age:22,sex:1},{name:'tang',age:25,sex:1},{name:'yuan',age ...

  9. javaFx：使用弹出对话框 Alert

    javaFx8 自带的对话框非常好用,类似的使用方式如下: /** * 弹出一个通用的确定对话框 * @param p_header 对话框的信息标题 * @param p_message 对话框的信 ...

  10. Thinkphp3.2.3使用Ajax一定注意 数据返回

    Thinkphp3.2.3使用Ajax一定注意 数据返回 $data = 'ok'; $this->ajaxReturn($data); 不能直接 echo $data;