jquery mobile_jQuery Mobile简介

最新推荐文章于 2024-04-10 02:02:02 发布

cuyi7076

最新推荐文章于 2024-04-10 02:02:02 发布

阅读量2.9k

点赞数 1

文章标签： html javascript java css web ViewUI

原文链接：https://www.ibm.com/developerworks/web/library/wa-jqmobile/index.html

版权

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中，但仍有一些演示和文档。建议您查看的文档和演示相关信息，并期待在演示源代码下载部分。

在撰写本文时，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月）

描绘jQuery Mobile UI元素的页面（截至2010年8月），包括按钮，工具栏，列表视图等。

支持工具栏，按钮，列表视图，选项卡，弹出菜单，对话框，过渡，编辑面板和表单元素。提供了大多数（如果不是全部）移动Web应用程序所需的UI元素。

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

JavaScript对象jQuery也称为$ 。 jQuery Mobile框架通过移动插件扩展了jQuery核心，其中包括mobile或$.mobile ，它定义了多个事件和方法。 $.mobile公开的一些方法如下所述。

表1. `$.mobile`公开的方法

方法	用法
`$.mobile.changePage`	以编程方式从一页切换到另一页。例如，要使用幻灯片过渡到weblog.php页面，请使用`$.mobile.changePage("weblog.php", "slide")` 。
`$.mobile.pageLoading`	显示或隐藏页面加载消息。例如，要隐藏消息，请使用`$.mobile.pageLoading(true).`
`$.mobile.silentScroll`	滚动到特定的Y位置而不生成滚动事件。例如，要滚动到Y位置50，请使用`$.mobile.silentScroll(100)` 。
`$.mobile.addResolutionBreakpoints`	jQuery Mobile已经为`min/max`类定义了一些断点。调用此方法添加断点。例如，要添加800个像素宽度的`min/max`类，请使用`$.mobile.addResolutionBreakpoints(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.带导航栏的页脚

与图2相同的图像，但是页脚现在是带有以下按钮的导航栏：今天，明天，星期，无日期。

定义多个本地页面

前面的示例仅覆盖一页。 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.一个简单的列表视图

一个简单的列表视图，显示了Facebook朋友，并带有“获取朋友”，“张贴到墙上”和“发送消息”选项。

形式

表单是另一个用于将信息发布到服务器的常见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