`
hugang357
  • 浏览: 190462 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

jquery mobile

 
阅读更多

 简介： 

        jQuery Mobile 框架是创建移动网站的一种快速简便方法。然而，您可能不知道该框架有一个很好的 API，您可以用它来扩展基本功能。本文概述了在该 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 对象是设置所有属性的起始点。

创建自定义名称空间

您可以通过名称空间自定义 HTML5 data- 属性，如 data-role。名称空间允许您添加一个自定义名称，例如，它将出现在 data-role 属性的 data- 和 -role 部分之间。允许您自定义的名称空间的 $.mobile 属性是 ns。清单 5 显示了一个使用 ns 属性设置自定义名称空间的示例。


清单 5. 创建自定义名称空间

              

$(document).bind("mobileinit", function() {

  $.mobile.ns = "my-custom-ns";

});

 

 

在清单 5 中使用的自定义名称空间生成 data-my-custom-ns-role 而不是 data-role，这使您可以通过 CSS 选择器定位这些名称空间。通过 CSS 选择器定位自定义名称空间提供了另一种方式来为使用那些名称空间的移动小部件设计自定义主题。

页面初始化

jQuery Mobile 包括一个名称为 autoInitializePage 的属性，它确定 Web 页面是否应该被初始化。默认情况下，该属性值被设置为 true，因此当文档就绪时，页面总是被初始化。然而，通过扩展 $.mobile 对象，您可以将该属性设置为 false，并在稍后再处理页面初始化。清单 6 显示了一个如何能够在其他脚本运行时暂时延迟页面初始化的示例。如果在 Web 页面上有大量客户端 JavaScript 在运行，将初始化延迟至 DOM 完成加载可能是一个好主意，这样客户端 JavaScript 就会有机会运行。


清单 6. 为移动 Web 页面设置自动初始化

              

<!DOCTYPE HTML>

<html>

<head>

  <title>Understanding the jQuery Mobile API</title>

  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript">

    $(document).bind("mobileinit", function() {

      $.mobile.autoInitializePage = false;

    });

  </script>

  <script type="text/javascript" src="jquery.mobile.js"></script>

</head>

 

<body>

 

  <div data-role="page">

    <div data-role="content">

      <ul data-role="listview" id="my-list"></ul>

    </div>

  </div>

 

  <script type="text/javascript">

    $('#my-list').html('<li><a href="page-2.html">Link to another page</a></li>');

    $.mobile.autoInitializePage = true;

  </script>

 

</body>

</html>

 

 

自定义子页面的 URL 键

当引用子页面时，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. 设置默认页面和对话转换

              

$(document).bind("mobileinit", function() {

  $.mobile.defaultPageTransition = "fade";

  $.mobile.defaultDialogTransition = "fade";

});

 

 

在该示例中，页面和对话的转换都是淡化效果。该框架包括六种基于 CSS 的转换效果： slide、slideup、slidedown、pop、fade 和 flip。您也可以通过包括 data-transition 属性，将这些效果直接应用到超链接上。

自定义加载和错误消息

该框架控制的其他两种选项，分别是加载和错误消息。加载消息默认显示 loading 字符串值。要更新该属性，您只需定位 loadingMessage 属性。在清单 8 中，我将默认加载信息从 loading 修改为 Please wait。结果，当使用 Ajax 加载页面时，一个小对话框出现，其中显示了我的自定义加载消息。


清单 8. 设置默认加载消息

              

$(document).bind("mobileinit", function() {

  $.mobile.loadingMessage = "Please wait";

});

 

 

pageLoadErrorMessage 的默认值是 Error Loading Page。我将更新该消息，将它修改为清单 9 中更加用户友好的消息。


清单 9. 设置默认错误消息

              

$(document).bind("mobileinit", function() {

  $.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';

});

 

 

回页首

钩住 jQuery Mobile 事件

您可以使用 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. 绑定到触摸事件

              

<!DOCTYPE HTML>

<html>

<head>

  <title>Understanding the jQuery Mobile API</title>

  <link rel="stylesheet" href="jquery.mobile.css" />

  <script src="jquery.js"></script>

  <script type="text/javascript">

    $(document).ready(function(){

      $(".tap-hold-test").bind("taphold", function(event) {

        $(this).html("Tapped and held");

      });  

    });

  </script>

  <script src="jquery.mobile.js"></script>

</head>

 

<body>

  <div data-role="page" id="my-page">

    <div data-role="header">

            <h1>Header</h1>

        </div>

        <div data-role="content">

            <ul data-role="listview" id="my-list">

                <li class="tap-hold-test">Tap and hold test</li>

            </ul>

    </div>

  </div>

</body>

</html>

 

 

如您所见，代码将 taphold 触摸事件绑定到一个列表项。当文档就绪时，可通过 jQuery 定位该示例中的这个列表项。那么，它被定位并绑定到 taphold 事件，该事件修改列表项内的 HTML。

方向事件

在智能手机和平板设备上，只有一个名称为 orientationchange 的方向事件。该事件在设备被垂直或水平旋转时触发。要确定设备按哪个方向旋转，您可以访问方向属性，它提供一个只读值 portrait 或 landscape。绑定到 orientationchange 事件要求您定位 body 元素，然后使用 bind 方法来绑定事件（见清单 11）。


清单 11. 将 orientationchange 事件绑定到 body 元素

              

$(document).ready(function(){

  $('body').bind('orientationchange', function(event) {

    alert('orientationchange: '+ event.orientation);

  });

});

 

 

在文档就绪后绑定事件，这也很重要。否则，您会获得不一致的结果，因为 body 元素可能在绑定时不可用。您也可以进一步增强该代码，当文档就绪时触发 orientationchange 事件（见清单 12）。


清单 12. 当文档就绪时触发 orientationchange 事件

              

$(document).ready(function(){

  $('body').bind('orientationchange', function(event) {

    alert('orientationchange: '+ event.orientation);

  });

 

  $('body').trigger('orientationchange');

});

 

 

当文档就绪时触发事件，这使您可以确定 Web 页面初始加载时的方向。当您需要根据在用设备的当前方向显示内容时，这特别有用。您也可以通过 CSS 访问方向值，因为它们被添加到 Web 页面中的 HTML 元素。这些强大的特性使您可以根据设备的方向修改内容布局。

滚动事件

jQuery Mobile 包括滚动事件，当用户滚动 Web 页面时触发。第一个事件是 scrollstart 事件，它在页面滚动开始时触发。清单 13 显示了如何能够绑定到该事件，并添加在页面滚动开始时运行的自定义 JavaScript 代码。


清单 13. 绑定到 scrollstart 事件

              

$(document).ready(function(){

 

  $('body').bind('scrollstart', function(event) {

    // Add scroll start code here

  });

 

});

 

 

名称为 scrollstop 的另一个事件，在页面滚动停止时应用。如清单 14 所示，绑定到 scrollstop 事件的方法就和 scrollstart 绑定一样。


清单 14. 绑定到 scrollstop 事件

              

$(document).ready(function(){

 

  $('body').bind('scrollstop', function(event) {

    // Add scroll stop code here

  });

 

});

 

 

绑定到这两个事件都必须在文档正式就绪时完成。这保证了 body 元素存在，并可以被成功地绑定到事件。作为一个示例，在运行 JavaScript 代码时（页面滚动时显示在 Web 页面下方的选项），这两个事件很是有用的，被称为延迟加载，其中当 Web 页面初次加载时，不会加载图片。这使得页面加载时间较短，同时还提供了访问内容时相同的视觉吸引力。

回页首

使用曝光的方法

通过使用 jQuery Mobile API 所提供的曝光方法，可以实现以下功能：

· 以编程方式修改页面

· 静默地加载页面

· 使用实用程序方法

以编程方式修改页面

jQuery Mobile 框架中有若干个曝光的方法，其中一个方法除了能够默认使用超链接和表单提交之外，还使您能够以编程方式修改页面。当您以编程方式修改页面时，会包括了从页面加载到页面转换时所发生的所有视觉效果。清单 15 显示了如何使用 $.mobile 对象的 changePage 方法修改页面。


清单 15. 使用 changePage 方法修改页面

              

<!DOCTYPE HTML>

<html>

<head>

  <link rel="stylesheet" href="jquery.mobile.css" />

  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript">

    $("#my-page").live('pagecreate', function(event) {

        $("#alt-link").bind("click", function(event) {

            $.mobile.changePage("page-2.html");

        });

    });

  </script>

  <script type="text/javascript" src="jquery.mobile.js"></script>

</head>

 

<body>

 

  <div data-role="page" id="my-page">

    <div data-role="content">

      <ul data-role="listview" id="my-list"></ul>

    </div>

  </div>

 

  <script type="text/javascript">

    $('#my-list').append('<li><a href="page-2.html">Link to another page</a></li>');

    $('#my-list').append('<li><a href="#" id="alt-link">Link to another 

    page programmatically</a></li>');

  </script>

 

</body>

</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 方法预加载页面

              

<!DOCTYPE HTML>

<html>

<head>

    <link rel="stylesheet" href="jquery.mobile.css" />

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $("#my-page").live('pagecreate', function(event) {

            $.mobile.loadPage("page-2.html");

        });

    </script>

   <script type="text/javascript" src="jquery.mobile.js"></script>

</head>

 

<body>

 

    <div data-role="page" id="my-page">

        <div data-role="content">

            <ul data-role="listview" id="my-list">

        <li><a href="page-2.html">Link to another page</a></li>

    </ul>

        </div>

    </div>

 

</body>

</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，您可以告诉框架在默认情况下如何操作，通过使用曝光的方法加快页面加载，甚至绑定到客户端上发生的每一次交互。

 

<!--EndFragment-->

分享到：
| freemarker文档学习
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery Mobile 所需要的部署文件

    jQuery Mobile 是一个轻量级的、基于 jQuery 库的框架，专为移动设备上的网页应用设计，它提供了丰富的用户界面（UI）组件和交互效果，让开发者能够快速构建响应式和触控友好的Web应用程序。这个资源包以“Hello ...

    jQuery mobile相册的一种样式

    在IT行业中，jQuery Mobile是一种广泛使用的前端框架，它专门用于构建响应式和触屏友好的移动Web应用。jQuery Mobile提供了一系列的UI组件和交互效果，其中包括我们今天要讨论的主题——相册样式。在这个主题下，...

    Jquery mobile 从设计到开发

    jQuery Mobile 是一个广泛使用的框架，特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐，是因为它可以将现有的网页转换成触摸...

    jQueryMobile-HTML5模板

    1. **统一的触控体验**：jQuery Mobile提供了一套跨平台的触控事件处理机制，确保在各种设备上的滑动、点击等操作有统一的反馈。 2. **自动页面导航**：通过数据-URL（data-url）属性和页面容器，jQuery Mobile可以...

    jquerymobile设计完整例子

    **jQuery Mobile 设计详解** jQuery Mobile 是一个轻量级、响应式的前端框架，专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程，提供了丰富的组件和交互效果，使得开发者可以快速构建...

    jQuery Mobile快速入门.pdf

    ### jQuery Mobile 快速入门知识点概述 #### 一、jQuery Mobile 概述 - **定义与背景**：jQuery Mobile 是一款流行的开源 JavaScript 库，它主要用于构建响应式的 Web 应用程序，支持触摸操作，兼容多种移动设备。...

    jQuery mobile滑动式的标题导航

    jQuery Mobile 是一个轻量级、触控优化的前端框架，专为移动设备设计，它提供了一整套构建移动Web应用程序的组件。在这个“jQuery mobile滑动式的标题导航”主题中，我们将深入探讨如何利用jQuery Mobile创建动态且...

    jquery mobile datepicker 手机端日期选择器

    《jQuery Mobile Datepicker：手机端日期选择器深度解析》 在移动应用开发中，日期选择器是一个不可或缺的组件，它提供了用户友好的界面，让用户能够方便地选择日期。jQuery Mobile Datepicker 是一个专为手机端...

    jQuery mobile相册

    jQuery Mobile相册是一种基于jQuery Mobile框架的移动应用组件，它为用户提供了一种优雅的方式来展示和浏览图片集，尤其适用于移动设备。jQuery Mobile是jQuery库的一个分支，专为触摸设备优化，提供了一套完整的UI...

    jquery mobile官方git资源

    《jQuery Mobile官方Git资源详解》 在Web开发领域，jQuery Mobile是一个非常重要的框架，它为构建响应式、触摸友好的移动应用提供了强大的工具。本文将深入解析“jquery mobile官方git资源”，并围绕其中的关键知识...

    jquery mobile 1.4.1版

    《jQuery Mobile 1.4.1版：移动开发的核心组件》 jQuery Mobile 是一个功能强大的前端框架，专门针对移动设备的网页开发而设计。在1.4.1版本中，它提供了一系列优化的CSS和JavaScript文件，使得开发者能够快速、...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称：jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介：《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库，从...

    jQuery Mobile参考手册

    1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上，如果您了解 jQuery，您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 ...

    jquery mobile手机端MVC模式C#

    **jQuery Mobile 手机端 MVC 模式与 C# 结合详解** 在移动应用开发领域，jQuery Mobile 和 C# MVC 模式结合提供了一种高效、便捷的开发方式，尤其适用于初学者。jQuery Mobile 是一个强大的框架，专为触摸设备优化...

    jQuery Mobile快速入门完整版.pdf + 所有源码

    作为jQuery Mobile的入门级读物，《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性，内容系统全面，便于理解。 《jQuery Mobile快速入门》总共分为10章，内容包括jQuery Mobile的基础...

    Jquery Mobile 帮助手册

    jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

    jQuery Mobile实战源码

    《jQuery Mobile实战》源码分析 jQuery Mobile 是一个流行的前端框架，专为移动设备设计，旨在简化移动Web应用的开发。这个源码包提供了一手的学习资料，让我们深入理解jQuery Mobile的工作原理及其在实际项目中的...

    jQuery mobile图片截图

    jQuery Mobile 是一个轻量级、触控优化的 JavaScript 框架，专为移动设备上的 Web 应用程序设计。它构建在 jQuery 和 jQuery UI 的基础之上，提供了一套完整的组件和接口，用于创建响应式、触摸友好的移动界面。在 ...

    HTML5+JQuery Mobile 移动端WebApp案例

    JQuery Mobile则是一个轻量级的JavaScript库，专门针对移动设备设计，它简化了触摸事件处理、页面导航和界面设计。主要特点包括： 1. **触控优化**：JQuery Mobile的UI组件都经过优化，确保在触摸屏设备上的表现...

    JqueryMobile课件源码

    **jQuery Mobile 知识点详解** jQuery Mobile 是一个专为移动设备设计的前端框架，它提供了丰富的 UI 组件和交互效果，使得开发者可以快速构建功能丰富、具有良好用户体验的跨平台移动 Web 应用。本课件源码将帮助...

Magicbox
Global site tag (gtag.js) - Google Analytics