使用jQuery Mobile API实现细粒度的自定义控制

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 事件

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="custom-jqm-mobileinit.js"></script><script type="text/javascript" src="jquery.mobile.js"></script>

要扩展 mobileinit 事件,您首先需要将它与一个自定义函数进行绑定。清单 2 显示了一个示例,使用 bind 方法扩展 mobileinit 事件。

清单 2. 绑定到 mobileinit 事件

$(document).bind("mobileinit",
function() { // Override global options here});

当您成功绑定到 mobileinit 事件后,您就可以覆盖全局选项。要覆盖全局选项,您可以使用 jQuery 的 extend 方法来扩展 $.mobile 对象(见清单 3),也可以简单地通过直接设置每个属性来覆盖它们。

清单 3. 扩展 $.mobile 对象

$(document).bind("mobileinit", function() { $.extend( $.mobile , { property = value });});

如果有多个您想更新的属性,extend 方法是一个更清晰的选项,因为您不需要多次写入 $.mobile 对象。然而,如果您只想更新一个属性,只需很少的代码行就可以设置每个属性(见清单 4)。

清单 4. 覆盖每个属性值

$(document).bind("mobileinit", function() { $.mobile.property = value;});

$.mobile 对象是设置所有属性的起始点。

时间: 2024-10-26 20:48:50

使用jQuery Mobile API实现细粒度的自定义控制的相关文章

《jQuery Mobile快速入门》—— 导读

前言 jQuery Mobile快速入门 当前,企业和个人用于开发和发布移动应用程序所使用的技术正在发生变化,而我们则是见证者.最初,开发和发布移动程序的策略是针对每一个主流平台开发独立的本地app.然而,开发团队迅速意识到,维护多个平台所需的花费是不可忍受的,而且移动团队也会丧失其敏捷性.在将来,移动开发团队只需一次编码,就可以将app部署到所有设备上,这样的开发团队会更具竞争性,而jQuery Mobile可以帮助你实现这一目标. jQuery Mobile是一个框架,用于交付具有统一界面的

《jQuery Mobile快速入门》—— 2.2 多页面模板

2.2 多页面模板 jQuery Mobile快速入门 jQuery Mobile支持在一个HTML文档中嵌入多个页面的能力,如程序清单2-3所示.该策略可以用来预先获取最前面的多个页面,当载入子页面时,其响应时间会缩短.在下面的例子中可以看到,多页面文档与我们前面看到的单页面文档相同,第二个页面附加在第一个页面后面的情况除外.多页面的具体细节在程序清单2-3中有突出显示,并会在下面进行讲解. 1.多页面文档中的每一个页面必须包含一个唯一的id.每个页面可以有一个page或dialog的data

[转载] jQuery Mobile 开发 Web App 系列文章目录

首先是jquery mobile api 的中文站点:http://www.jqmapi.com/  然后下面是网上找的一个很好的教程系列文章,转载如下 -------------------------------------------------------------------------------------------------------------------------------- "使用 jQuery Mobile 与 HTML5 开发 Web App"系列

jQuery Mobile教程:dialog组件close的api

文章简介:本文主要看一下jQuery Mobile体系中的dialog组件. 本文主要看一下jQuery Mobile体系中的dialog组件: 它开放了一个close的api 1.如何关闭dialog? 示例: //关闭dialog $("#close-dialog-btn").click(function(){ $("#alert-dialog").dialog("close"); }); 源码: //#4114 close:function

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.8 技巧:指定自定义的过渡动画

9.8 技巧:指定自定义的过渡动画 假使需要不同的动画,而不是在前面的示例中提供的默认动画集,你可以引进自定义的动画.你可以使用CSS3变换(CSS3 transition)来创建平滑的硬件加速动画,包含2D和3D. 代码清单9-9提供了一个示例动画:打开新页面时旋转页面. 代码清单9-9 使用自定义CSS3变换来切换页面 00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Custom Transition&l

jQuery Mobile 自定义标签

最近在规划产品国际化的需求,涉及到PC Web,移动Web,和各app.设计了多个版本的移动Web均不理想.由于移动Web采用了jQuery Mobile框架,所以将切换语言放在哪个位置更合理进行了讨论.讨论的过程和多个方案我就不提了,先来看看最终效果: 是不是感觉很经验,这里一开始尝试了多次,最终自定义了一个下拉选项,代码如下: <!DOCTYPE html> <html> <head> <title>涛哥</title> <meta n

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"

详解jQuery Mobile自定义标签_jquery

本文实例讲解了jQuery Mobile自定义标签,分享给大家供大家参考,具体内容如下 规划产品国际化的需求时,涉及到PC Web,移动Web,和各app.设计了多个版本的移动Web均不理想. 由于移动Web采用了jQuery Mobile框架,所以将切换语言放在哪个位置更合理进行了讨论.讨论的过程和多个方案我就不提了,先来看看最终效果:   是不是感觉很经验,这里一开始尝试了多次,最终自定义了一个下拉选项,代码如下: <!DOCTYPE html> <html> <head

jquery mobile 实现自定义confirm确认框效果的简单实例_jquery

类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js if(confirm('确定删除吗?')) { //执行代码 } 这种效果比较丑,使用jquery mobile优化一下 需要引用的文件: <script src="~/Scripts/jquery-1.10.2.min.js"></script> <link href="~/Scripts/Mobile/jquery.mobile-1.4.0.mi