1.JQM页面结构

jQuery Mobile是通过data-role属性来区分渲染界面样式的,JQM里面提供的data-role如下表:

参数

说明

page

页面容器,其内部的mobile元素将会继承这个容器上所设置的属性

header

页面标题容器,这个容器内部可以包含文字、返回按钮、功能按钮等元素

footer

页面页脚容器,这个容器内部也可以包含文字、返回按钮、功能按钮等元素

content

页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素

controlgroup

将几个元素设置成一组,一般是几个相同的元素类型

fieldcontain

区域包裹容器,用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔

navbar

功能导航容器,通俗的讲就是工具条

listview

列表展示容器,类似手机中联系人列表的展示方式

list-divider

列表展示容器的表头,用来展示一组列表的标题,内部不可包含链接

button

按钮,将链接和普通按钮的样式设置成为jQueryMobile的风格

none

阻止框架对元素进行渲染,使元素以html原生的状态显示,主要用于form元素

jQuery Mobile应用了HTML5标准的特性,在结构化的页面中完整的页面结构分为header、content、footer这三个主要区域。

在body中插入内容块:

<div data-role="page">

<div data-role="header">...</div>

<div data-role="content">...</div>

<div data-role="footer">...</div>

</div>

data-role="page”代表这个div是一个Page,在一个屏幕中只会显示一个page;

header是标题,content是内容块,footer是页脚.

2.JQM的ajax加载方式

jQuery Mobile为了减少页面加载的数据量,实现了页面的ajax加载模式.当使用ajax方式(链接标签上加上data-ajax="true")加载页面时,只在第一个页面加载html的全部内容,包括html的head里面引用的样式脚本文件,后面载入的页面只加载data-role="page"的div容器的内容,所以非第一次加载的页面里面的脚本(javascript)必须写在data-role="page"的div容器里面.

图示ajax加载模式

非ajax加载模式(data-ajax="false"时)即大家所熟悉的常规页面加载模式,这里就不敷述了.

JQuery Mobile页面的载入方式的更多相关文章

  1. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布

    [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,或许我们正在阿谀逢迎自己懒惰的天 ...

  2. (二)Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

  3. jQuery Mobile 页面事件

    jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...

  4. 用谷歌浏览器Chrome浏览jQuery Mobile页面需要配置Tomcat服务器

    在浏览jQuery Mobile 页面中,除了 Chrome浏览器出错外,其他的浏览器都ok: 这里,是因为需要单独配置 Tomcat 服务: 1.先配置java jdk: 2.下载,安装,配置,To ...

  5. 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

    一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...

  6. jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...

  7. JQuery Mobile 页面参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  8. jquery mobile页面跳转缓存问题解决

    最近,我的一个写后端的同事因为缺前端自己做起了前端的活儿,因为对前端的不熟悉,找寻了一些现成框架想轻松了事,做一个web app他选了jquery mobile,开发效率确实高,但是这个框架的一些坑也 ...

  9. jQuery Mobile页面返回无需重新get

    最近公司的web app项目,使得我有幸一直接触和学习jQuery Mobile.这确实是一个很不错的移动开发库,有助于擅长web开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个 ...

随机推荐

  1. retrofit2 okhttp3 RxJava butterknife 示例

    eclipse的jar包配置 eclipse中貌似用不了butterknife buildToolsVersion "23.0.2" defaultConfig { applica ...

  2. Jquery~$when_done_then的用法

    对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when...done...fail...then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下 ...

  3. Mysql 中is null 和 =null 的区别

    在mysql中,筛选非空的时候经常会用到is not null和!=null,这两种方法单从字面上来看感觉是差不多的,其实如 果去运行一下试试的话差别会很大! 为什么会出现这种情况呢? null 表示 ...

  4. 关于异常的疑难解答:System.Runtime.InteropServices.COMException

    COMException exception is thrown when an unrecognized HRESULT is returned from a COM method call.&qu ...

  5. 关于User&nbsp;Defined&nbsp;Runtime&nbsp;Attributes的小技巧

    在用XIB里自定制view,button,label...的一些属性时,例如边框宽度,边框颜色等,如下图:

  6. JavaScript--对象+函数

    1. 复杂数据类型 Object ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合.    1) 创建Object实例:   1.使用构造函数创建,new Object()   ...

  7. 【USACO 1.3.4】牛式

    [題目描述 ] 下面是一个乘法竖式,如果用我们给定的那n个数字来取代*,可以使式子成立的话,我们就叫这个式子牛式. * * * x * * ---------- * * * * * * ------- ...

  8. Extjs之rowEditing编辑状态时列不对齐

    Extjs在使用rowEditing的时候,会在每一列加上editor属性,表示当处于编辑状态时这一列的值是什么类型的,后突然发现在rowEditing处于编辑状态时每一列的宽度边框了,如果列数非常多 ...

  9. window.location.href问题,点击,跳转到首页

    onClick="window.location.href='./';" 点击,跳转到首页. location.href=url Js中实现跳转 window.location.h ...

  10. POJ1505 Copying Books(二分法)

    B - 二分 Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   Description   Be ...