使用 jQuery Mobile API 实现细粒度的自定义控制
来源:互联网 发布:win7 linux双系统引导 编辑:程序博客网 时间:2024/04/30 20:02
jQuery Mobile API 针对移动网站定制提供了另一个级别的控制。从全局选项的自定义设置,到钩住交互事件和曝光的方法,一切都可以使用该 API 实现,并且在本文中进行介绍。在本文结束时,您就会知道如何精细地定义您想在移动网站中使用的自定义选项,以及如何编写与 jQuery Mobile 框架进行交互的自定义代码。
本文介绍了一系列来自 jQuery Mobile 框架的有用的属性、事件和曝光的方法。在每一节中,将介绍各个选项,并提供代码样例,以说明它是如何完成的。要运行任何代码样例,您必须先下载 jQuery 和 jQuery Mobile 框架的最新版本,或在您的 HTML 文件中直接引用来自 jQuery 内容交付网络 (CDN) 的文件。
全局选项
以下全局选项都可以通过 jQuery Mobile API 提供,它们使您能够改变 jQuery Mobile 的默认行为:
- 扩展 jQuery Mobile 的初始化事件
- 创建自定义名称空间
- 页面初始化
- 自定义子页面的 URL 键
- 设置活动页面和按钮类
- 设置默认的页面和对话转换
- 自定义加载和错误消息
扩展 jQuery Mobile 的初始化事件
jQuery Mobile 包括一个初始化事件,该事件甚至会先于 jQuery 的 document.ready
事件进行加载。jQuery Mobile 实际上在文档对象本身上触发其初始化事件,该事件名称为mobileinit
。这使您可以覆盖和扩展 jQuery Mobile 的默认全局选项,这是整篇文章的出发点。要扩展 mobileinit
事件,您需要在 jQuery Mobile 被加载之前,以及 jQuery 框架加载之后,添加自定义的 JavaScript 事件处理程序(参见清单 1)。
清单 1. 扩展 jQuery Mobile
mobileinit
事件1
<
script
type
=
"text/javascript"
src
=
"jquery.js"
></
script
>
2
<
script
type
=
"text/javascript"
src
=
"custom-jqm-mobileinit.js"
></
script
>
3
<
script
type
=
"text/javascript"
src
=
"jquery.mobile.js"
></
script
>
mobileinit
事件,您首先需要将它与一个自定义函数进行绑定。清单 2 显示了一个示例,使用 bind
方法扩展mobileinit
事件。清单 2. 绑定到
mobileinit
事件1
$(document).bind(
"mobileinit"
,
function
() {
2
// Override global options here
3
});
extend
方法来扩展$.mobile
对象(见清单 3),也可以简单地通过直接设置每个属性来覆盖它们。清单 3. 扩展
$.mobile
对象1
$(document).bind(
"mobileinit"
,
function
() {
2
$.extend( $.mobile , {
3
property = value
4
});
5
});
extend
方法是一个更清晰的选项,因为您不需要多次写入 $.mobile
对象。然而,如果您只想更新一个属性,只需很少的代码行就可以设置每个属性(见清单 4)。清单 4. 覆盖每个属性值
1
$(document).bind(
"mobileinit"
,
function
() {
2
$.mobile.property = value;
3
});
$.mobile
对象是设置所有属性的起始点。创建自定义名称空间
您可以通过名称空间自定义 HTML5 data-
属性,如 data-role
。名称空间允许您添加一个自定义名称,例如,它将出现在data-role
属性的 data-
和 -role
部分之间。允许您自定义的名称空间的$.mobile
属性是 ns
。清单 5 显示了一个使用 ns
属性设置自定义名称空间的示例。
清单 5. 创建自定义名称空间
1
$(document).bind(
"mobileinit"
,
function
() {
2
$.mobile.ns =
"my-custom-ns"
;
3
});
data-my-custom-ns-role
而不是 data-role
,这使您可以通过 CSS 选择器定位这些名称空间。通过 CSS 选择器定位自定义名称空间提供了另一种方式来为使用那些名称空间的移动小部件设计自定义主题。页面初始化
jQuery Mobile 包括一个名称为 autoInitializePage
的属性,它确定 Web 页面是否应该被初始化。默认情况下,该属性值被设置为 true,因此当文档就绪时,页面总是被初始化。然而,通过扩展$.mobile
对象,您可以将该属性设置为 false,并在稍后再处理页面初始化。清单 6 显示了一个如何能够在其他脚本运行时暂时延迟页面初始化的示例。如果在 Web 页面上有大量客户端 JavaScript 在运行,将初始化延迟至 DOM 完成加载可能是一个好主意,这样客户端 JavaScript 就会有机会运行。
清单 6. 为移动 Web 页面设置自动初始化
01
<!DOCTYPE HTML>
02
<
html
>
03
<
head
>
04
<
title
>Understanding the jQuery Mobile API</
title
>
05
<
script
type
=
"text/javascript"
src
=
"jquery.js"
></
script
>
06
<
script
type
=
"text/javascript"
>
07
$(document).bind("mobileinit", function() {
08
$.mobile.autoInitializePage = false;
09
});
10
</
script
>
11
<
script
type
=
"text/javascript"
src
=
"jquery.mobile.js"
></
script
>
12
</
head
>
13
14
<
body
>
15
16
<
div
data-role
=
"page"
>
17
<
div
data-role
=
"content"
>
18
<
ul
data-role
=
"listview"
id
=
"my-list"
></
ul
>
19
</
div
>
20
</
div
>
21
22
<
script
type
=
"text/javascript"
>
23
$('#my-list').html('<
li
><
a
href
=
"page-2.html"
>Link to another page</
a
></
li
>');
24
$.mobile.autoInitializePage = true;
25
</
script
>
26
27
</
body
>
28
</
html
>
当引用子页面时,jQuery Mobile 默认使用一个 URL 参数键 ui-page
。您可以通过 $.mobile
对象中一个名为subPageUrlKey
的属性来修改该键。这个属性中被更新的任何字符串值,都反映在部件生成的子页面 URL。例如,如果您使用 my-page
的一个自定义 subPageUrlKey
,web-page.html&ui-page=value 这个默认的 URL 将变成 web-page.html&my-page=value。
除了提供一种方式来创建更具吸引力的 URL,自定义子页面的 URL 键还可以提供一种方式来缩短 URL,或将其值设置为更特定于要使用它们的网站的值。
设置活动页面和按钮类
当一个 Web 页面包括 jQuery Mobile 框架时,有一个默认的 CSS 类会自动被应用到 ui-page
元素。要修改默认值ui-page-active
,您只需修改 $.mobile
对象的 activePageClass
属性。通过更新该类,包含在框架中的默认 CSS 不再将其样式应用到ui-page-active
类,因为它不再存在。因此,重要的是对应您为该属性提供的值来创建自己自定义的 CSS 类。
设置默认的页面和对话转换
默认情况下,在 jQuery Mobile 中,当通过 Ajax 处理 Web 页面变更时,页面和对话包括一个转换效果。默认的页面转换是 slide
,而默认的对话转换是pop
。如需修改这些值,您需要定位 defaultPageTransition
或 defaultDialogTransition
属性。清单 7 显示了修改这些属性值有多容易。
清单 7. 设置默认页面和对话转换
1
$(document).bind(
"mobileinit"
,
function
() {
2
$.mobile.defaultPageTransition =
"fade"
;
3
$.mobile.defaultDialogTransition =
"fade"
;
4
});
slide
、slideup
、slidedown
、pop
、fade
和flip
。您也可以通过包括 data-transition
属性,将这些效果直接应用到超链接上。自定义加载和错误消息
该框架控制的其他两种选项,分别是加载和错误消息。加载消息默认显示 loading
字符串值。要更新该属性,您只需定位 loadingMessage
属性。在清单 8 中,我将默认加载信息从 loading
修改为 Please wait
。结果,当使用 Ajax 加载页面时,一个小对话框出现,其中显示了我的自定义加载消息。
1
$(document).bind(
"mobileinit"
,
function
() {
2
$.mobile.loadingMessage =
"Please wait"
;
3
});
pageLoadErrorMessage
的默认值是 Error Loading Page
。我将更新该消息,将它修改为清单 9 中更加用户友好的消息。清单 9. 设置默认错误消息
1
$(document).bind(
"mobileinit"
,
function
() {
2
$.mobile.pageLoadErrorMessage =
'Sorry, something went wrong. Please try again.'
;
3
});
您可以使用 jQuery Mobile API 扩展以下事件类型:
- 触摸事件
- 方向事件
- 滚动事件
触摸事件
在 jQuery Mobile 中有一些触摸事件是可定制的。然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时,您可以触发任何自定义 JavaScript 作为对五种不同的事件的响应tap
、taphold
、swipe
、swipeleft
和swiperight
。这些事件全都是不言而喻的,如 表 1 所示。
表 1. jQuery Mobile 的可定制触摸事件
tap
当快速点击屏幕时触发。taphold
当点击屏幕并继续接触屏幕大约一秒时触发。swipe
当 Web 页面被水平或垂直拖动时触发。该事件实际上是惟一与属性关联的事件。这些属性是 scrollSupressionThreshold
、durationThreshold
、 horizontalDistanceThreshold
和 verticalDistanceThreshold
。swipeleft
当 Web 页面被向左拖动时触发。swiperight
当 Web 页面被向右拖动时触发。要绑定到任意这些触摸事件,您需要使用 document.ready
事件。当文档就绪时,您可以访问一个元素并绑定您选择的触摸事件(见清单 10)。
清单 10. 绑定到触摸事件
01
<!DOCTYPE HTML>
02
<
html
>
03
<
head
>
04
<
title
>Understanding the jQuery Mobile API</
title
>
05
<
link
rel
=
"stylesheet"
href
=
"jquery.mobile.css"
/>
06
<
script
src
=
"jquery.js"
></
script
>
07
<
script
type
=
"text/javascript"
>
08
$(document).ready(function(){
09
$(".tap-hold-test").bind("taphold", function(event) {
10
$(this).html("Tapped and held");
11
});
12
});
13
</
script
>
14
<
script
src
=
"jquery.mobile.js"
></
script
>
15
</
head
>
16
17
<
body
>
18
<
div
data-role
=
"page"
id
=
"my-page"
>
19
<
div
data-role
=
"header"
>
20
<
h1
>Header</
h1
>
21
</
div
>
22
<
div
data-role
=
"content"
>
23
<
ul
data-role
=
"listview"
id
=
"my-list"
>
24
<
li
class
=
"tap-hold-test"
>Tap and hold test</
li
>
25
</
ul
>
26
</
div
>
27
</
div
>
28
</
body
>
29
</
html
>
taphold
触摸事件绑定到一个列表项。当文档就绪时,可通过 jQuery 定位该示例中的这个列表项。那么,它被定位并绑定到taphold
事件,该事件修改列表项内的 HTML。方向事件
在智能手机和平板设备上,只有一个名称为 orientationchange
的方向事件。该事件在设备被垂直或水平旋转时触发。要确定设备按哪个方向旋转,您可以访问方向属性,它提供一个只读值portrait
或 landscape
。绑定到 orientationchange
事件要求您定位body
元素,然后使用 bind
方法来绑定事件(见清单 11)。
清单 11. 将
orientationchange
事件绑定到body
元素1
$(document).ready(
function
(){
2
$(
'body'
).bind(
'orientationchange'
,
function
(event) {
3
alert(
'orientationchange: '
+ event.orientation);
4
});
5
});
body
元素可能在绑定时不可用。您也可以进一步增强该代码,当文档就绪时触发orientationchange
事件(见清单 12)。清单 12. 当文档就绪时触发
orientationchange
事件1
$(document).ready(
function
(){
2
$(
'body'
).bind(
'orientationchange'
,
function
(event) {
3
alert(
'orientationchange: '
+ event.orientation);
4
});
5
6
$(
'body'
).trigger(
'orientationchange'
);
7
});
滚动事件
jQuery Mobile 包括滚动事件,当用户滚动 Web 页面时触发。第一个事件是 scrollstart
事件,它在页面滚动开始时触发。清单 13 显示了如何能够绑定到该事件,并添加在页面滚动开始时运行的自定义 JavaScript 代码。
清单 13. 绑定到
scrollstart
事件1
$(document).ready(
function
(){
2
3
$(
'body'
).bind(
'scrollstart'
,
function
(event) {
4
// Add scroll start code here
5
});
6
7
});
scrollstop
的另一个事件,在页面滚动停止时应用。如清单 14 所示,绑定到 scrollstop
事件的方法就和scrollstart
绑定一样。清单 14. 绑定到
scrollstop
事件1
$(document).ready(
function
(){
2
3
$(
'body'
).bind(
'scrollstop'
,
function
(event) {
4
// Add scroll stop code here
5
});
6
7
});
body
元素存在,并可以被成功地绑定到事件。作为一个示例,在运行 JavaScript 代码时(页面滚动时显示在 Web 页面下方的选项),这两个事件很是有用的,被称为延迟加载,其中当 Web 页面初次加载时,不会加载图片。这使得页面加载时间较短,同时还提供了访问内容时相同的视觉吸引力。使用曝光的方法
通过使用 jQuery Mobile API 所提供的曝光方法,可以实现以下功能:
- 以编程方式修改页面
- 静默地加载页面
- 使用实用程序方法
以编程方式修改页面
jQuery Mobile 框架中有若干个曝光的方法,其中一个方法除了能够默认使用超链接和表单提交之外,还使您能够以编程方式修改页面。当您以编程方式修改页面时,会包括了从页面加载到页面转换时所发生的所有视觉效果。清单 15 显示了如何使用$.mobile
对象的 changePage
方法修改页面。
changePage
方法修改页面01
<!DOCTYPE HTML>
02
<
html
>
03
<
head
>
04
<
link
rel
=
"stylesheet"
href
=
"jquery.mobile.css"
/>
05
<
script
type
=
"text/javascript"
src
=
"jquery.js"
></
script
>
06
<
script
type
=
"text/javascript"
>
07
$("#my-page").live('pagecreate', function(event) {
08
$("#alt-link").bind("click", function(event) {
09
$.mobile.changePage("page-2.html");
10
});
11
});
12
</
script
>
13
<
script
type
=
"text/javascript"
src
=
"jquery.mobile.js"
></
script
>
14
</
head
>
15
16
<
body
>
17
18
<
div
data-role
=
"page"
id
=
"my-page"
>
19
<
div
data-role
=
"content"
>
20
<
ul
data-role
=
"listview"
id
=
"my-list"
></
ul
>
21
</
div
>
22
</
div
>
23
24
<
script
type
=
"text/javascript"
>
25
$('#my-list').append('<
li
><
a
href
=
"page-2.html"
>Link to another page</
a
></
li
>');
26
$('#my-list').append('<
li
><
a
href
=
"#"
id
=
"alt-link"
>Link to another
27
page programmatically</
a
></
li
>');
28
</
script
>
29
30
</
body
>
31
</
html
>
to
。该参数可以是一个字符串或对象。to
参数可以是绝对的或相对的 URL。对象参数必须是一个 jQuery 集合对象,换句话说,是被用作一个额外页面的内联元素。还有一些可选参数,您可以将其传递为一个对象:transition
reverse
changeHash
role
pageContainer
type
data
reloadPage
清单 15 没有使用任何可选参数。它只是传递了另一个 HTML 文件的名称。
要使用 changePage
方法,您需要做几件事。首先,您必须用 page
的一个 data-role
值创建一个div
元素,并添加一个 ID 给它。有了这个 ID 后,您需要添加 pagecreate
事件,而不是 jQuery 的document.ready
。现在您可以添加您们的 click 事件。jQuery Mobile 建议您绑定一个链接,而不是直接调用 click
事件。最后,您可以使用 changePage
方法修改页面。
静默地加载页面
另一个很棒的 $.mobile
对象方法是 loadPage
。您可以使用 loadPage
方法加载外部页面,而不需要显示它们。这是一种很有用的页面预加载方式,使页面可以在用户单击链接时更快速地显示出来。要使用这个方法,您需要编写与使用changePage
方法时类似的代码。首先,您需要一个 page
元素,该元素有一个 ID,您可以访问它,以绑定pagecreate
事件。然后,当 pagecreate
事件触发时,您可以调用 loadPage
事件(见清单 16)。
清单 16. 使用
loadPage
方法预加载页面01
<!DOCTYPE HTML>
02
<
html
>
03
<
head
>
04
<
link
rel
=
"stylesheet"
href
=
"jquery.mobile.css"
/>
05
<
script
type
=
"text/javascript"
src
=
"jquery.js"
></
script
>
06
<
script
type
=
"text/javascript"
>
07
$("#my-page").live('pagecreate', function(event) {
08
$.mobile.loadPage("page-2.html");
09
});
10
</
script
>
11
<
script
type
=
"text/javascript"
src
=
"jquery.mobile.js"
></
script
>
12
</
head
>
13
14
<
body
>
15
16
<
div
data-role
=
"page"
id
=
"my-page"
>
17
<
div
data-role
=
"content"
>
18
<
ul
data-role
=
"listview"
id
=
"my-list"
>
19
<
li
><
a
href
=
"page-2.html"
>Link to another page</
a
></
li
>
20
</
ul
>
21
</
div
>
22
</
div
>
23
24
</
body
>
25
</
html
>
loadPage
方法包括一个必需的 URL 参数,该参数可以是一个代表一个相对或绝对 URL 的字符串,您也可以传递一个对象。还有一个可选参数,可以接受拥有一个或多个以下属性的对象:role
pageContainer
type
data
reloadPage
loadMsgDelay
使用实用程序方法
当使用 jQuery Mobile 框架开发网站时,有大量内置的实用程序方法可以提供有用的功能(见表 2)。
表 2. jQuery Mobile 的当前内置实用程序方法
$.mobile.path.parseUrl
将一个 URL 解析成具有 16 个属性的对象$.mobile.path.makePathAbsolute
将相对文件或目录转换成绝对路径$.mobile.path.makeUrlAbsolute
将相对 URL 转换成绝对 URL$.mobile.path.isSameDomain
比较两个 URL$.mobile.path.isRelativeUrl
确定 URL 是否相对 URL$.mobile.path.isAbsoluteUrl
确定 URL 是否绝对 URL$.mobile.path.base
使用生成的基础元素结束语
jQuery Mobile 框架的使用很简单,但别让它的简单性愚弄您。幕后还发生了很多事情,并且有许多方法可以添加自定义功能,以提供强大的移动网站和应用程序。通过点击该 API,您可以告诉框架在默认情况下如何操作,通过使用曝光的方法加快页面加载,甚至绑定到客户端上发生的每一次交互。
- 使用 jQuery Mobile API 实现细粒度的自定义控制
- 细粒度 自定义注解 权限控制具体实现
- 细粒度 自定义注解 权限控制具体实现
- 自定义标签 + shiro 实现权限细粒度控制
- springAOP与自定义注解实现细粒度权限控制管理
- jQuery Mobile的API事件
- jQuery Mobile的API事件
- JAVAWEB开发之Servlet3.0新特性的使用以及注解的详细使用和自定义注解的方法、动态代理的使用、利用动态代理实现细粒度的权限控制以及类加载和泛型反射
- 基于PhoneGap+JQuery Mobile+ArcGISJavascript API实现
- 基于PhoneGap+JQuery Mobile+ArcGISJavascript API实现
- 使用jQuery Mobile实现通讯录
- 使用jQuery Mobile实现通讯录
- jquery mobile自定义图标实现方法
- 使用DBMS_FGA实现细粒度审计
- jQuery Mobile的API默认配置
- JQuery Mobile API提供的实用方法
- jQuery Mobile的简单使用
- jquery mobile radio的使用
- ctype.h里的函数(c语言)
- 新增页面测试分析
- linux命令查看指定文件指定第几行内容
- 为什么VC要创业公司不断融资 为什么会对创业公司造成破坏
- 关于Javascript的延迟执行
- 使用 jQuery Mobile API 实现细粒度的自定义控制
- 修改页面测试分析
- Shrink space合并表的碎片
- 先输入需要截取的位置的索引号(索引号必须成双成对)再以负数作为结束符,再输入需要截取的内容
- 存储过程的入门使用的总结
- 数据库学习之SQL语言基础
- Visual Assist X 版 破解方法
- the SD card.
- linux下查看某关键词前后几行内容