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

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

 

PHP操作SQLite数据库 PHP利用DomDocument创建XML文件 ASP.NET如何加密/解密URL网址 如何使用C#读取csv文件 三步骤实现ASP.NET(C#)项目中添加谷歌(Google Map)地图 使用C# ASP.NET以FTP客户端方式下载文件 ASP.NET如何用C#代码检测手机浏览器 使用C#读取上传的Excel文件 新版本SQL Helper类 C#使用iTextsharp生成PDF 在.NET里用iTextSharp库生成PDF文档 用itextsharp将ASP.NET页面导出到PDF中 什么是JQuery-JQuery API jQuery入门指南-JQuery API jQuery的核心部分-JQuery API $(elements)-JQuery API $(expr, context)-JQuery API $(fn) -JQuery API $(html) -JQuery API $.extend(prop) -JQuery API $.noConflict() -JQuery API each(fn)-JQuery API eq(pos)-JQuery API get(num)-JQuery API get()-JQuery API gt(pos)-JQuery API index(subject)-JQuery API length-JQuery API lt(pos)-JQuery API size()-JQuery API CSS-JQuery API 哪里有CASL语言虚拟机下载?急,谢谢! 如何改变控件Enabled时的字体颜色??? 学习C++采用BC++好还是vc++好? 如何打开用winara3.0加秘的文件? ADO方法访问数据库出措时如何获得数据库错误号(sqlcode)? 如何在aspx页面中添加TreeView控件? 关于用JSP做邮件服务的问题~ 如何找到windowsXP风格的全系列控件 Widestring与AnsiString之间怎么相互转换 关于FTP的问题 用什么函数可以得到本地硬盘分区个数? 程序中如何跳出进行鼠标操作? 传值,三个窗体之间的传值,在线,请回答 斑竹,请教你一个问题:ASP与报表... 体提议意见 数据库中正常,在JSP中显示好象为十六进制数,帮忙解决 如何获取硬盘序列号? 请教高手,这个效果用CSS该如何实现? win2k如何实现桌面共享!! 可不可以怎么做? 当前提供者不支持索引必需的界面 没有马甲的来这里报到! linu和windows都不能启动了,怎么办,急急急!!! 请问,在PB中怎么为自定义窗体类定义一个虚拟方法? 熟悉memfile的朋友请进 php调VB程序?着急! vb 访问另一台sql server 的问题? 谁有flashmx,dreamwerver mx,firework mx 的注册吗。有100分 很急的问题? 断点无效?? 想给自己买一个数码相机做新年礼物!但对选中的品牌不是很熟!请师哥师姐给点建议!!! 如何对视图连接的表进行数据插入?? 谁会替用户负责?用“小灵通”还是小心为妙 做过考勤管理的请进………… 简单问题,麻烦各位高手!!! 请问delphi5中有没有delphi6中的object treeview功能 哪有关于网络安全方面的资料? 三层MIS中的中间件怎么用COM或EJB来实现. 请问哪里的个人主页控件支持JSP? 再次请教一个有关DataGrid不能显示而令人头晕的问题(在线等待)! 做过考勤管理的请进………… 在ASP.NET中怎样实现语句加入引用? 请问下面这个问题应该怎么解决最好?关于处理网页中的数据的 使用VB6自带的Sample中自动化示例应用程序时的一个问题 那位高手知道怎样实现曲线分析图... 一个简单SESSION 问题,请解决。在线等,没分了不好意思. 为什么在asp中使用ADODb的Connection对象的方法时不能使用事务处理 ====寂寞啊!谁帮介绍一个女孩啊(15-18)岁的!!万分感谢!==== 高分请教大虾,关于搜索的问题?。。。。 100分请教一个简单的问题?? runtime在JAVA中解释应该是什么意思? SCO上的ORACLE7建库?SOS 福岛核污水泄漏事故等级上调 安倍称政沙特“巫术战争”:信主不信巫美国:涨工资拯救低收入者?日媒谴责潘基文涉日历史言论 韩媒批其杭州信息产业工程重点扶持信息软件和电杭州新增两条东西向的育英路和余杭塘路杭州昨天PM2.5的平均浓度值为18宁杭甬高铁车次停靠站发布 杭州东站6宁波毒蛋糕致近百人中毒事件主体责任认省第十三次妇女代表大会代表建议防止儿京杭高铁最快4小时58分阳光不烈雨水不大 端午三天杭州天气不杭州端午节期间新开7条公交换乘线过期鸡翅化妆后销往菜市场餐饮店食堂杭州公交车上300斤猪肉皮一路解冻一记者探访杭州市场尚未发现整容鸡翅昨天杭州地铁多站点因故停车 十天内两端午节生鲜产品走俏涨价 宁波活禽交易宁波现已成功试种色拉土豆杭州上城区永康开化等5个县市区党政主东站枢纽开通时先启用东广场 候车大厅特朗普基金会将解散:避免与总统身份有老人扎堆领“免费”鸡蛋?其实这都是骗2016山东已建成49套校园科技馆,辽宁舰编队应当远行,走出第二岛链多名全国人大代表的代表资格终止下周的\"元旦抢红包\",要变玩法了城市顽疾!“小蹦蹦”无视禁行区肆意穿在濮阳倾倒千吨废硫酸,聊城一化工厂被昨晚,“得分机器”如何被辽篮“断电”这次足球“三对三”为何吸引人“孙队长”的担当竞彩足球总进球小技巧-4℃!扬州气温明天开始暴跌,还有超安徽芜湖:高速交警连闯8处红灯救人“我就是抢劫,我是依法抢劫!”环境治理 我们有信心(数字解读201民生改善 我们有收获(数字解读201北京首列磁浮列车将于2017年运行出彩中国 我们在一起(数字解读201山里娃娃的足球梦足坛那么大 我想去看看
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘