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

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

 

【信息图】到2020年开发者、设计师、测试员的数量将达到史无前例的高度 推广与盈利专题论坛:中国影响世界,世界定义中国 SlideIdea CEO李建忠:移动产品的技术面思考 BDTC→→百度林仕鼎、腾讯蒋杰、阿里唐洪论道大数据平台与技术 谷歌首席互联网布道师:隐私保护并不是一种正常行为 微软公开“挑衅”谷歌,出售反谷歌标语T恤 四大UX设计原则,打造网站最佳浏览体验 【BDTC讲师】黄晓庆:从小灵通到Hadoop与实时大数据分析 【BDTC讲师】杨强:从禽流感预测到图片语义解释 2013中国大数据技术大会讲师议题正式发布 “2013中国大数据周”即将开幕 正式发布中国大数据现状白皮书 搜狐畅游发布3D游戏引擎Genesis-3D 基于MIT协议开源 传闻微软将收购AOL旗下的Winamp和Shoutcast 【BDTC讲师】大数据时代“掘金机”:百度、360、一淘搜索技术分享 谷歌董事长:审查,将会在十年内消失 50万奖金+天使投资:创维天赐家庭互联网创新大赛开幕 专利案苹果获胜:获赔2.9亿美元 三星不服将继续上诉 Google正打造Spark:一个基于Chrome App的集成开发环境 研发周报:成为一名PHP专家其实并不难 将Vistual Studio打造成为Node.js IDE 度量Web性能的关键指标 路由器未火够!高通发布互联网处理器 Unite2014大会:移动开发者的饕餮盛宴 玩与学并存 Kano kit让你自制Raspberry Pi电脑 【BDTC讲师】Hortonworks Gunther&amp;amp;Ted:HBase、Stinger的发展与实践 人人网推出开放平台2.0 多项重大改进吸引开发者回流 红帽高管:将Linux价值理念和做法延伸到OpenStack Fundation 5发布:号称最快版本,响应式用户体验更完善 程序员远程工作必会编程语言JavaScript 苹果确认收购3D传感技术公司PrimeSense 从电影《饥饿游戏》里学到的IT知识 现在的浏览器还支持不支持applet啊?高手救我!--------怎么写一个applet兼容更多的浏览器? 请问那里有这种工具??近来看看!! 请capboy等写过filter的各位前辈指点 利用DW制作一张确定最佳分辨率为800*600或者1024*768的页面, 急 求助: 怎样获得系统当前可用的字体? 如何打印FormView? 如果你是VC高手,对COM有深入了解,欢迎! 我今天看了我英语过级的公布成绩,我得了一个天险数字60。5分,请问。。。。。? 谁有linux下的mod_webapp.so DW UltraDev里rs.source="select * from stu where banci=request.QueryString("banci")这样是不是不行? Microsoft JDK nmake生成的EXE文件反编译问题!!! 各位大虾:请问谁能告诉我哪里能找到win xp home edition plus???如果能让我找到,送1000分 请问如何将PaintBox.Canvas的当前内容保存至内存, Linux下c语言程序该怎样运行? 请问:vb.net中oracle数据库能否支持blob格式? .ceb文件如何打开? 什么地方能够找到《Exploring Requiremengs:Quality Before Design》这本书? 关于制作一个classwizard的设计思路,欢迎大家讨论 weblogic server console: java.lang.NullpointerException 如何得到本局域网上所有主机的ip? 请问: 如果在网上可以通过网页上传某些文件到服务器空间上,并显示一些关于上传文件的信息~ 一段检测光软驱的程序,大家帮忙除Bug! 为何会死机? 高分放送,木马病毒求救! tomcat下的分布怎么做? 各位使用手机的老鸟,2000左右的手机什么牌子的好 喜欢硬件朋友请进来看看。 如何复原被Linux改写的引导扇区呢 请问各位大虾,怎样将c++同数据库结合起来 大哥......你继续看!!!??? 喜欢硬件朋友请进来看看。 在哪里调用方法?是在cpp文件还是在.h文件里? 初学者关于显示的问题? depunf朋友,您好,stringgrid那里有delete啊?敬请赐教! formula one报表打印问题 d3d头文件的错误? 执行了insert语句之后我怎么得到刚刚插入的id值啊?快快,在线等待 为什么找不到服务器? 如何禁止用户调整窗体大小?但最大化、最小化和关闭按钮仍在。 各位: 如何让系统认识带小数的字体如:7.5? 没有经验,请有实际经验的朋友回答:) 请问pb8.0+sqlserver2000怎么配置数据源!(sqlserver2000与asa7.0连接数据库时有什么不一样!) 光盘能装超过700MB的数据吗? 考程序员要考的内容? 100分呀,哪里有钱能的C++电子书下载? 同学的一台电脑,放mp3有声音,但是放mtv却没有了声音,是怎么回事? 在线等待,我的excel密码忘了,长度大约为6个到8个,请大家帮帮忙 请问,我在使用Excel制作表格的时候,有一项需要输入身份证号码。可是填入18位身份证号码后,一换行,号码的后3位会自动变为000。请大家 请教如何处理JSP网页中的路径问题? SQL 中如何与用户交互? 如何把参数传到框架页中的子页(aspx页)? 修改病句:由于长江流域连续干旱,导致同亭湖咸阳湖水面大面积减少,给人们生活带来很大影响. 小学描写松柏翠竹的诗句 松柏的特点? 位于长江流域的湖泊有 A洞庭湖和巴尔客什湖B洞庭湖和鄱阳湖C青海湖和巴尔客什湖D青海湖和鄱阳湖 描写松柏的毅力的诗句有哪些? 人体当中有多少种生物酶? 为证明光照和重力两种因素对生长素在植物体内的分布哪个影响更大 请问干的河豚鱼怎么吃,是杀好的晒干的, 什么是酵素?酵素对人体有什么好吃? 家里飞进2鸽子 正在做窝 我该怎么办?目前 做的窝停留在衔树枝上 没多少以前鸽子貌似住在家里(我家5楼)的墙壁凹槽里面我要怎么办 才能帮助它们 留下它们. 干的河豚要怎么吃才没有毒,具体要怎么做? 世界上寿命最长的动物是什么 科学家发现鸽子会按自己的生物时钟判断时间,再配合当时太阳的位置来导向飞回正确的巢位.现在将鸽子放在 植物的呼吸作用不是只在晚上进行么 河豚鱼」哪个部位是有毒的?jpt 动物细胞反应器应具有哪些基本要求?有哪些类型?特点是什么? 历史上有什么人物具有松柏的品质 河豚的什么部位有毒? 动物细胞反应器的结构,谢 柏树的精神是什么 人,动物,植物与大自然的关系是怎么样的?6年级寒假作业上的急! 采是什么意思 松柏具有什么精神? 河豚那个部位有毒 摘和采的意思摘杨芽,采柳叶这句话中,摘和采两字意思有何不同 松柏有什么品质? 河豚的哪个部位有毒 意思,必采,先来先采! 植物细胞的叶绿体内哪种色素进行能量转化?简要说明一下 河豚的毒在哪些部位 意思必采 河豚吃什么河豚鱼会吃其他的热带鱼吗? 为什么冬天的柏树是绿的? 植物根明明在地底下啊 按理说在重力作用下生长素应聚集在根尖处啊 为什么在近地侧 河豚可以吃吗?对身体有什么危害吗? 为什么冬天的柏树是绿的?3Q 生长素在重力作用怎么运输 河豚鱼怎么吃啊?朋友送给我了一条河豚,现在还或者呢..炸着吃可以么? 青少年网络文明公约 问一个古代汉语的题!子曰昔齐景公田招虞人以旌不至将杀之(虞人守苑囿之吏也招之当以皮冠而以旌故不至也)志士不忘在沟壑勇士不忘丧其元孔子奚取焉取非其招不往也如不待其招而往何哉 河豚怎么吃 怎么计算空间站寿命?或者说发送到太空中的空间站是有哪些方面影响到它的寿命? 氨水中的一水合氨的电离方程式是什么? 柏树的外形特征,作用是什么急 俄罗斯“和平号”空间站寿命15年 国际空间站工作寿命为15~20年 中国空间站? 请问对夹式蝶阀适用的最高压力是多少?根据国标GB/T12238-2008 中4.1规定对夹连接弹性密封的蝶阀其公称压力不大于PN16,即弹性密封对夹式蝶阀适用的最高压力约为1.6MPa,欧标PN16是以120℃为基准, 古代汉语言的一些题目,题型:是非题1、“武气绝,半日复息.”息:休息1、错 2、对 2 “空自苦亡人之地,信义安所见乎?” 见——现 ,古今字,表现选项:1、错 2、对 3、“乃徙武北海上无人处,使 柏树的外形特征 什么是煤矿超采超掘?什么是煤矿超前距? 亚马逊平原位于什么洲亚马逊平原位于__洲 请从哲学的角度看网络文化不用多,三四行字(约50字)就行. 煤矿掘探一体化是什么意思 亚马孙平原位于?A.亚洲B.非洲C.北美洲D.南美洲 柏树的特点有哪些 煤矿矿井开拓“先探后掘”是什么意思? 描写松柏的诗句要多一点,不要诗,不要复制的快 松柏特点松柏的特点,要有体会 OCT反应器是什么意思? 描写松柏的优美句子 在我国青少年中发展积极向上的网络文化蕴含了哪些哲学思想
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘