jquery mobile
jQuery Mobile是一种用户界面(UI)框架,可让您编写功能正常的移动Web应用程序而无需编写任何JavaScript代码。 在本文中,了解此框架的功能,包括基本页面,导航工具栏,表单控件和过渡效果。
要继续阅读本文,您将需要:
- 以前接触过HTML
- 了解JavaScript基础
- jQuery的基础知识
您可以从下面的下载表中下载本文使用的jQuery插件源代码。 相关主题包含有关jQuery,JavaScript,DOM,HTML5等的信息。
jQuery Mobile
jQuery Mobile是一个易于触摸的Web UI开发框架,可让您开发可在智能手机和平板电脑上使用的移动Web应用程序。 jQuery Mobile框架建立在jQuery核心之上,并提供了许多功能,包括HTML和XML文档对象模型(DOM)遍历和操纵,处理事件,使用Ajax执行服务器通信以及网页的动画和图像效果。 。 移动框架本身是从jQuery核心单独下载的大约12KB(压缩和压缩),压缩/压缩后约为25KB。 与其他jQuery框架一样,jQuery Mobile是一个免费的双重许可(MIT和GPL)库。
在撰写本文时,jQuery Mobile框架是Alpha 2版本(v1.0a2)。 本守则为草案形式,可能会随时更改。 但是,现有框架非常可靠。 有了alpha版本中令人印象深刻的组件集,jQuery Mobile有望成为开发移动Web应用程序的理想框架和工具集。
jQuery Mobile的基本功能包括:
-
一般简单
- 该框架易于使用。 您可以主要使用很少或没有JavaScript的标记驱动来开发页面。 逐步增强和平稳降级
- 尽管jQuery Mobile利用最新HTML5,CSS3和JavaScript,但并非所有移动设备都提供这种支持。 jQuery Mobile的理念是同时支持高端和功能较弱的设备(例如不支持JavaScript的设备),并仍提供最佳体验。 辅助功能
- jQuery Mobile在设计时考虑了可访问性。 它支持可访问的富Internet应用程序(WAI-ARIA),以帮助使用辅助技术的残障游客访问网页。 小尺寸
- jQuery Mobile框架的整体大小相对较小,JavaScript库为12KB,CSS为6KB,还有一些图标。 主题化
- 该框架还提供了一个主题系统,使您可以提供自己的应用程序样式。
当工具箱,例如PhoneGap的使用(参见相关信息 ),它使用网络技术来构建独立的应用程序,jQuery Mobile框架可以帮助简化您的应用程序的开发。
浏览器支持
我们对移动设备浏览器的支持已经走了很长一段路,但是并不是所有的移动设备都支持HTML5,CSS 3和JavaScript。 在此舞台上,jQuery Mobile的渐进增强和优雅降级支持开始发挥作用。 如前所述,jQuery Mobile同时支持高端和功能较弱的设备,例如不支持JavaScript的设备。 渐进增强包括以下核心原则(来源:Wikipedia):
- 所有浏览器都应可以访问所有基本内容。
- 所有浏览器都应可以访问所有基本功能。
- 外部链接CSS提供了增强的布局。
- 外部链接JavaScript提供了增强的行为。
- 尊重最终用户浏览器的首选项。
所有基本内容均应在基本设备上呈现(按设计),而更高级的平台和浏览器将通过附加的外部链接JavaScript和CSS逐步得到增强。
jQuery Mobile当前为以下移动平台提供支持:
- Apple®iOS:iPhone,iPod Touch,iPad(所有版本)
- Android™:所有设备(所有版本)
- Blackberry®Torch(版本6)
- Palm™WebOS Pre,Pixi
- 诺基亚N900(正在进行中)
看到在jQuery Mobile的网站以获取更多信息支持的浏览器矩阵(参见相关主题 )。
UI组件摘要
jQuery Mobile为不同类型的UI元素提供了强大的支持。 图1显示了当前支持的UI组件的摘要。
图1. jQuery Mobile UI元素(截至2010年8月)
支持工具栏,按钮,列表视图,选项卡,弹出菜单,对话框,过渡,编辑面板和表单元素。 提供了大多数(如果不是全部)移动Web应用程序所需的UI元素。
$.mobile
和受支持的方法和事件
JavaScript对象jQuery
也称为$
。 jQuery Mobile框架通过移动插件扩展了jQuery核心,其中包括mobile
或$.mobile
,它定义了多个事件和方法。 $.mobile
公开的一些方法如下所述。
表1. $.mobile
公开的方法
方法 | 用法 |
---|---|
$.mobile.changePage | 以编程方式从一页切换到另一页。 例如,要使用幻灯片过渡到weblog.php页面,请使用 |
$.mobile.pageLoading | 显示或隐藏页面加载消息。 例如,要隐藏消息,请使用 |
$.mobile.silentScroll | 滚动到特定的Y位置而不生成滚动事件。 例如,要滚动到Y位置50,请使用 |
$.mobile.addResolutionBreakpoints | jQuery Mobile已经为min/max 类定义了一些断点。 调用此方法添加断点。 例如,要添加800个像素宽度的 |
$.mobile.activePage | 指当前活动的页面。 |
您可以使用bind()
或live()
方法绑定多个事件,例如jQuery Mobile初始化,触摸事件,方向改变,滚动事件,页面显示/隐藏事件,页面初始化事件和动画事件。
例如,触摸事件包括tap
, taphold
和各种滑动事件。 滚动事件包括scrollstart
和scrollstop
。 页面事件使您可以接收通知:创建页面之前,创建页面时,显示或隐藏页面之前以及显示和隐藏页面时。
清单1显示了当jQuery Mobile开始执行时绑定特定事件的示例。
清单1.绑定到mobileinit
事件
$(document).bind("mobileinit", function(){
//apply overrides here
});
上面的事件使您可以在jQuery Mobile启动时覆盖默认值。 可以覆盖多个设置,例如:
-
LoadingMessage
设置页面加载时显示的默认文本。 -
defaultTransition
为使用Ajax的页面更改设置默认过渡。
您可以根据需要覆盖更多配置参数。 请参阅jQuery Mobile的文档(请参阅相关信息 ),或源代码(见下载的资源 ),了解更多信息。
您还可以绑定到其他事件,这些事件使您可以基于touch
和page
事件创建动态应用程序。
HTML5 data-*
属性
jQuery Mobile依靠HTML5 data-*
属性来支持各种UI元素,过渡和页面结构。 不支持它们的浏览器会将它们静默丢弃。 表2显示了如何使用data-*
属性创建UI组件。
表2. UI组件的data-*
属性
零件 | HTML5 data- *属性 |
---|---|
页眉,页脚工具栏 | <div data-role =“ header”> <div data-role =“ footer”> |
内容主体 | <div data-role =“ content”> |
纽扣 | <a href =“ index.html” data-role =“ button” data-icon =“ info”>按钮</a> |
分组按钮 | <div data-role =“ controlgroup”> <a href="index.html" data-role="button">是</a> <a href="index.html" data-role="button">否</a> <a href="index.html" data-role="button">是的</a> </ div> |
内联按钮 | <div data-inline =“ true”> <a href="index.html" data-role="button"> Foo </a> <a href="index.html" data-role="button" data-theme="b">酒吧</a> </ div> |
表单元素(选择菜单) | <div data-role =“ fieldcontain”> <label for =“ select-options” class =“ select”>选择一个选项:</ label> <select name =“ select-options” id =“ select-options”> <option value =“ option1”>选项1 </ option> <option value =“ option2”>选项2 </ option> <option value =“ option2”>选项3 </ option> </ select> </ div> |
基本列表视图 | <ul data-role =“ listview”> <li> <a href="index.html">一个</a> </ li> <li> <a href="index.html">两个</a> </ li> <li> <a href="index.html">三个</a> </ li> </ ul> |
对话方块 | <a href="foo.html" data-rel="dialog">打开对话框</a> <a href =“ dialog.html” data-role =“ button” data-inline =“ true” data-rel =“ dialog” data-transition =“ pop”>打开对话框</a> |
转场 | <a href="index.html" data-transition="pop" data-back="true"> |
jQuery Mobile文档包含受支持的data-*
语法的完整列表。
jQuery Mobile页面的结构
本节讨论jQuery Mobile页面的一般结构。 jQuery Mobile具有有关页面本身结构的准则。 通常,页面结构应包含以下部分:
-
标题栏
- 通常包含页面标题和“后退”按钮 内容
- 您的申请内容 页脚栏
- 通常包含导航元素,版权信息或您需要添加到页脚的任何内容
图2显示了不同部分的示例。
图2. jQuery Mobile Web应用程序的一般结构
页眉和页脚工具栏支持固定和全屏定位选项。 固定位置使工具栏在滚动时保持静态。 全屏定位与固定屏幕的工作原理相同,只是仅在单击页面时才显示条(以提供非干扰性的全内容体验)。 本节的其余部分探讨了通用页面结构HTML代码。
HTML类型的文档本身的定义是!DOCTYPE html>
,它定义了HTML5文档类型。
HTML头部分加载了三个重要的jQuery Mobile组件:
- jQuery Core库—核心jQuery库
- jQuery Mobile库-jQuery框架中特定于移动设备的部分
- jQuery Mobile CSS —定义核心jQuery Mobile UI元素CSS。 它定义了过渡和不同的UI小部件,例如滑块和按钮,并大量使用了Webkit转换和动画。
清单2显示了HTML标头部分。
清单2. HTML头部分
<html>
<head>
<meta charset="utf-8" />
<title>Intro to jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="//code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
HTML代码的下一部分定义了页面本身。 请参阅data-role="page"
属性的使用。 清单3显示了一个示例。
清单3.定义页面块
<body>
<div data-role="page" id="page1">
清单3定义了一个页面。 仅当本地多个页面块驻留在同一HTML文件文档上时, id
属性才是必需的,但是定义唯一ID是一种很好的做法。
接下来的几对代码清单显示了如何定义页面的不同页眉,内容和页脚部分。 标题栏通常由页面标题和“后退”按钮组成,如清单4所示。
清单4.页面标题栏部分
<div data-role="header">
<h1>Header Bar</h1>
</div><!-- /header -->
在这种情况下,标题栏仅包含H1标题文本。 您的大部分内容都位于标题之后,如下所示。 清单5中的示例仅显示了一个简单的段落,但是您可以在其中添加列表,按钮,表单等。
清单5.页面内容部分
<div data-role="content">
<p>Content Section</p>
</div><!-- /content -->
通常在页脚栏放置导航元素和版权信息,如清单6所示。
清单6.页脚栏部分
<div data-role="footer">
<h4>Footer Bar</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
清单6中的示例页脚部分非常简单。 在页脚栏中添加导航栏不是很复杂,如清单7所示。
清单7.在页脚部分添加导航栏
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">Today</a>
<a href="index.html" data-role="button">Tomorrow</a>
<a href="index.html" data-role="button">Week</a>
<a href="index.html" data-role="button">No date</a>
</div>
</div><!-- /footer -->
图3显示了带有新添加的导航栏的结果页脚栏部分。
图3.带导航栏的页脚
定义多个本地页面
前面的示例仅覆盖一页。 jQuery Mobile还为单个HTML文档中的多个页面提供支持。 多个页面是本地的,内部链接的“页面”,您可以将它们组合在一起以进行预加载。 多页页面的结构类似于单个页面的先前示例,不同之处在于它将包含多个页面数据角色。 清单8显示了一个示例。
清单8.在一个HTML文件中定义多个页面
<div data-role="page" id=page1">
<div data-role="header">
:
</div>
<div data-role="content">
:
</div>
<div data-role="footer">
:
</div>
</div>
:
:
<div data-role="page" id=page2">
<div data-role="header">
:
</div>
<div data-role="content">
:
</div>
<div data-role="footer">
:
</div>
</div>
当引用同一HTML文档本地的页面时,jQuery Mobile会自动处理引用。 当引用外部页面时,jQuery Mobile将显示加载微调器。 如果遇到错误,框架将自动显示并处理错误消息弹出窗口。
页面过渡
jQuery Mobile为基于CSS的页面过渡(受jQtouch启发)提供了支持,该过渡在导航到新页面并返回时适用。 过渡包括:
-
滑动
- 提供水平过渡 上滑和下滑
- 在屏幕上提供上下转换 流行音乐
- 提供爆炸式过渡 褪色
- 提供淡入淡出的过渡 翻转
- 提供翻转转换
您可以通过两种不同的方式添加页面过渡:
- 使用
<a href="index.html" data-transition="pop" data-back="true">
将data-transition属性添加到链接在静态页面上使用
data-transition
属性。 - 使用
$.mobile.changePage("pendingtasks.html", "slideup");
编程方式$.mobile.changePage("pendingtasks.html", "slideup");
使用动态页面时,请使用编程方法。
列出检视
列表视图是UI元素的基本类型,在移动应用程序中大量使用。 jQuery Mobile支持多种列表视图:基本列表,嵌套列表,编号列表和只读列表; 拆分按钮; 列表分隔符; 计算气泡; 缩略图; 图标; 搜索过滤条; 内嵌样式列表; 和主题列表。
清单9显示了一个基本的列表视图。 列表视图是使用<ul data-role="listview">
数据属性创建的。
清单9.创建一个简单的列表视图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="//code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Facebook Friends</h1>
</div><!-- /header -->
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true">
<li>
<a href="index.html">Get Friends</a>
</li>
<li>
<a href="index.html">Post to Wall</a>
</li>
<li><a href="index.html">Send Message</a></li>
</ul>
</p>
</div><!-- /content -->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
在<ul data-role="listview"/>
,定义常见的<li>
列表项。 这是jQuery Mobile如何扩展基本HTML语法的完美示例。 清单10中的代码示例的结果如图4所示。
图4.一个简单的列表视图
形式
表单是另一个用于将信息发布到服务器的常见Web工件。 jQuery Mobile支持许多表单UI组件:文本输入,搜索输入,滑块,拨动开关,单选按钮,复选框,选择菜单和主题表单。 它们都可以很容易地创建。 清单10显示了带有选择菜单和提交按钮的表单。
选择菜单由本机<select name="select-options" id="select-options">
,但jQuery Mobile改进了其“外观”。 <div data-role="fieldcontain">
语句出于可视化目的将不同的值分组。 表单本身由本机<form action="..." method="get">
。
清单10.表单,选择菜单和提交按钮
<form action="forms-results.php" method="get">
<fieldset>
<div data-role="fieldcontain">
<label for="select-options" class="select">Choose
an option:</label>
<select name="select-options" id="select-options">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option2">Option 3</option>
</select>
</div>
<button type="submit">Submit</button>
</fieldset>
</form>
图5显示了表单及其内容。
图5.具有选择菜单和提交按钮的简单表单
选择选择菜单时,jQuery Mobile会显示图像上显示的弹出窗口(图5右侧),其中包含所有选择值,在选择后将自动关闭。 只要正确定义了表单的action
和method
属性,jQuery Mobile就会处理表单,Ajax调用和结果页面之间的过渡,并在必要时显示微调框。
其他UI组件
在jQuery Mobile网站和文档中有更多UI元素和元素变体(请参阅参考资料 )。 为了补充您从本文中学到的知识,建议您研究以下内容:可折叠的内容,布局网格,主题以及列表视图和表单的其余部分。
结论
本文介绍了广泛的jQuery Mobile JavaScript框架。 您了解了框架的基础知识以及如何编写功能性网页,而无需编写任何JavaScript代码。 如果您需要处理HTML文档,则可以使用jQuery核心进行操作。 您探索了基本页面和导航,工具栏,表单控件以及过渡效果。 jQuery Mobile提供了许多可以通过编程方式使用的方法,事件和属性。 让这激发您寻求有关本文未涵盖的UI组件的更多信息。
翻译自: https://www.ibm.com/developerworks/web/library/wa-jqmobile/index.html
jquery mobile