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

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

 

全透明、可折叠,平板电脑概念机是这样的 插件大集合!开源包管理器Alcatraz迎来Xcode 5更新 Q语言:新型的数据定义语言 非响应式手机网站页面的优化 高薪必备:Hadoop求职者的6大攻略 微软或将于四月发布“返璞归真”的Windows 8.1 Update 1 《近匠》第14期:LiveCode——全民开发工具 美团梁堰波:用SQL-on-Hadoop构建互联网数据仓库与商务智能系统 程序员游戏Style:亚特兰大极客使用机器学习玩转Flappy Bird Gleasy CTO薛珂:成立3年,企业用户2万+,移动办公蕴藏较大发展机遇 Unity Awards展区“点亮”Unity亚洲开发者大会 DevBox:最实用的移动开发辅助工具包 【技术博客推荐】创客程序员设计实现最小物联网系统 MySQL还是NoSQL:开源盛世下的数据库该如何选择 利用Hadoop Streaming处理二进制格式文件 如果没有强大的API,那么还是与OpenStack兼容吧 企业社交工具为何走向衰退? 封闭还是开放?雅虎禁止用户使用Facebook、谷歌ID登录和使用其服务 【OSTC讲师专访】罗聪翼:付出和回报在开源世界成正比 近匠:“词Ci”——全栈“女神”如何诠释倾城之美 国内首届引擎黑客松Cocos2d-x Hackathon即将开赛! 抛弃CloudStack,GoDaddy加入OpenStack PaaS平台之争:Cloud Foundry是赢家吗? 投资超140亿美元,涨幅达30%,数据密集型应用将占领第三平台 汽车开放平台:看看通用汽车是怎么做API的 Gamebase将推全新跨平台3D游戏引擎Reach3dx 借助API Telegram能否成为第二个WhatsApp 机器学习也感性:90后软妹纸的编程之路 为安防与视频监控而生 西数紫盘首发 秘闻:鲍尔默离职,或与坚持收购诺基亚有关 【OSTC讲师专访】Thomas Yao:开源社区最缺有能力的领导者 如何加载控件? 强烈推荐!" 在QQ上如何弄的别人神经分裂???//owner: onice (西瓜的眼泪) " 请问如何在XML字符串中传递中文 压缩原理究竟是怎样的? 如何用javascript创建树形菜单 ftp 你的上网速度低于1m就不用看了 请问在VC中使用ADO连接Oracle数据库,如何判断连接断开 关于C++BUIDLER的学习 ====我的显示器以前好好的不知为什么现在闪呀闪的弄的我眼睛疼啊!我重装了系统又重装了显卡驱动程序,可是还是 闪!请问我该怎么办?谢 各位大哥,小弟有段初级链表程序,有些问题,请斑竹和高手解答,谢谢!!!!!! 如何让EDIT控件换行显示数据? 想考计算机系的研究生,请大家给点建议 各位大哥,小弟有段初级链表程序,有些问题,请斑竹和高手解答,谢谢!!!!!! 关于路径设置的问题,为什么没人回答呢??? 叶剑英的孙女,李泽楷和曾荫权都在追 100分送上!!我都快被ADO逼疯了!!!真他妈的服了,各位给我指点一下吧,急用呀!!! 在linux下的C对数据库编程中,嵌套SQL语句的格式 如何启动备份服务器! 如何在窗口下对datawindow的数据进行修改后保存? 火急!急!急!急!急JBuilder完全安装怎么没有InterBase,哪又怎么安装? 求救!!! 明天上班,终于结束失业期了。 一个ORACLE备份数据导入问题。请高手指点! VC和VB下好用的控件在delphi下不好用!是不是dll的问题? 明天上班了,同喜! 大家觉得POWERSOFT公司的PB9会推出WEB SERVICE功能吗? 一个ORACLE备份数据导入问题。请高手指点!!! 请教各位高手,DirectX环境下,是否可以利用各种输入法输入汉字? 急,高手帮忙。 getchar小问题,为什么程序不能中断? 我想学游戏编程,谁能指点一下?100分! 医疗管理系统 请帮忙看看这段流操作的代码错在哪里? javabean高手请进!请赐教!!! 请各位高手指点一下,什么软件开发java比较方便,效率较高? 谁能告诉我,怎样将邮箱中的信件复制到本地硬盘.谢了 需要什么权限才能在active directory里添加用户??(实际上是想添加email帐号),谢谢各位 test 请问在winXP里该如何实现如下功能呢? 再问一次,怎么在mandrake下设显示器的刷新率!怎么想给分都送不出去! 当用c++编程时,能不能不用回收内存?100分 用VC处理XML文档时遇到的一些细微而重要的问题 大家能不能给我给我点 我有一个关于注册表的问题? delphi中要想定义一个整个工程文件中可以访问的变量怎样做才好?(说者有分) 本人泡MM精华之作,大家快看!! 25分散尽! 如何使用paradox.net? 类的定义与实现细节是否要放在不同文件 各位:我想当斑竹,位兄弟是否同意?:) 关于shell和key事件 写出下列化学式 1在空气中点燃锌粉时,锌粉燃烧.2铝跟硫在加热条件下反应.3汞蒸气有毒,为防止汞蒸气使人毒,可以在洒落的液态汞上覆盖硫粉,产物是+2价汞的硫化物.4铜器在潮湿的空气中,表 水汞的作用的是什么? 英语中,如何判断句子成分? 苯和溴单质生成了溴化氢,溴化氢和硝酸银反应的淡黄色沉淀是溴化银吗?如题将问题一中的反应后的液体倒入水中,在水底可出现黄褐色的油状液体,这个油油是什么东东? 苯和水共沸,哪个更易挥发?为什么?挥发性和沸点有什么关系? 来判断英语这些句子成分1.She took me there herself.这个there herself是做什么句子成分的?2.含疑问代词的句子,主语怎么判断的,这个疑问代词又会做什么成分,能举个例子吗?还有反身代词一般都从当 硝酸银和溴水中的什么反应是溴化氢还是次溴酸(有次溴酸吗) 如何快速判断英语句子成分? 除去硝酸铜中的硝酸银加入什么物质能够除去硝酸铜溶液中的少量硝酸银?请写一下方程式 溴气与硝酸银的反应 高锰酸钾 和 溴水可以去除二氧化硫么 - -RT 为什么可以加适量铜粉除硝酸铜中的硝酸银 光气和苯胺怎么反应?化工生产中运用光气,氯气和N-苯胺在四氯化碳中反应生产某种氯化物!这其中的反应是如何进行的!反应式怎么写? 干冰为什么不是单质,它的化学式怎么写? 氢氧化钠中混有氢氧化钡,能用硫酸铜去除吗?硝酸铜中混有硝酸银能用铜粉去除吗? 求高中化学常见沉淀谢谢,详细点. 硝酸铁 干冰 冰的化学式是什么 光气的用途我想知道光气是做什么用的,最好举些例子,谢谢能在具体点么?比如说我们身边的什么东西或物品是跟光气有关的。 通古斯大爆炸之谜 将铁和铜加入到硝酸银中怎么反应 分离硝酸银,硝酸铜硝酸铁 通古斯大爆炸真相通古斯大爆炸是不是外星人干的,还是俄国的最新式武器试验,或者还有自然原因! 一次性鉴别盐酸、氢氧化钠与石灰水是用A.二氧化碳 B.碳酸钠 C.锌 D.石蕊溶液 如何分离硝酸银和硝酸铜 通古斯大爆炸的原因 求铁,镁,硫,磷分别雨氧气反应的化学方程式 如何从硝酸银中分离掉硝酸铜和硝酸铁杂质,写出相关反应式. 通古斯大爆炸原因是什么? 生鸡蛋用开水冲,再加蜂蜜可以喝吗 如何分开硝酸铜和硝酸银 通古斯大爆炸的起因? 生鸡蛋放入白开水,这样喝卫生吗?.就是.开水冲生鸡蛋!鸡蛋生吃对身体是有害的,可用白开水冲,能不能把蛋里的抗菌素杀死?这样是不是科学的?我听过别人的说法,这样对身体不好```是不是这样 怎样从硝酸银和硝酸铜溶液中分离硝酸铜 溴单质与二氧化硫水溶液的化学方程式 喝开水冲的生鸡蛋好不好、 詹姆斯抛撒镁粉是什么意思?镁粉象征什么?镁粉是什么东西? 钠和铝两种元素的最高价氧化物对应水化物在溶液中相互反应的离子方程式是什么? 总喝开水冲的生鸡蛋好吗厄 因为我总血压低 总熬夜 所以吃的 如果内径为120mm的圆柱形玻璃杯,和内径为300mm,内高为32mm的圆柱形玻璃盆容纳同样多的水,则玻璃杯的内高是多少?(方程解,) 铝最高价氧化物对应的水化物是什么? 生鸡蛋用开水冲食好吗? 圆柱形玻璃的内径为120mm,与内径为300mm,高为32mm的圆柱形玻璃盘可以盛同样多的水,则玻璃杯的高为多少 铝的氢氧化物和硫、钾最高价氧化物的水化物反应方程式是什么? 英语句子中主语的一个问题刚看到一个句子Colour the picture yellow.这句话主语是什么啊? 内径为120mm的圆柱体玻璃杯和内径为300mm 内高为32mm的圆柱行玻璃盘可以盛同样的水,求玻璃杯的高度 铝元素的最高价氧化物对应的水化物与氢氧化钠反应的离子方程式是什么啊? nuk塑料奶瓶怎么样 .内径为120mm的圆柱形玻璃杯,和内径为300mm,内高为32mm的圆柱形玻璃盆可以盛同样.方程回答! 钠、铝的最高价氧化物对应水化物相互反应的离子方程式 关于有机化学亲核加成的问题关于亲核加成的规律不是说两端有选择性的结合吗就是带部分异号的电荷的加成 那为什么像乙炔或乙烯和有的物质如H2O(水)却有两种产物虽然有的多有的少 但 内径为120mm的圆柱玻璃杯和内径为300mm,高为32mm的圆柱塑料杯可以装同样的水,则玻璃杯的高为( ) 请问通古斯大爆炸是什么回事? 硝酸银弄在手上了要怎么去掉做实验的时候一不小心就搞了点硝酸银到手上了...黑呼呼的,还洗不掉...天哪,这要怎么办啊? 氯酸钾是单质吗同上 卤素单质与卤素离子哪个更容易与硝酸银反应 沾上硝酸银怎么去除 镁粉是纯净物还是单质? 卤素与硝酸银溶液反应生成什么方程式 家用净水器能不能彻底去除自来水中的铅、砷、汞等有毒物质 硝酸钾是单质吗
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘