jQuery Mobile div常用属性

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

[code]<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div> [/code]

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 元素。

[code]<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">;
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>;
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>;
</head>
<body>
<style>
div{
width: 400px;
height: 600px;
margin: auto;
}

div1{

width: 400px;
height: 600px;
background: #ccc;
margin: auto;

}

div2{

background: #ccc;
width: 400px;
height: 600px;

}
</style>
<div id = "div1" data-role = "page">
<p>div1</p>
<a href = "#div2" data-transition = "slideup" data-role = "button">div2</a>
<a href = "#div3" data-transition = "slidedown" data-role = "button">div3</a>
<a href = "#div4" data-trasition = "fade" data-role = "button">div4</a>
<a href = "#div5" data-transition = "flow" data-role = "button">div5</a>
<a href = "#div6" data-transition = "pop" data-role = "button">div6</a>
</div>

<div id = "div2" data-role = "page"
<p>div1</p>
<a href = "#div2" data-transition = "slideup">div1</a>
<a href = "#div3" data-transition = "slidedown">div3</a>
<a href = "#div4" data-trasition = "fade">div4</a>
<a href = "#div5" data-transition = "flow">div5</a>
<a href = "#div6" data-transition = "pop">div6</a>
</div>

<div id = "div3" data-role = "page"style = "width: 400px;height: 600px;background: #ccc;margin: auto;">
<p>div3</p>
<a href = "#div2" data-transition = "slideup">div2</a>
<a href = "#div1" data-transition = "slidedown">div1</a>
<a href = "#div4" data-trasition = "fade">div4</a>
<a href = "#div5" data-transition = "flow">div5</a>
<a href = "#div6" data-transition = "pop">div6</a>
</div>

<div id = "div4" data-role = "page"style = "width: 400px;height: 600px;background: #ccc;margin: auto;">
<p>div4</p>
<a href = "#div2" data-transition = "slideup">div2</a>
<a href = "#div3" data-transition = "slidedown">div3</a>
<a href = "#div1" data-trasition = "fade">div1</a>
<a href = "#div5" data-transition = "flow">div5</a>
<a href = "#div6" data-transition = "pop">div6</a>
</div>

<div id = "div5" data-role = "page"style = "width: 400px;height: 600px;background: #ccc;margin: auto;">
<p>div5</p>
<a href = "#div2" data-transition = "slideup">div2</a>
<a href = "#div3" data-transition = "slidedown">div3</a>
<a href = "#div4" data-trasition = "fade">div4</a>
<a href = "#div1" data-transition = "flow">div1</a>
<a href = "#div6" data-transition = "pop">div6</a>
</div>

<div id = "div6" data-role = "page"style = "width: 400px;height: 600px;background: #ccc;margin: auto;">
<p>div6</p>
<a href = "#div2" data-transition = "slideup">div2</a>
<a href = "#div3" data-transition = "slidedown">div3</a>
<a href = "#div4" data-trasition = "fade">div4</a>
<a href = "#div5" data-transition = "flow">div5</a>
<a href = "#div1" data-transition = "pop">div1</a>
</div>
</body>
</html>
[/code]

页面动画:

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 页面。

导航

导航容器是一个可以每行容纳最多 5 个按钮的按钮组控件,用一个拥有 data-role="navbar"属性的 div 来容纳这些按钮。
[code]<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 -->[/code]

在默认的按钮上添加 class="ui-btn-active"如果按钮的数量超过 5 个,导航容器将会自动以合适的数量分配成多行显示。

按钮组

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');

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复