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

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

 

MDCC重磅讲师:Pebble CEO Eric Migicovsky 历届中国大数据技术大会PPT精粹(一) 通讯也“跨界”:几行代码,API+SDK,用PaaS实现移动互联 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大不相同! 杨远骋:聚美优品与百度云推送的故事 糗事百科王坚:百度云推送让我们省心 各位,感觉学数学难不难? 壹?ACCESS2000的数据库有几行坏了,无法用ACCESS修复/无法删除,一读到该行ACCESS就直接退出,怎么办? 号外:今天终于卖了侯捷的Inside The C++ Object Model ,休息时可以翻番,为了祝贺特灌水100 谁能给我连 接sql2000数据库数据原的原代码===火急!!! 高手帮忙,如何让我能用jbuilder5? 请问用Perl编写用户交互程序 请问各位大哥,上海的高程考试在哪里报名啊? dcom 服务器关闭时怎能捕捉异常 三戒,有请~~~ 谁知道websphere的试用版怎么做掉? 打印DataReport时怎样用API改变系统的纸型,急急急急急急急急急!!!! 新来的~~来报到了~~只能送20分~~希望大家不嫌弃~~ 请成功使用JBuilder5的朋友指教!! 激情放送 五位QQ号,100块,你会要吗? 555~~~~挂了PASCAL挂了,5555~~~~我学不好DELPHI 了5555谁帮我呀!!! 有编过游戏修改器的高手吗? jinesc领分~~~ 如何使UpDown每次增加或减少0.5? 有个问题很困惑,请教 上傳后,服務器端如何接收? 各位高手好!现在有谁是正在使用 LINUX 上网的.报一下好吗!!!!!! 我快神经了,求救 各位高手好!现在有谁是正在使用 LINUX 上网的.报一下好吗!!!!!!!! 别笑我傻,又有简单问题 各位高手好!现在有谁是正在使用 LINUX 上网的.报一下好吗!!!!!!! 各位高手好!现在有谁是正在使用 LINUX 上网的.报一下好吗!!!!!!!!!!!! 各位高手好!现在有谁是正在使用 LINUX 上网的.报一下好吗!!!!!!!!! 大家都谈谈建立什么样的目录结构能更好的管理硬盘里的东东 lilo 如何设置??请赐教!! 各位高手好!现在有谁是正在使用 LINUX 上网的.报一下好吗!!!!!!!!!!!1 mts是什么? mts是什么?? 学习汇编要什么基础,要看什么样的书,有没有好的汇编的电子参考书下载呢? 腾讯的qq怎么不好用了? 有CCNA,Scjp2,高程的计算机本科生能卖多少?(答者有分,只能给33分,没办法) word的表格问题 如果开另外一个线程来进行注册码检验,是否比较难CRACK? 请问高程考试考试的难度 怎么让程序启动的时候接受参数? mts是什么??? 我也调查:这里有多少冠名以“独孤”的,为何独孤???? 菜鸟SOS 个人论:编写程序方法论(原作者,huangbeyond) 向流版主学习,戒网!戒网!成天在网上瞎转,不如下去加强学习,碰到问题再上网寻求答案,天天在网上泡得久了,看到各大PB网站的编程技巧都有些视而不见了.....到PB论坛很多人都象到自己喜爱的聊天室了,到论坛好象就是来聊天一样.....戒网!戒网! 如何编写一个集成Ms Word的控件,能够处理WEB上的文件排版 怎么不能下载呢? 我是女孩,有人信吗??嘻嘻~~ 谁知道关于用vc编游戏的书,请各位大虫们介绍介绍好吗?谢谢了!!!!!!!!!! 有关sql server不能显示中文啊?? 关于B/S动态刷新问题 我们经常在一起玩用英语怎么说 英语翻译像四川九寨沟,张家界,安徽黄山,桂林山水,等等 英语翻译词组 梦想中的旅行 可不可以用dreamy trip?dreamy 不是有 虚幻的 模糊的意思嘛? "我们经常在一起"用英语怎么说? "周末去旅游好吗?"的英文翻译是什么? “旅行很快就结束了”英文翻译要用过去时! 亲爱的我们永远在一起好吗?用英语怎么说 英语翻译 翻译下就行 我看看大意3. Results and discussions3.1. Extraction kineticsThe characteristics of the bed and the particles were: particle average diameter of 3.9×10−4 m, true particles density of 1524 kg/m3, apparent bed de 翻译英文:天气变冷,注意保暖. 我要我们永远在一起 帮我翻译 我要我们永远在一起单独的永远在一起 英文是什么 我们用了一周的时间在桂林欣赏了美丽的风景英文翻译 天气变冷了 英汉互译 我们永远在一起 用英语怎么说 我喜欢那美丽的风景!用英语怎么说? 天气变冷了 用英语怎么说 It is 我们永远在一起”,用英语怎么说呀] 我们用一周的时间在桂林欣赏了美丽的风景英文翻译 用英语翻译 :这的天气突然变冷, 让我们在一起用英语怎么说 我将站在巴黎铁塔的最高层去欣赏巴黎美丽的风景 用英语翻译不要拿机器翻译 英语翻译英语翻译:如果吃药之后还没好,我就带你去医院看病. 不知道以后我们会不会在一起用英语怎么说? 英语翻译希望哪位达人帮我翻译.事后会追加分值.摘要:发展旅游电子商务不仅是中国旅游业自身发展需要,也是信息时代中国旅游业面临国际旅游业竞争的必需.通过分析中泰旅游电子商务发 英文翻译:你需要带上一些衣服,因为在这个天气去山上,早晚有点冷 英语翻译求英语翻译成在线等1.仅以此画表示我的愤怒 英语翻译我觉得,最理想的度假地一定是一个美丽的海滨城市,那里要有充足的阳光,柔软的沙滩和多姿多彩的海滩派对.还要有很多美女帅哥,数不清的椰子树以及一整天都放不完的动听音乐.我 英语翻译chicking file system on E最前面这个chicking是不是指系统的某个文件名呢? 英语翻译 现在他们正在看一张他们教室的画. 旅游新热点 用个英文翻译 英语翻译Happy birthday to a special friend!Although I haven't known you many years,Perhaps because you've dried so many tears,Pleasure reigns as I these greetings send.Your happiness should last till all things end!Because you've been so sweet an 自己画的画 英文翻译 最热门的旅游景点在哪里?风景旅游景点最多旅游人数是哪里? ha ku na ma ta ta 翻译成中文是什么意思?我这个人是个英文盲. 你喜欢哪一类型的画?求英语翻译 上海热门旅游景点有哪些? 英语翻译you never know until you try you uever know until you try and you never try unless you really try you give it your best shotyou do the best you can and if you've done everythingin your power,and still fail_the truth ofthematter is that yo 英语翻译:你明天和他一起来上海吗? 英语翻译“你越轻视我,我越要游得快”.关键是“越---越---”句式 在中文里它的发音是ta.翻译成英文 英语翻译亲们,最近想跳槽到一家鞋企,人家要英文简历.我现在想知道报价员的英文该怎样翻译的.如果您是这行的就更好,希望能得到您的指点, 求“去上海一定要去东方明珠电视塔游玩”的英文翻译,关键词include Close my eyes and feel your mindTime has passedI walk like a shadowNever knewWhat I am going throughYou touch my heart and take my breath awayWhisper on the wind so softlyLet the bright stars fill out dreams with loveReach for your hand (you re holdi 英语翻译想翻译好报价单上交,该去哪里翻译啊 你给了我一次愉快地旅行 英文翻译 英语翻译它叫做——pet girl 英语翻译注意:请用人脑翻译 帮忙用英语翻译一句话 “一次遥远的旅行” 英语翻译 英语翻译是以What's —— —— —— this computer 英语翻译我相信你在中国将会有一个美好的旅行! 英语翻译 初一英语翻译:价格合理 英语翻译 进行一次家庭旅行 以下英文翻译成中文这是啥意思giankangshenghuoyacheengde? 旅游景点英文翻译 英语翻译是7个词语和成的 英语翻译1.One pair of platinum and diamond jewelery2.a surprise gift3.A group of special envoy4.A mysterious lucky5.A beautiful story,a love song for some exciting6.Wearing a white wedding the bride7.She is the world's most beautiful bride8.At th 没有人愿意和他呆在一起用英语怎么说? 英语翻译先是关于九寨沟滴1.五花海2.五彩池3.我们路过了许多景点.(注意哈,过去时)4.熊猫海5.诺日朗瀑布6.树正寨还有一句:从山脚爬到山顶一共有3800米,但我和爸爸还是坚持爬了上去, 英语翻译To minimise ATM fees,withdrawal the maximum allowed each transaction,usually 20 banknotes or 20000 baht.Your personal daily withdrawal limit will be enforced if less than the equivalent of 20000 baht.If you intend to bring Travellers Cheq
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn