您的位置: 首页  >  文章  >  [转] jQuery Mobile 简介

[转] jQuery Mobile 简介

分类: 文章 • 2024-01-15 12:38:04


作者：C. Enrique Ortiz, 开发人员兼作家, About Mobility Weblog

来源：http://www.ibm.com/developerworks/cn/web/wa-jqmobile/index.html


简介

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 执行服务器通信、以及用于 web 页面的动画和图像效果。这个移动框架本身是独立于 jQuery 内核（缩小或压缩后大约 25KB）的一个额外下载（缩小或压缩后大约 12KB）。与 jQuery 框架的其余部分一样，jQuery Mobile 是一个免费的、双许可（MIT 和 GPL）库。

在本文撰写之时，jQuery Mobile 框架处于 Alpha 2 version (v1.0a2)。代码处于草案阶段，可能会更改。但是，现有的框架非常坚固。鉴于在 alpha 发布中就有一个令人印象深刻的组件集可用，jQuery Mobile 有望成为一个优秀的移动 web 应用程序开发框架和工具集。

jQuery Mobile 的基本特性包括：

一般简单性
此框架简单易用。页面开发主要使用标记，无需或仅需很少 JavaScript。
持续增强和优雅降级
尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScript，但并非所有移动设备都提供这样的支持。jQuery Mobile 的哲学是同时支持高端和低端设备，比如那些没有 JavaScript 支持的设备，尽量提供最好的体验。
Accessibility
jQuery Mobile 在设计时考虑了访问能力，它拥有 Accessible Rich Internet Applications (WAI-ARIA) 支持，以帮助使用辅助技术的残障人士访问 web 页面。
小规模
jQuery Mobile 框架的整体大小比较小，JavaScript 库 12KB，CSS 6KB，还包括一些图标。
主题设置
此框架还提供一个主题系统，允许您提供自己的应用程序样式。

用于 PhoneGap（使用 web 技术构建独立应用程序，参见参考资料）这样的工具包时，jQuery Mobile 框架有助于简化您的应用程序开发。

回页首

浏览器支持

我们在移动设备浏览器支持方面取得了长足的进步，但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 的持续增强和优雅降级支持发挥作用的地方。如前所述，jQuery Mobile 同时支持高端和低端设备，比如那些没有 JavaScript 支持的设备 。持续增强（Progressive Enhancement）包含以下核心原则（来源：Wikipedia）：

  • 所有浏览器都应该能够访问全部基础内容。
  • 所有浏览器都应该能够访问全部基础功能。
  • 增强的布局由外部链接的 CSS 提供。
  • 增强的行为由外部链接的 JavaScript 提供。
  • 终端用户浏览器偏好应受到尊重。

所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。

jQuery Mobile 目前支持以下移动平台：

  • Apple® iOS：iPhone、iPod Touch、iPad（所有版本）
  • Android™：所有设备（所有版本）
  • Blackberry® Torch（版本 6）
  • Palm™ WebOS Pre、Pixi
  • Nokia® N900（进程中）

查看 jQuery Mobile 站点上的支持浏览器列表了解更多信息（参见参考资料）。

回页首

UI 组件小结

jQuery Mobile 向不同种类的 UI 元素提供健壮的支持。图 1 显示了目前支持的 UI 组件的一个小结。


图 1. jQuery Mobile UI 元素（至 2010 年 8 月）
[转] jQuery Mobile 简介

工具栏、按钮、列表视图、选项卡、弹出菜单、对话框、进度、编辑面板和表单元素均受到支持。您的移动 web 应用程序需要的大部分（如果不是全部的话）UI 元素都已提供。

回页首

$.mobile与受支持的方法和事件

JavaScript 对象jQuery还被引用为$。jQuery Mobile 框架使用一些移动插件（包括mobile或$.mobile）扩展 jQuery 内核，这些插件定义几个事件和方法。表 1 列示了一些由$.mobile公开的方法。


表 1. 由$.mobile公开的方法
方法 用途
$.mobile.changePage 以编程方式从一个页面切换到另一个页面。

例如，要使用一个幻灯片过渡切换到页面 weblog.php，使用$.mobile.changePage("weblog.php", "slide")。
$.mobile.pageLoading 显示或隐藏页面加载消息。

例如，要隐藏消息，使用$.mobile.pageLoading(true)。
$.mobile.silentScroll 滚动到一个特殊的 Y 位置，不生成滚动事件。

例如，要滚动到 Y 位置 100，使用$.mobile.silentScroll(100)。
$.mobile.addResolutionBreakpoints jQuery Mobile 已经为min/max类定义了一些断点。调用这个方法来增加断点。

例如，要为 800 像素宽度添加min/max类，使用$.mobile.addResolutionBreakpoints(800)。
$.mobile.activePage 引用当前活动页面。

您可以使用bind()或live()方法绑定几个事件，比如 jQuery Mobile 初始化、触摸事件、方向更改、滚动事件、页面显示/隐藏事件、页面初始化事件、以及动画事件。

例如，触摸事件包括tap、taphold和各种滑指（swipe）事件。滚动事件包括scrollstart和scrollstop。页面事件允许接收通知：页面创建之前，页面创建时，页面显示或隐藏之前，以及页面显示或隐藏之时。

清单 1 展示了 jQuery Mobile 开始执行时绑定一个特定事件的示例。


清单 1. 绑定到mobileinit事件
				
$(document).bind("mobileinit", function(){
  //apply overrides here
});

上面的事件允许您在 jQuery Mobile 启动时覆盖默认值。可以覆盖几个设置，比如：

  • LoadingMessage— 设置页面加载时显示的默认文本。
  • defaultTransition— 设置使用 Ajax 的页面更换的默认过渡。

可以根据需要覆盖更多配置参数。参阅 jQuery Mobile 文档（参见参考资料）或源代码（参见下载）了解更多信息。

您还可以绑定到其他事件，那些事件允许您基于touch和page事件创建动态应用程序。

回页首

HTML5data-*属性

jQuery Mobile 依赖 HTML5data-*属性来支持各种 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">Button</a>
已编组按钮 <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">Hell Yeah</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">Bar</a>
</div>
表单元素（选择菜单） <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>
基本列表视图 <ul data-role="listview">
<li><a href="index.html">One</a></li>
<li><a href="index.html">Two</a></li>
<li><a href="index.html">Three</a></li>
</ul>
对话框 <a href="foo.html" data-rel="dialog">Open dialog</a>
<a href="dialog.html" data-role="button" data-inline="true"
data-rel="dialog" data-transition="pop">Open dialog</a>
过渡 <a href="index.html" data-transition="pop" data-back="true">

jQuery Mobile 文档包含受支持的data-*语法的完整列表。

回页首

jQuery Mobile 页面结构

本节讨论 jQuery Mobile 页面的一般结构。jQuery Mobile 拥有一些页面结构指南。通常，一个页面结构应该拥有以下部分：

页面栏
通常包含页面标题和 Back 按钮
内容
您的应用程序的内容
页脚栏
通常包含导航元素、版权信息、以及需要添加到页脚的任何内容

图 2 展示了这些不同的部分的示例。


图 2. 一个 jQuery Mobile web 应用程序的一般结构
[转] jQuery Mobile 简介

页眉和页脚工具栏支持固定和全屏定位选项。固定位置使工具栏在滚动时保持静态。全屏定位与固定定位基本相同，只是工具栏仅在单击页面时才显示（以便提供一个不刺眼的全屏体验）。本节余下部分将探索一个通用页面结构的 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="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script src="http://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 定义了一个页面。id属性仅当多个本地页面块位于同一个 HTML 文件文档上时才需要，这是定义惟一 ID 的一个最佳实践。

下面两个代码清单将展示如何定义页面不同的页眉、内容、以及页脚部分。页眉栏通常包含页面标题和 Back 按钮，如清单 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 简介

回页首

定义多个本地页面

前面的示例只涉及一个页面。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。

  • 通过编程方式，使用$.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="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script src="http://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. 一个简单的列表视图
[转] jQuery Mobile 简介

回页首

表单

表单是另一个常用的 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 简介

选择选择菜单时，jQuery Mobile 在图像（图 5 中的右边）上显示一个带有所有选项值的弹出菜单，这个弹出菜单将在选择完成后自动关闭。只要表单的action和method属性适当定义，jQuery Mobile 就能负责表单、Ajax 调用和结果页面之间的过渡，并在必要时显示一个转盘。

回页首

其他 UI 组件

jQuery Mobile 网站和文档中还有更多 UI 元素和元素变体（参见参考资料）值得您探索。为补充本文的内容，建议您查看以下内容：可折叠内容、布局网格、主题设置、以及列表视图和表单的剩余部分。

回页首

结束语

本文介绍了可扩展 jQuery Mobile JavaScript 框架。您了解了这个框架的基础知识，以及如何编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。如果您需要操作 HTML 文档，可以使用 jQuery 内核进行操作。您探索了基本页面和导航、工具栏、表单控件和过渡效果。jQuery Mobile 提供了大量可以以编程方式处理的方法、事件和属性，但愿这能激励您去探索本文没有涵盖的 UI 组件的更多信息。


回页首

下载

描述 名字 大小 下载方法
本文源代码 jquerymobileexamplecode.zip 3KB HTTP

关于下载方法的信息


参考资料

学习


相关推荐