Jquery mobile div常用属性
组件
页面
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 是页脚
data-role 参数表：
参数说明
page 页面容器，其内部的 mobile 元素将会继承这个容器上所设置的属性
header 页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素
footer 页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素
content 页面内容容器，这是一个很宽容的容器，内部可以包含标准的 html 元素和jQueryMobile 元素
controlgroup 将几个元素设置成一组，一般是几个相同的元素类型
fieldcontain 区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔
navbar 功能导航容器，通俗的讲就是工具条
listview 列表展示容器，类似手机中联系人列表的展示方式
list-divider 列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接
button 按钮，将链接和普通按钮的样式设置成为 jQueryMobile 的风格
none 阻止框架对元素进行渲染，使元素以 html 原生的状态显示，主要用于 form 元素。
完整的页面模版：
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
<title>Page Title</title>
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
以上是一个完整的页面结构模版代码，在使用过程中可以根据需要来组合。
页面动画：
data-transition 属性可以定义页面切换是的动画效果。
例如：<a href="index.html" data-transition="pop">I'll pop</a>
data-transition 参数表：
参数说明
slide 从右侧向左滑入页面
slideup 从底部向上滑入
slidedown 从上向下滑入
pop 从中心渐显展开
fade 渐显
flip 翻转
备注：如果想要在目标页面中显示后退按钮，可以在链接中加入 data-direction="reverse"属性，这个属性和原来的 data-back="true"相同，不知道在正式版本中将会保留哪个属性。
模态对话框
模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层，用于独占事件的应用。任何结构化的页面都可以用 data-rel="dialog"链接的方式实现模态对话框应用。
例如：<a href="foo.html" data-rel="dialog">Open dialog</a>
这个页面切换效果同样可以使用标准页面的 data-transition 参数效果。建议使用"pop"、"slideup" 和"flip"参数以达到更好的效果。
这个模态对话框会默认生成关闭按钮，用于回到父级页面。在脚本能力较弱的设备上也可以添加一个带有 data-rel="back"的链接来实现关闭按钮。
针对支持脚本的设备可以直接使用 href=”#”或者 data-rel="back"来实现关闭。还可以使用内置的”close”方法来关闭模态对话框，例如：$('.ui-dialog').dialog('close')。
由于模态对话框是动态显示的临时页面，所以这个页面不会被保存在哈希表内，这就意味着我们讲无法后退到这个页面，例如你在 A 页面中点击一个链接打开 B 对话框,操作完成并关闭对话框,然后跳转到 C 页面,这时候你点击浏览器的后退按钮，这时候将回到 A 页面，而不是 B 页面。
工具条
工具条主要用于”header”,”footer”等区域，用来支撑和实现页面中业务功能的应用。jQuery Mobile 提供了一个相对完整的解决方案。
工具条分为:标题（header bar）,页脚（footer bar）和导航（nav bar）这三中应用。
其中标题和页脚在页面中有一些不同的应用方式，默认工具条是以嵌入（inline）的方式定位的，这种定位方式可以实现最大限度的兼容性，包括在对脚本和 css 兼容性不佳的设备都有很好的优化。
另一种是浮动（fixed）定位的方式，也可以成为“静态“定位，这种定位方式可以让工具条始终保持在屏幕的顶部或者底部。并可以接受点击事件来显示/隐藏工具条，已达到最大化利用屏幕空间的目的。
实现方式：在标题和页脚区域加入 data-position="fixed"属性。
标题容器
标题容器是页面页眉区域的显示控件，主要用来显示标题和主要操作的区域。
结构代码：
<div data-role="header">
<h1>Page Title</h1>
</div>
为了方便页面的交互在页面切换后会在标题容器的左侧自动生成一个后退按钮，这样可以简化我们的开发复杂程度，但是有些时候我们会因为应用的需求而不需要这个后退按钮，可以
在标题容器上添加 data-backbtn="false"属性用来阻止后退按钮的自动创建。
标题容器的左侧和右侧分别可以放置一个按钮，在阻止自动生成的后退按钮后，我们就可以在后退按钮的位置来自定义按钮了。
例如：
<div data-role="header" data-position="inline" data-backbtn="false" >
<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check">Save</a>
</div>如果需要自定义默认的后退按钮中的文本，可以用data-back-btn-text="previous"属性来实现， 或者通过扩展的方式实现：$.mobile.page.prototype.options.backBtnText = "previous"。
如果你没有使用标准的结构来创建标题区域，那么框架将不会自动生成默认的按钮。
页脚容器
页脚容器的结构和标题容器的结构基本相同，只要把 data-role 属性的参数设置为”footer”。
例如：
<div data-role="footer">
<h4>Footer content</h4>
</div>
与标题容器相比页脚容器有更多的灵活度，它不会想标题容器一样只允许放置两个按钮，并且也不会默认的把按钮放置在左右的顶端，页脚的按钮默认是从左到右依次排列的，并且何以放置更多的按钮。
在页脚容器上只要添加一个 class="ui-bar"就可以将页脚变成一个工具条，你可以不用设置任何的布局样式就可以在其中添加整齐的按钮。
例如：
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>
如果我们需要一组链接效果，我们可以这样写：
<div data-role="footer" class="ui-bar" data-position="inline">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-icon="delete">Remove</a>
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
</div>
技巧：通过使用 data-id 属性可以让多个页面使用相同的页脚。
导航
导航容器是一个可以每行容纳最多 5 个按钮的按钮组控件，用一个拥有 data-role="navbar"
属性的 div 来容纳这些按钮。
例子：
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
在默认的按钮上添加 class="ui-btn-active"
如果按钮的数量超过 5 个，导航容器将会自动以合适的数量分配成多行显示。
按钮
你可以将页面中的任何一个链接通过 data-role="button"来声明成为按钮的显示风格。为了风格统一，框架会在页面加载时自动将 form 类的按钮格式化为 jQuery Mobile 风格的按钮，不需要添加 data-role 属性。
框架中包含了一组常用的图标可以用于按钮，用 data-icon 属性中的参数来定义显示不同的图标效果。
例如：<a href="index.html" data-role="button" data-icon="delete">Delete</a>
data-icon 原生参数列表
除了可以默认显示左侧的图标之外，还可以用 data-iconpos 属性来定义图标与文字的位置关系。
data-iconpos 参数列表：
参数效果
right 图标在文字的右侧
top 图标在文字上面
bottom 图标在文字下面
data-iconpos="notext"属性可以让按钮隐藏文字。
内联样式
在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的，但是我们在应用的应用中经常需要在一行中显示多个按钮，这时候我们就需要知道一个新的叫做内联模式的属性了
data-inline="true"。
例如：
<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>
按钮组
jQuery Mobile 框架可以将几个按钮以组的方式显示，data-role="controlgroup"用以展示按钮
间的紧凑关系。例如：
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
如果需要按钮横向排列可以增加 data-type="horizontal"属性。
表单应用
jQuery Mobile 框架为原生的 html 表单元素封装了新的表现形式，对触屏设备的操作进行了优化。在框架的页面中会自动将 form 元素渲染成 jQuery Mobile 风格的元素。
form 元素的使用和默认的 html 方式使用相同，可以同样使用 Post 和 get 方式提交数据，但是需要注意的是元素的 ID 命名问题，在常规的规范中同一个页面中是不允许出现相同的 ID命名的，在 jQuery Mobile 中由于其允许在同一个 DOM 中存在多个页面，所以建议 form 元素的 ID 命名在整个项目中是唯一的，防止由于 ID 问题引发的错误。
默认情况下框架会自动渲染在标准页面中的 form 元素的风格，一旦成功渲染后，这个控件元素将可以使用 jQuery 中的函数进行操作。在某些情况下，我们需要使用 html 原生的 form 元素，为了阻止 mobile 框架对该元素的自
动渲染，在框架中我们在 data-role 属性中引入了一个控制参数”none”。使用这个属性参数就会让该元素以 html 原生的状态显示。
例如：
<select name="foo" id="foo" data-role="none">
<option value="a"> A</option>
<option value="b"> B</option>
<option value="c"> C</option>
</select>
列表应用
信息列表是开发应用中使用频率相对比较高的控件，用于数据显示、导航, 数据列表等。为了适应不同的信息内容，列表的表现形式也多种多样。
列表的代码结构是以有序和无序列表来实现的，只要在 ul 或 ol 上声明 data-role="listview"就可以让框架以列表的方式渲染了，例如：
<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
如果需要在列表里添加数据，则需要在数据加载后执行 refresh()方法对列表进行数据更新。
例如：$('ul').listview('refresh');
以上是运用 jQuery Mobile 进行界面构建的基础规则，后续将完善 Ajax 和动态创建页面的技术资料。
Jquery mobile div常用属性的更多相关文章
- DIV常用属性大全自己整理
一.属性列表 代码如下: color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体 ...
- DIV常用属性大全
目录 一.属性列表 二.常用属性 三.一些特殊效果 四.定位和控制 一.属性列表 color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt ...
- css+div常用属性备忘录
学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...
- jquery mobile listview列表属性(搜索自动填充检索效果)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Jquery实现ajax常用属性
- Jquery Mobile设计Android通讯录第二章
本文是jQuery Mobile设计Android通讯录系统教程的第二篇,在上一篇教程中(http://publish.itpub.net/a2011/0517/1191/000001191561.s ...
- PhoneGap&jQuery Mobile应用开发环境配置（For Android）
关于移动应用为什么用PhoneGap和jQuery Mobile本文不再赘述,有兴趣的童鞋可以自行问“度娘”,有很多这方面的文章.本文主要介绍PhoneGap&jQuery Mobile移动应 ...
- jQuery Mobile的默认配置项具体解释,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/35258199 学习jQuery Mob ...
- jQuery Mobile Data 属性
按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...
随机推荐
- PHP 判断密码强度
$score = 0; if(preg_match("/[0-9]+/",$str)) { ...
- STL的六大容器之iterator----自定义范式
STL的iterator组件,分离了容器和算法. 一.规定 在STL体系下定义iterator,要满足规定的一些规范: 1.iterator_category 有5中分类,决定胃具体的操作,如:++, ...
- 20155308 加分项——C语言实现Linux的pwd命令
20155308 加分项--C语言实现Linux的pwd命令 实现要求 学习pwd命令 什么是pwd pwd' 代表的是'Print Working Directory'(打印当前目录).如它的名字那 ...
- html 第一行不缩进，第二行缩进，文字对齐
<p style="text-indent: -7rem;margin-left: 7rem;"> <img src="images/记录要求.png& ...
- java开发划分级别的标准
一.史诗序: java开发也有一段时间了,整天茫茫碌碌,除了偶尔的小有成就感,剩下的大部分好像都在重复,你是否也遇到了这样的情况? 遇到一个小细节问题,之前不久解决过,现在却是什么都记不起来了 面对每 ...
- [agc010D]Decrementing-[。。。思考题]
Description 传送门 Solution 真是够神秘的啊... Alice和Bob两个真的城会玩. 不过本题一个暗示挺明显的.就是黑板上所有数不论何时gcd为1. 考场上我以为会很复杂,结果. ...
- 基于 OpenCV 的人脸识别
基于 OpenCV 的人脸识别 一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库.它包含成千上万优化过的算法,为各种计算机视觉应用提供了一个通用工具包.根据这个项目的关于页面,OpenC ...
- 【转载】GC基本算法及C++GC机制
原文: GC基本算法及C++GC机制 阅读目录 前言 基本概念 有向可达图与根集 三种基本的垃圾收集算法及其改进算法 1.引用计数算法 2. Mark & Sweep 算法 3. 节点复制算法 ...
- ADO.NET操作MySQL数据库
前言 ADO.NET包括5大对象,分别是Connection.Command.DataReader.DataSet.DataAdapter,使用ADO.NET访问数据库有两个步骤:建立数据库连接.读取 ...
- EXE模块说明
EXE模块是fastCMS系统内非常优秀的一个功能模块,它将一些操作打包成可执行单元.它具有以下优势: 1)功能明确.便于维护. 2)发起端可获取EXE模块的执行结果. 3)对于不需要执行结果的请求, ...