jQuery mobile入门

时间 2019-11-18

原文原文链接

jQuery Mobile入门

简介：jQuery Mobile框架能够轻松的帮助咱们实现很是好看的、可跨设备的Web应用程序。咱们将后续的介绍中向你们介绍大量的代码及实例。javascript

jQuery一直以来都是很是流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。css

jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了必定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架能够节省大量的js代码开发时间，尽管目前的版本仍是不是一个稳定的版本。但它的应用效果已经备受瞩目。html

接下来咱们将经过实例向你们展现jQuery Mobile的特性及好处，让咱们看一下这个新框架是怎么帮助你在短期内创建起一个高质量的移动应用程序,接下来的代码讲解中的代码最好使用的移动设备平台是IPhone或Android。或者是PC电脑上使用 Safari浏览器调试。java

jQuery Msobile 都能作什么?

一、jQuery Mobile为开发移动应用程序提供了很是简单的用户接口jquery

二、这种接口的配置是标签驱动的，这意味着咱们能够在HTML中创建大量的程序接口而不不须要写一行js代码android

三、提供了一些自定义的事件用来探测移动和触摸动做。例如tap(敲击)、tap-and-hold（点击并按住）、swipe、orientation change浏览器

四、使用一些增强的功能时须要参照一下设备浏览器支持列表缓存

五、使用预设主题能够轻松定制应用程序外观服务器

jQuery Mobile 基本页面结构

大部分jQuery Mobile Web应用程序都要遵循下面的基本模板app

<!DOCTYPE html><html><head><title>jQuery Mobile基本页面结构</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/><script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script></head><body><div data-role="page" id="home"><div data-role="header"><h1>Header</h1></div><div data-role="content"><p>Content goes here</p></div><div data-role="footer"><h4>Footer</h4></div></div></body></html>

在android模拟器中显示效果以下：

代码说明

要使用 jQuery Mobile，首先须要在开发的界面中包含以下3个内容

CSS文件jquery.mobile-1.0a1.min.css
jQuery library jquery-1.4.3.min.js
jQuery Mobile library jquery.mobile-1.0a1.min.js

在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也能够下载这些文件及主题到你的服务器上。

咱们能够看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。这样jQuery Mobile就会知道哪些内容须要处理。

说明：data-属性是HTML5新推出的颇有趣的一个特性，它可让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。

在”page”div中，还能够包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。

div dat-role=”header”></div>

在页面的顶部创建导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。经过添加额外的属性

data-position=”fixed”，能够保证头部始终保持屏幕的顶部

包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等

在页面的底创建工具栏，添加一些功能按钮

为了确保它始终保持在页面的底部，能够给其加上data-position=”fixed” 属性

多个页面在同一个页面中

有一种创建在一个 HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅获得一个页面，就能够实现页面平滑切换的客户体验。参看下面实例：(目前有bug)

<!DOCTYPE html><html><head><title>jQuery Mobile: Pages within Pages</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script></head><body><div data-role="page" id="home"><div data-role="header"><h1>Home</h1></div><div data-role="content"><p><a href="#about">About this app</a></p></div></div><div data-role="page" id="about"><div data-role="header"><h1>About This App</h1></div><div data-role="content"><p>This app rocks!<a href="#home">Go home</a></p></div></div></body></html>

正如所见，上面的代码中包含了两个”page”:主页（id为home）和”about”(id为about)。从 Home连接到About页面采用的是链接地址为#about，about页面返回到首页的连接地址为#home。jQuery Mobile会自动切换连接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div之外的其它”page”

AJAX 导航

为了实如今移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的连接页面。所以，当在浏览器中点击一个连接打一个新的页面时，jQuery Mobile接收这个连接，经过AJAX的方式请求连接页面，并把请求获得的内容注入到当前页面的DOM里。另外还须要确保请求的页面url惟一标识的。

这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好不少。当一个新的页面作为新的data-role=”page” div插入到主页面时，主页面会有效的缓存取到的内容。使得当要访问一个页面时可以尽快的显示出来。这个工做过程听起来难以置信的复杂，可是作为开发人员的咱们大部份不须要了解其中工做的具体细节。只要能看到效果就OK。

注意:若是你不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个连接页面，只须要在打开的连接上添加属性 rel=”external”属性

页面切换效果

你可使用多种不一样的切换效果来显示新页面内容，只须要在连接里添加data-transition属性便可。可能的值以下

slide	从右到左切换（默认）
slideup	从下到上切换
slidedown	从上到下切换
pop	以弹出的形式打开一个页面
fade	渐变退色的方式切换
flip	旧页面翻转飞出，新页面飞入

例如 <p><a href=”#about” data-transition=”flip”>关于页面</a></p>

在浏览器中查看效果

注意：查看以上的效果须要您的浏览器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。

对话框

经过在连接中添加data-rel=”dialog”的属性，可使连接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择

例如咱们将about的连接变成一个对话框并加入相应的切换效果。代码以下

<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>

注意：目前的测试版本存在问题，当在一个页面中写多个”page”时在以dialog的方式打开一个页面时，不会出现对话框效果

按钮

按钮是触摸式应用程序的一部分，它们扮演连接的功能，由于它们提供了更大的目标，当你点击连接的时候（比较适合，手指比较胖的人群）

在jQuery Mobile中把一个连接变成button的效果，只须要在标签中添加data-role=”button属性便可”。例如：

<div data-role="content"><p><a href="#about" data-role="button">About this app</a></p></div> ... <div data-role="content"><p>This app rocks!</p><a href="#home" data-role="button">Go home</a></div>

另外jQuery Mobile也会自动的转换像表单元素中的submit，reset，button，或image为按钮样式。

还能够利用data-icon属性创建各式各样的按钮，创建行内按钮和按钮组（水平或垂直的）

格式化文本

为了使其尽量的灵活，jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。

有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块

布局表格：组织内容以列的形式显示，有两列表格，和三列表格
可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展示出来

下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展示的内容隐藏。

<!DOCTYPE html><html><head><title>Collapsible Content Demo</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script></head><body><div data-role="page" id="home"><div data-role="header"><h1>Home</h1></div><div data-role="content"><div data-role="collapsible" data-state="collapsed"><h3>About this app</h3><p>This app rocks!</p></div></div></div></body></html>

触摸选择的表单元素

jQuery Mobile会自动替换标准的HTML表单元素，例如文本框，复选框，列表框。以这种自定义的样式工做在触摸设备上的表单元素，易用性更强。

例如，复选框将会变得很大，易于点选。点击下拉列表时，将会弹出一组大按钮列表选项，提供给用户选择。

该框架支持新的HTML5元素，例如search和range。另外你能够利用列表框并添加data-role=”slider”并添加两个option选项，建立不错的”打开/关闭”开关，

另一个不错的特色是组合单选框和组合复选框，能够利用fieldset元素添加属性data-role=”controlgroup”来建立一组单选按钮或复选框，jQuery Mobile自动格式化他们的格式。使它们看上去更fashion!

通常来讲，开发者不须要关心表单的那些高级特性，开发者仅须要以正常的方式建立你的表单，jQuery Mobile框架会帮你完成剩余的工做。另外有一件事情须要开发人员来完成，即便用div或fieldset 属性data-role=”fieldcontain”包装每个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可使其更容易查找。

下面是一个jQuery Mobile版的表单元素

<!DOCTYPE html><html><head><title>jQuery Mobile Form Demo</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script></head><body><div data-role="page" id="home"><div data-role="header"><h1> Ice Cream Order Form </h1></div><div data-role="content"><form action="#" method="get"><div data-role="fieldcontain"><label for="name"> Your Name: </label><input type="text" name="name" id="name" value=""/></div><div data-role="controlgroup"><legend> Which flavour(s) would you like? </legend><input type="checkbox" name="vanilla" id="vanilla" class="custom"/><label for="vanilla"> Vanilla </label><input type="checkbox" name="chocolate" id="chocolate" class="custom"/><label for="chocolate"> Chocolate </label><input type="checkbox" name="strawberry" id="strawberry" class="custom"/><label for="strawberry"> Strawberry </label></div><div data-role="fieldcontain"><label for="quantity"> Number of Cones: </label><input type="range" name="quantity" id="quantity" value="1" min="1" max="10"/></div><div data-role="fieldcontain"><label for="sprinkles"> Sprinkles: </label><select name="sprinkles" id="sprinkles" data-role="slider"><option value="off"> No </option><option value="on"> Yes </option></select></div><div data-role="fieldcontain"><label for="store"> Collect from Store: </label><select name="store" id="store"><option value="mainStreet"> Main Street </option><option value="libertyAvenue"> Liberty Avenue </option><option value="circleSquare"> Circle Square </option><option value="angelRoad"> Angel Road </option></select></div><div class="ui-body ui-body-b"><fieldset class="ui-grid-a"><div class="ui-block-a"><button type="submit" data-theme="d"> Cancel </button></div><div class="ui-block-b"><button type="submit" data-theme="a"> Order Ice Cream </button></div></fieldset></div></div></div></body></html>

列表视图

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更普遍。应用方法就是在ul或ol标签中添加data-role=”listview”属性。

下面的一些情景将会用到建立列表视图

简单的文件列表项

简单的文件列表，会有一个好看的盒环绕着每个列表项
连接列表，框架会自动为每个连接加一个箭头”>”，显示在连接按钮的右侧
嵌套列表，若是你在一个li中嵌套另外一个ul，jQuery Mobile会为这个嵌套列表自动创建一个”page”，并为它的父li自动加一个连接，这样很容易实现树状菜单选项，设置功能等等。
分隔线的按钮列表，在一个li中存放2个连接，你能够创建一个还垂直分隔条，用户可点击左侧或右侧的列表选项，展示不一样的内容
记数气泡若是你在列表选项中添加class=”ui-li-count”，框架会在其中生成一个”小泡泡”图标显现于列表选项的右侧，并在”小泡泡”中显示一些内容。相似在收信箱中看到已经收到的信息条数
查找过滤在ul或ol中添加data-filter=”true”属性。则这个列表项就具有的查询的功能。”Filter result…”文本框将会显示在列表项的上面，容许用户根据条件来将一个大的列表项变小（过滤显示）
列表分隔将列表项分割，能够在任意列表项上添加属性data-role=”list-divider
列表缩略图和图标。将img元素放在在列表项的开始， jQuery Mobile将会以缩略图的形式来展示，图片的大小为80 X 80像素。若是添加class=”ui-li-icon”类样式img元素的大小将会以16 X 16像素的图标

如下是一个列表项的实例

<!DOCTYPE html><html><head><title>jQuery Mobile Lists Demo</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script></head><body><div data-role="page" id="home"><div data-role="header"><h1> Lists Demo </h1></div><div data-role="content"><h2 style="padding: 1em 0;"> A list view </h2><ul data-role="listview" data-inset="true"><li> Cat </li><li> Dog </li><li> Mouse </li><li> Squirrel </li></ul><h2 style="padding: 1em 0;"> A list of links </h2><ul data-role="listview" data-inset="true"><li><a href="#">About this app</a></li><li><a href="#">Buy ice cream</a></li><li><a href="#">Find a store</a></li></ul><h2 style="padding: 1em 0;"> Nested lists </h2><ul data-role="listview" data-inset="true"><li> Play <ul><li><a href="#">Easy</a></li><li><a href="#">Medium</a></li><li><a href="#">Hard</a></li></ul></li><li> Settings <ul><li><a href="#">Graphics</a></li><li><a href="#">Sound</a></li><li><a href="#">Device</a></li></ul></li><li> Highscores <ul><li><a href="#">View</a></li><li><a href="#">Submit</a></li><li><a href="#">Reset</a></li></ul></li></ul><h2 style="padding: 1em 0;"> A split button list with filter </h2><ul data-role="listview" data-inset="true" data-filter="true"><li><a href="#">The Grapes of Wrath</a><a href="#">Buy This Book</a></li><li><a href="#">The Trial</a><a href="#">Buy This Book</a></li><li><a href="#">A Tale of Two Cities</a><a href="#">Buy This Book</a></li></ul><h2 style="padding: 1em 0;"> A list with count bubbles </h2><ul data-role="listview" data-inset="true"><li><a href="#">SuperWidgets</a><span class="ui-li-count">14</span></li><li><a href="#">MegaWidgets</a><span class="ui-li-count">0</span></li><li><a href="#">WonderWidgets</a><span class="ui-li-count">327</span></li></ul></div></div></body></html>

主题

jQuery Mobile渲染的灰色、黑色和蓝色及圆形的组件使其看起来很漂亮，可是若是你的整个应用都使用这样的样式，将会使其变得很乏味。jQuery Mobile容许你自定义官方一些组件的主题。例如：

Font family
Drop shadows
按钮和盒状元素的边框圆角半径
图标组件

另外，每个主题包含26种不一样颜色的切换（标记从a 到z），能够控制前景颜色，背景色和渐变色，典型用法是使页面元素部分替换，你可使用data-theme属性。例如：

<!DOCTYPE html><html><head><title>Page Title</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/><script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script></head><body><div data-role="page" id="home"><div data-role="header"><h1>Home</h1></div><div data-role="content"><a href="#" data-role="button" data-theme="a">About this app</a><a href="#" data-role="button" data-theme="b">About this app</a><a href="#" data-role="button" data-theme="c">About this app</a><a href="#" data-role="button" data-theme="d">About this app</a><a href="#" data-role="button" data-theme="e">About this app</a></div></div></body></html>

事件

框架还提供了简单的用户接口，并添加了移动设备支持的特殊事件。

<!DOCTYPE html> <html> <head> <title>jQuery Mobile Events</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> <script type="text/javascript"> $( function() {
  $('body').bind( 'taphold', function( e ) {
    alert( 'You tapped and held!' );
    e.stopImmediatePropagation(); returnfalse;
  } );  

  $('body').bind( 'swipe', function( e ) {
    alert( 'You swiped!' );
    e.stopImmediatePropagation(); returnfalse;
  } );  
 
} ); </script> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>jQuery Mobile Events</h1> </div> <div data-role="content"> <p>Try:</p> <ul> <li>Tapping and holding</li> <li>Swiping</li> </ul> </div> </div> </body> </html>