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

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

 

MIT风景线:丝绸雕塑、VR代码、机器人、智能按钮及保时捷 深度学习新算法,完成字里行间的情绪识别 如何在开发项目里和难缠的程序员合作? 移动周报:七大无需编程的DIY开发工具 手把手教学,用jQuery Mobile创建Web App 别惊讶,Android绿色机器人标志灵感来自于卫生间标识 Google TV更名为Android TV 智能电视的路不好走 CTO如何避免决策失控(四)——通盘考虑 做到技术业务不分家 重塑世界!历届MDCC重磅嘉宾演讲大回顾 从贝佐斯的14句言论看商业成功之道 5大宠物可穿戴式设备 Google CIO Ben Fried谈内部工具文化 【开源专访】Fourinone创始人彭渊:打造多合一的分布式并行计算框架 API优先架构或者胖瘦服务器之争 Windows Phone 8迎来Update3更新:支持更大屏幕 更多磁贴 AMD院士站台 异构计算与OpenCL编程师资培训首站清华开讲 Twitter、Square开创者Jack Dorsey的奇趣人生 利用CSS、JavaScript及Ajax实现图片预加载的三大方法 经典电影里的数学 15亿美元!软银联合GungHo收购手游巨头Supercell Oracle“炮轰”开源:称其永远无法在军事领域取得一席之地 零客户端:下一代计算分布模型 苹果聘奢侈品公司巴宝莉CEO Angela Ahrendts为零售主管 看看你会几个?9大最火的移动开发技能 为了进一步拴住用户:传亚马逊与HTC合作开发智能手机 三年?又三年!今年MDCC2013大不相同! 杨远骋:聚美优品与百度云推送的故事 糗事百科王坚:百度云推送让我们省心 10个最热JavaScript开源框架的社区活跃度对比 2013福布斯中国富豪榜:李彦宏第三、马化腾第五、马云第八 Storm又获东风,Hortonworks计划将其整合到Hadoop企业版 请问,ConnectionString 属性尚未初始化? 爱上一朵有主之花,郁闷ing,请各位出出注意。 为何我没法将贴子发出去?! 爱上一朵有主之花,郁闷ing,请各位出出注意。 请问全局对象为什么先赋值为NULL? 急急急急!!急死我了!大哥们帮帮忙,打印不正确走纸问题! 硬汉对照:一位计算机大师,LISP语言的创造者之人生感悟。看者玩呗。[zt] 爱上一朵有主之花,郁闷ing,请各位出出注意。 请看这段JDBC代码 ./ 是什么意思? 如何把WEB Method指定为用GET方法传递常数? 像MSN那种有邮件时就提示的那个小窗口要怎么做? 用什么API函数可以实现big5转换为gb 关于文件上传问题,大家都使用htmlcontrols.htminputfile控件吗? 各位大虾,关于扫描仪的错误2800:0000是指什么错误?急!!! 请问如何在载入页面前,跳出一个询问用户名和密码的窗口,然后验证用户身份? MSsqlserver 意外终止服务 www服务器过一段时间就停止服务? resin 中jsp文件无法显示图片,怎么回事? 请教思归!!asp.net中弹出对话框的问题 debug命令f怎么用呀? 笔记本电池,能外挂吗?~~~~ 工具欄的顯示應算較專業的問題 寻求共同创业的伙伴! COM+组件远程调用问题 如何才能把计算稿保存下来? 急。chr 与ord的运用! 为什么当我在dreamweaver里把表格的单元格宽度设定为像素了,可当我的字符串超过它的宽度,它不换行?而是拉长我的单元格 使用delphi第三方控件出现的问题 用什么函数把int转成nvarchar 关于上网的问题 关于图片的循环移动问题 寻求共同创业的伙伴! 关于Keil C51的编译问题 谁有《 Inside The C++ Object Model》英文版电子版 请教《深入浅出MFC》中有关“动态创建”的一个问题。 图像缩放和居中显示的问题 请教如何用DDraw实现屏幕随鼠标移动而滚动,就象星际中的地图比屏幕大,但可以滚动显示。 一点问题,劳驾各位高手啦。。谢谢!!! 一个双向链表得问提求救啊 截获、修改本地程序通过socket发出的包的问题 请教DDraw资源网? 可不可以把这两个合并成一句查询语句呀 问一下IDirect3DDevice8::SetTransform第一个参数的问题 如何把一个窗体放进动态链接库中? 集合Set 和 数组Array 的问题 论坛出现乱码怎么办?急!急!急!!! 如何使用JList添加记录项???? 谁遇到过VB printer对象在少数机器上乱码的问题,有的机器又是好的。 不能使用make menuconfig?请指教 DBGRID中要点两下才能进行编辑状态,如何只一下就能进入编辑状? 春天的一个夜晚,一为久别家园的人,望者皎洁的月光不禁想起了家乡于是吟起诗来( )快 24除与九等于多少原题:一个长方形,周长是24分米,长诗9分米面宽是长的几分之几 人生活的基本条件是什么? 工地上的沙子比水泥多65吨,用了一周后余下的数量相同.水泥还剩下4/5,用去沙子80吨,剩下多少吨水泥?答对此题者奖励500积分! 这个重力是怎么分解啊 帮下忙啊 为什么说明辨是非是做人的基本条件? 强氧化剂像浓硫酸可以把碳粉氧化为二氧化碳,那么一定生成像co2这样的氧化物吗? 传说中的太阳系第10大行星,尼碧汝在2012会撞地球吗?详细些.谢谢 我国古代最早记录超新星爆炸的是什么朝代 乙稀能否被浓硫酸氧化成二氧化碳 2012年13颗行星会排成一条线, 陆生生物生活需要哪些基本条件 人怎样活着才有意义呀?2012就要到啦,我们人类还能坚持多久?什么时候上火星为什么国家一直不通知呢?请尽快回答我 《相对论》到底讲的是什么? 谁能通俗地解释一下相对论通俗! 关于普通话的作文 请告诉我相对论究竟是讲什么的? 有关《史记》的故事.还有帮忙把“破釜沉舟”这个典故讲一下,最多50个字. 我与普通话的作文 相对论主要讲了些什么? 请推荐一些适合三年级孩子参加讲故事比赛的小文章,要求是三分钟左右,内容能够吸引人. 普通话的作文!马上要! 椒盐虾有多少种做法? ,有一个六位数,最高位上是1,如果把最高位上的"1"移到最低位,新得的六位数是原数的3倍.原数是( ) 谁有“我与普通话的作文”? 《相对论》讲的是什么说简单点,我是初二的 阿门 的英文是啥 金鱼的英语拼读怎么拼? 椒盐虾怎样做啊?具体说明一下, 一个六位数,它的个位上是六,如果把这个6移到原数的最高位,其他个位上的数字依次往后移,那么所得的6位数是原来的4倍.原来的6位数是多少 现在工地有水泥7吨 沙子10吨 石子20吨 如果把石子全部用完 水泥够不够 如果不够缺多少 如果足够 剩余多少 “重力作用在物体各个部分从效果上看和作用在重心上是一样的”是什麽意思?就是说效果是什麽意思?是什麽效果? 《史记》上记载的中国古代九大名剑是什么 一滴水从天上掉下来什么情况下能把人砸死 相对论主要讲了什么? 古代写史记的人古代记录那些历史是道途听说回来写,还是只看片面之词在记录呢!有多少是真有多少又是假的呢!有自己写自己的个人自传吗? 听报告 用英语怎么说?要用report的。 尼比鲁手机怎么样 如何向一个非理科生用通俗形象的语言解释相对论? 春天的一个夜晚,一位久别家乡的人,望着皎洁的月光不仅想起了月光,于是吟起诗来〔…………〕— 做一个有关宠物的报告用英语怎么说 从效果上看我们可以认为各部分所受到的重力作用集中于一点,这一点叫做物体的重心.为什么集中在一点 听汇报用英语怎说 高空700米掉下 黄豆大的石头能砸死人吗是不和子弹一样 物理电学单位如何读? 春天的一个夜晚,一个就别家乡的人,望着皎洁的月光不禁想起了家乡,于是便吟起诗来( ) 世界上哪个国家的人活的岁数最大? 重心;一个物体的( )受到重力的作用,从效果上看,我们可以等效的认为各部分说到重力的作用集中在一点,这一点叫做物体的( ). 春天的一个夜晚,一位久别家乡的人,望着皎洁的月光不禁想起了家乡,于是吟起诗来 世界上有那些行星?比如说有矮行星、金星等一些行星. 尼比鲁会不会是从太阳里面出来的? 春天的一个夜晚,一位久别家乡的人,望着皎洁的人月光不禁想起了家乡,于是吟起诗 做凉糕没有石灰水用什么能代替 重力的作用点称为重心,从效果上看,我们可以认为各部分受到的重力集中在一个点上,这个点叫做物体的重心,物体重心位置与什么因素有关?是如何进行确定的? 美的空调51变频出现PR是什么意思? 分解重力重力为G的物体静止在倾角为a的斜面上,将重力G分解成垂直于斜面向下的分力F1和平行于斜面向下的分力F2F1就是物体对斜面的压力,这句话为什么不对 α=6°24′40″等于多少度? 当代著名的物理学家之一斯帝芬.霍金,著有一本影响了全世界成千上万人的书.这本书是—— 这个重力怎么分解 虾爬子买回来后怎么洗?有没有什么讲究虾爬子和螃蟹一起做可以吗? 猫鼬欲擒毒蛇当美食 毒蛇凌厉反击赢得世界新闻报窃听丑闻开审 卡梅伦政府威浙江释疑吴英资产处置:困难重重 已追清华公布领军计划推荐学校 浙江三中学疑似Nexus5第一张照片流出 摄像浙江19所高中入围清华大学领军计划名移动设备进入美国儿童生活 使用人数两国务院同意杭州再启城市总体规划修编女星着透视装惊现内裤 强搂导演遭拒绝11年来最强风暴袭英国 海陆空交通大美国在欧反导基地开建 防范伊朗导弹引中央巡视组:把发现问题、形成震慑作为专家析中央巡视组组长一次一授权:改变网络红人板车哥来到余杭 行万里路为穷16岁伴娘婚礼上遭多人扒光摸遍全身(温州公交车刮擦劳斯莱斯幻影加长版轿车11年来最强风暴袭英国 海陆空交通大英国“小报女王”将接受刑事审判 令世美国在欧反导基地开建 防范伊朗导弹引安倍突访土耳其 传为劝阻土放弃购中国杰克逊私人医生刑满出狱 欲再获行医执下一篇德国理发记唯有沉沦的青春本周最活跃号码老树画话律己识人空泛讲话令学生失去兴趣中小学教材非得如此“换血”印尼雅加达接棒下届亚运会银胆04止庵的那双老布鞋未知死,焉知生再问地狱有几层《天龙八部》与《天方夜谭》通过后天周游世界所带来的改变,风月鉴舒婷:写作不可能像马戏团驯狮看玄幻没什么大不了举重失手,丢了榜首举重失手,丢了榜首名家点金
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘