说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

jQuery Mobile 开发入门手册--组件

HTML文档下载 WORD文档下载 PDF文档下载
jQuery Mobile 组件:页面、对话框、工具条、导航、按钮、列表等组件的使用方法。

 

作者:张勇辉

 

组件

页面

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> 

<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 和动态创建页面的技术资料。

 

VB如何动态更新数据报表 VB如何改变 NT 预设的打印机? VB如何改变 Windows 预设的打印机 VB如何关闭其他程序 VB如何过滤键盘录入 VB如何获得Windows95已经运行的时间 VB如何检测左右键同时按下? VB如何检查您的电脑是否打开 ActiveDesktop? VB如何将程序建立成“启动”文件夹的捷径? VB如何将程序建立成「启动」资料夹的捷径。 VB如何结束 Shell 所启动的程序? VB如何拦截键盘输入 如何判定VB调用的一个EXE程序已经结束. VB如何判断某一个Drive是否为光碟机? VB如何清空回收站? VB如何取得汉字的区位码 VB如何去优化你的VB程序 VB如何让点阵打印机每次印出一行? VB如何设计一个可中断循环的按钮。 VB如何实现VB程序登录密码加密 VB如何使程序不出现在任务列表中 VB如何使键盘、Mouse失效(JournalPlayBack Hook) VB如何使用 DBGrid VB如何突破 TextBox 32K 的限制? VB如何为执行程序加上参数? VB如何压缩较长的全路径文件名中的路径 (Path) 字串长度? VB如何在VB中实现密码的读取 如何在VB中使用命令行参数 VB如何在内存中的指定位置取数据? VB如何在已经存在的文本的textbox添加新的一行 VB如何在資料庫中存入單引號? 菜问题!我添加了#include "ICMPHeader.h",然后就出错了。 高分求救-漂亮的JSP页面代码 高手紧急求救!!! 我要移动listbox中的值!! 急问Flash... 对于高手很easy问题! 这个语句错在哪里:能不能用字符去逐个的初始化一个字符串 安装SQL时没有选择默认,而是自己新建一个实例,这样如何实现远程代码连接?? 急问Flash conning333(chen)来接分 webapps\ROOT\WEB-INF\web.xml的配置问题 如何清除WEBSPHERE的缓存?一个JSP文件总是无法更新,我重启WEBSPHERE也好,修改该JSP并重新保存也好,都是显示旧页面,真气人! 源代码分析 怎样在DW中制作垂直的线条????急 ! 急!在线等待!!!! 关于dir()的小问题, 这个问题已困惑我几天啦,均没人帮我解决真的好盼望呀 急问FLash 高分求教:一个DataGrid显示双DataTable!走过路过都有份! 怎样代码控制servers中excel的合并单元格?? google能找到我了,散分咯 急问Flash. ADOCE怎样访问excel数据表格? 请 ccmoon(IzuaL) 和 cloudchen(陈系上) 进来领分, 我该怎么做? 关于将输入字母转换为大写的问题! 谁给我解释这个sql语句! 怎么将sql server 6.x 的备份文件,恢复到sql server 7上 请教pb中有没有模式窗口和非模式窗口的概念?? 设备内容句柄在Delphi中有这个类吗?如何表示? hxzhappy(冰雨)快来接分 请问在contexMenu控件中show方法如何写 请问用VC,如何在WIN2000下连接一个SQL数据源? 入参与出参 关于国外发布的软件,可以使注册用户在线或取注册码! win2000下怎样建立代理服务器 有关DBGrid的问题。 在其他版看到一个很有意思的贴子“如果是你招聘人,你会不会招和自己技术,资历差不多的,甚至超过自己水平的?”欢迎大家讨论。 急!关于innerhtml的错误? hxzhappy(冰雨)快来接分 在线求助,急 请教各位,我的sybase的数据库的log设备(即syslogs表)最近增长很快,每天增长40多兆,如何解决??? 想做一个网络代理上网 c语言中三维数组的问题??? 求助:word文件加密后忘记密码如何打开原文件? 请教 : photoshop 中--highlight shadow midtone 提问,非高手勿入,打印的问题,100分,不够另加 关于oracle预留字作字段名的问题。 ● 求助,2000 Professional一登录就自动注销,怎么解决? 一个很棘手的问题? 谁给我解释这个JS函数 請高手幫改寫一段datagrid程序. (100分相送) 除去Na2CO3中混有的Na2O2 AFS、APEC、WTO、CPC、PRC.这些分英文字母分别表示什么?打一日常用品 Na2CO3中有少量Na2O2用什么试剂除杂? 船舶与海洋工程里RM,KML,KMt这一组字母是什么意思?KML,KMt 的单位都是(米)。RM at 1 degree 的单位是(吨 [点乘] 米)。已知MR为复原力矩。我都查出来。船舶原理。 物体以12 m/s初速度在水平冰面上作匀减速直线运动,它的加速度大小是0.8 m/s 2,经20 s物体发生的位移是明天小高考 急死了 一物体做匀减速直线运动,初速度为12 m/s,加速度为一2 m/s2.该物体在某1 S内的位移为6 m,此后它还能运动多远? 为何说CO2与Na2O2反应增加的是CO质量? 玻璃仪器校验中水的实际容积怎么算?仪器容积为50ml,瓶与水的质量为126.05,水的质量为50g,实际容积是?还有个 ℃1ml水的质量= g,这个怎么查? 12ml的98%浓硫酸(密度1.84g/cm3)中水的质量是多少?怎么计算, 李白的秋浦歌中红星乱紫烟中的乱字,能否改为飞,溅呢?为什么? 秋浦歌 (唐)李白 炉火照天地,红星乱紫烟.赧郎明月夜,歌曲动寒川.1、这首诗描写了( ).诗中( )热烈,寒夜中( )情景真是感人. 韩国十字会组织集体俯卧撑活动 为朝鲜为防抗议者干扰 埃及当局更改穆尔西受韩国总统访问欧洲 称日本应向德国学习如何绕开Google SSL故意泄露11家品牌奶粉入驻北京药店 专家称价斯诺登请求美对其法外施仁 白宫拒绝并北京雾霾刚去 寒衣节不少市民当街焚烧中关村骗术攻防战:先付款即被坑 理论中央第二轮巡视重监督一把手 重拳打虎中国拥世界最多隐身导弹艇 美航母骇然韩媒称当事国就重启六方会谈达成诸多共用不懈努力追梦圆梦书画徐州名家系列报道津浦西路小学举办少先队建队日主题活动“人性化”不能仅仅是口号龙潭沟穿越超级英雄电影《蚁人》开选主角色狼潜入成功大厦女厕偷拍被逮世茂时尚欢乐影城公交卡丢失3天内同一车上被刷120元公园巷小学举行新生入队仪式教育经费管理年活动
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘