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

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

 

关于 VS2010 异常捕获 在线编程教育平台Treehouse推免费iPad应用 微软发布Windows 8.1企业预览版 功能更强劲 如何管理和优化日益增长的代码复杂度? SDCC 2013大会讲师名单议题更新 8月1日前3.8折优惠截止 IBM Rational首席技术官:DevOps是一门哲学 Mozilla联手黑莓推进Web安全技术,推出开源测试平台Minion 苹果如何培养SOHO一族高效工作 再造Ruby:CryENGINE 3.5游戏引擎特性详解 Eclipse基金会涉足物联网,M2M标准是否已获东风? SDN部署前必须考虑的7个事项 【云先锋 40】初创公司DataStax:专注于Cassandra,三年融资8370万美元 内容创作工具的革新:Facebook前CTO推文字处理应用Quip 微软为Android手机推出Office 仅面向Office 365用户开放使用 编程、创业、开源感悟——SDCC 2013讲师云风专访 原生广告:移动推广的热门新宠 隐私之战:金山手机毒霸宣布开放安全检测平台 世界人民的头上有张监控大网——Xkeyscore 美国“监控门”情报收集系统 X-Keyscore 技术揭秘 为啥REST如此重要? 并非PHP Frameworks而是WordPress让PHP更加流行! Twitter Bootstrap深受开发者喜爱的11大理由 假如3D打印机也有“撤销”键 大数据的游戏运营:不能起死回生,只能锦上添花 15个步骤创立技术公司,并收获千万用户(一) 红帽再发力 将MongoDB整合到Linux系统 ZestFinance:前谷歌CIO创立的机器学习+大数据分析公司 7月份浏览器份额:IE仍最受欢迎 Chrome成最大赢家 2013 Q2 Android手机出货量再创新高 iPhone三年来新低 如何一个人打造日PV百万的网站架构——SDCC 2013讲师曹力专访 【一周观察】动辄9位数以上的投资,云数据中心缺口巨大! 请问谁在csdn上订购过书啊?需要多少时间才能拿到啊!!!! 问题求解 现实一点,各位,我和别人赌了巴西不能赢中国队净3球以上,大家如何看? datagrid连接adodc access转化为mssql时出现的一些问题??? 工作流运行时出现了问题!很奇怪! 一个注册表的问题? 关于STL的弱问题 很少有人问的问题 请教学习路线,散分 一个困扰我很久的难题?(高手帮忙啊) 告诉帮我解决文件关联问题!! 请问如何添加备注字段,用sql server建表,有一备注字段为text类型。。。。。。。。。。。 函數啊﹐怎么么搞的?氣死人了。一百求救。 关于数据库的问题 生命游戏问题!!!!那位大哥指点迷津 VB做的免费软件,大家随便下载!给我提点建议也行! RichEdit问题,急!!! 关于IF语句。我是新手我理解不了请高手帮我,谢谢 请问oricle 有没有像sql server 2000 的企业管理器一样的工具? 关于richedit的问题! 誰能告訴我﹐我給他發又發(88分求找) asp.net就没有什么不足吗? 问题:高级程序员的《数据结构》该怎么复习?请有经验的人给指个明路,多谢! 如何将中文文件存入数据库?是文件,不是表单,谢谢!! 怎样才能得到CDialogBar的控件(如Button)的消息及消息处理 子数据窗口中为什麽filter条件不起作用?急急!!在线等!!!! 菜鸟来了! 怎么把Demo_Adhoc分到两台机上运行 数据库更新 how to 用 insert into 把一个.zip文件保存进数据库?? 请大家推荐一个CD机吧!!!! 急,NOTES与SQL SERVER的问题 asp实例 我的Access库文件原来大小是6.78M,我清空所有记录和减少很多记录时,为什么大小没改变? 关于delphi动态加载控件,在线 代人提问:请问.dcu文件是干什么的?如何才能生成该类型文件。 怎么响应Enabled属性 asp.net做网页,运行后,<asp;....></asp:...>字段仍然存在?? 请教VB高手们一个高难问题! 请问,存储过程在VC如何调用,用ADO,ODBC。 怎么实现这个SQL? 没事瞎问~~~黑客软件能走向海外吗?(比如扫描器,键盘记录器,木马等) windows protect --error ,我装不了系统啊 DbEdit里的数据用adoquery如何更新才好? 有没有办法调试存储过程? 我是个菜鸟,请教大家,VC++和C++ Builer的优点和缺点。 请问如何改变显示文本的颜色? delphi 6 的补丁包 浏览器为NS6时如何获取屏幕分辨率? 如何控制 ValueListEditor ?有一个Help这样写道: Excel表格怎么设置成如图样子?我问下,如图的样子怎么设置的? 您觉得碱性溶液中会出现氢离子浓度大于醋酸根浓度吗就D选项而言自身就不满足电荷守恒 碳酸氢钙与足量的氢氧化钾反应方程式谢啦`` 现有A、B、C、D四种元素,A、B同周期且可形成2种无色无味的气体AB和AB2.D在B的下周期,其最高价氧化物对应的水化物是二元强酸,C、D可形成离子化合物C2D,C离子比D离子少一个电子层.则(1)这四 氧化钠通过什么反应生成过氧化钠?化学反应方程式是什么? 汶川地震,触动了我的心灵.作文,急需600字以上 四种短周期元素A、B、C、D原子序数依次增大,已知A、D同主族,B、C同周期,A与B组成的化合物钾是气体,其中A与B的原子个数之比为4:1.A与C组成的化合物乙和丙是液体,乙中A与C原子个数之比为1:1, 有机物峰面积怎么看核磁共振氢谱有三组峰,峰面积之比为1:2:2请问怎么看几组峰,怎么看峰面积谢谢 挺急的 马上高考了没弄懂 用铝壶烧水喝,会吸收过量的铝吗? A、B两元素位于短周期,A原子半径小于B,可形成化合物AB2,下列说法正确的是(D)A.A和B可能属同一周期B.A位于B后的一周期C.A只能是金属元素 D.A可能是第二周期的二主族或四主族元素 怎样看化合物的峰面积之比 二氧化硫能否与氯化钙反应 为什么要在加压条件下才能向饱和氨盐水中通入二氧化碳气体?加压的作用是什么 沼气作为燃料的化学反应方程式 氦气 氖气 氩气 氪气 氙气分别用字母表示 高效液相进针速度对峰面积的影响最近刚学习液相色谱,遇到了一个很郁闷的问题,在同一台机器上做液相同事测的结果比我的高很多,而且也更稳,开始以为是定量时有差别,我取了一针让她看, 有一种无色无味的气体是什么吸多了这种气体症状为:头晕,眼花,咳嗽,流泪,打喷嚏? HPLC色谱条件摸索中,为什么我们要做波长的选择,以及波长选择的方法? 科学家发现海底存在大量水合甲烷,请谈谈甲烷燃料开发的前景 无色无味的气体是? 高效液相色谱中,波长的选择依据是什么?和紫外的波长选择有何不同求答案 科学家发现海底存在大量税和甲烷,谈谈甲烷燃料开发的前景 无色无味的气体是什么今天挖地桩,在地下五米处看到一巴掌大裂缝,里面冒出一种气体,无色无味,比空气重,因为不一会儿周围都没有氧气了(点不着火)闻一下就马上就会流眼泪,火一靠近就 水壶烧开水为什么刚刚烧开时壶底离开火焰摸上去不烫? 有a.b.c.d四种物质,常温下,a是黑色固体,b.c.d都是无色气体,a和b在不同的条件下分有ABCD四种物质,常温下,A是黑色固体,BCD都是无色气体,A和B在不同的条件下分别化合生成D1.写出各物质的化学式.A._ 什么气体最便宜?而且无色无味? 格兰仕电热水壶 烧水后底座拿不下来了,底部很烫和水壶底部连在一起了,不知道是烧水温度太高引起膨胀卡住格兰仕电热水壶 烧水后底座拿不下来了,底部很烫和水壶底部连在一起了,后来用 现有A,B,C,D四种物质,已知A,B为黑色粉末,C,D为无色气体,A,B在高温下作用能生成D,A,C在加热条件下能生成现有A,B,C,D四种物质,已知A,B为黑色粉末,C,D为无色气体,A,B在高温下作用能生成D;A,C在加热 如何用物理性质区分氢气和氧气 为什么把装沸水的水壶从煤气灶上拎下来,手指迅速短暂的接触壶底并不觉得烫 有关沼气前景沼气使用方便吗?前景怎么样? 水可由氢气和氧气化合而成,所以水具有氢气和氧气的性质这种说法对么?水可由氢气和氧气化合而成,所以水具有氢气和氧气的性质这种说法对么?为什么? 为何电热水壶烧水有杂质,而铝壶却没有同样的水,一个用电,一个用煤气烧. 将某暗紫色固体粉末A加热,可产生无色气体B,同时生成一种黑色固体c和另一种固体物质D.黑色固体c可用于加热氯酸钾制氧气时的催化剂.另一黑色固体E在无色气体B中燃烧,产生使澄清石灰水变 氧化钠与氧气在常温下能反应生成过氧化钠吗 碳酸氢钙溶液与盐酸反应离子方程式 氢氧根,碳酸跟,醋酸根,硫酸根怎么判断结合质子(氢离子)能力? 简单并联电路中,一个支联电阻减小,另一个电阻增大,总电阻变化范围和情况快一点哈!时间有限!6号以前!谢谢各位了哈 盐酸克伦特罗100微克/毫升(介质是乙醇)可以用于甲醇和水为流动相的液相色谱仪吗? γ能谱中的全能峰的峰谷比、峰面积、净面积和总和都有什么物理意义?在测铯137和钴60的γ能谱中,用计算机显示的诸多指标不太明白分别代表什么,有怎样的物理意义 1.滑动变阻器阻值变化,那么电流电阻分别如何随着滑动变阻器变化?2.并联电路中,滑动变阻器阻值增大,那么总电阻如何变化?3如图所示,电源电压保持不变时,当滑动变阻器滑片p向右移动过程中 液相色谱仪的流动相甲醇和水中,用氢氧化钠调节pH值后,柱子的压力会升高么?我在流动相中用氢氧化钠调节pH值到11,发现柱子的压力升高了300psi左右,请问为什么? 什么是峰面积 如果在电解池中银为正极,碳为负极,硫酸铜为电解质溶液.能组成电解池吗? 最低油的沸点 氧化钠和氧气反应生成过氧化钠的条件是什么 碳酸氢钙和盐酸反应的化学方程式 氯离子,氯分子,氢离子,氯化氢分子没有氧化性的是哪个 候氏制碱法中为什么要先通氨气 A、B、D、F5种物质的焰色反应均为黄色,A、B、C、D与盐酸反应均生成E,此外B还生成一种可燃气体.而C、D还生成一种无色无味气体H,该气体能使澄清石灰水变浑浊.D和A可反应生成C,F和H也可以反应 并联电路支路的条数一定时,某一条支路的电阻增大,则并联总电阻增大 制碱是先通氨气还是先通二氧化碳拜托了各位 A,B,C,D四种化合物的焰色反应均为黄色,ABC和盐酸反应均生成D.A和澄清石灰水反应可以生成B.C的固体在加热时得到A.根据以上叙述推断,写出由C转变为A的化学方程式. ABCD四种单质,AB为无色气体,C为红色固体,D为黑色固体粉末 excel能做三组数据的面积图吗?而且这三组数据单位还不一样要这种效果 A、B、C、D四种化合物的焰色反应均为黄色,C、D与盐酸反应均生成无色无味气体E,该气体能使澄清石灰水变浑浊,D和A反应可生成C,B与E反应可生成C和另一种无色无味气体F.1.E,2.B与E反应的化学方 从氧化钙、水、氢氧化钙、锌粒、稀硫酸中选择适当的物质,按要求各写一个化学方程式①分解反应②化合反应③置换反应④复分解反应 电子表格里如何进行图形筛选做了一个数学的电子表格,因为里面有大量的图形,可是在筛选的时候(比如筛勾股定理)图形就乱了,怎样才能在筛选的时候保证图形整齐呢. A和B是生活中的常见物质,A和B的焰色反应均为黄色,固体加盐酸都可以产生无色无味气体C,C气体通入澄清石灰水中溶液变混浊,A的固体加热也可以生成B和C(1) B俗名是___ 其水溶液显_性(填酸,碱 氢氧化钾和足量的碳酸氢钙反应方程式和离子方程式.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘