jQuery Mobile 中文开发手册2(正在完善和撰写中)

模态对话框

模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层,用于独占事件的应用。任何结构化的页面都可以用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>

clip_image002

与标题容器相比页脚容器有更多的灵活度,它不会想标题容器一样只允许放置两个按钮,并且也不会默认的把按钮放置在左右的顶端,页脚的按钮默认是从左到右依次排列的,并且何以放置更多的按钮。

在页脚容器上只要添加一个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>

clip_image004

如果我们需要一组链接效果,我们可以这样写:

<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>

clip_image006

技巧:通过使用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个,导航容器将会自动以合适的数量分配成多行显示。

clip_image008



[本日志由 eddy 于 2011-03-12 10:13 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 4838
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭