JQuery Mobile

Getting Started with jQuery Mobile

jQuery Mobile提供了一系列针对触摸操作友好的ui组件和基于ajax的导航系统来支持动画的页面转场。构建一个自己的jQuery Mobile页面是非常容易的：

Create a basic page template

打开你最喜欢的文本编辑器，把下面的页面模板代码粘贴进去，保存然后用浏览器打开。你现在也是移动开发者了！

在head里，viewport的meta标签将屏幕的宽度设置为了与设备的宽度相同，并且从Cdn引入了jQuery, jQuery Mobile 和jQuery Mobile的主题样式表。jQuery Mobile 1.1需要工作于1.6.4或 1.7.1版本的jQuery框架之上。

在body之中，用data-role=“page”来标记的一个div容器，用来定义一个page，页面，data-role="header"来标记的div容器用来定义页面的头部栏，data-role="content"来标记的div容器用来定义页面的内容区域，这些用 HTML5的data- 属性标记的标签会通过jQuery Mobile框架自动将基本的标记增强为部件。

HTML 代码:

<!DOCTYPE html> <html> 　<head> 　 <title>My Page</title> 　 <meta name="viewport" content="width=device-width, initial-scale=1"> 　 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 　 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 　 <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body>

<div data-role="header"> 　　<h1>My Title</h1> 　</div>

<div data-role="content"> 　　<p>Hello world</p> 　</div>

</div>

</body> </html>

Add your content

在content容器中，你可以加入你自己的标准的HTML元素 <h1>,<ul>,<p>等，你可以自己写样式来创建自定义的布局，但是注意要在jQuery Mobile的样式表之后加入自己的样式。

Make a listview

jQuery Mobile包含了一系列不同的列表，可以用data-role="listview" 标记的 ul标记来定义。可以添加data-inset="true"的属性来使列表看起来是内嵌的。还可以加入data-filter="true"属性加入一个动态的搜索过滤条。

HTML 代码:

<ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul>

 Add a slider

jquery mobile框架包含了一整套表单元素会自动将表单增强为易于触摸的样式。这个滑动条是用html5新的input类型“range”写的，不需要 data-role属性。务必把他放到form标签内，并且与label 元素相关联。

 html 代码:

<form> 　 <label for="slider-0">Input slider:</label> 　 <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" /> </form>

Make a button

有几种办法可以做按钮，先让a标签成为按钮，只需要在a标签添加data-role="button"属性就可以了。通过data-icon 属性可以给按钮添加图标，并且通过data-iconpos 属性控制图标的位置。

 html 代码:

<a href="#" data-role="button" data-icon="star">Star button</a>

Play with theme swatches

jQuery Mobile拥有一套健壮的主题样式系统支持最多26套（因为英文字母只有26个）工具栏，内容和按钮的主题，叫做"swatch".（斯沃琪手表...）.只需要给页面的任意组件添加data-theme="e"的属性，就可以将之设计为黄色的主题样式。

posted on 2013-01-03 16:53 Eleven_Niu 阅读(462) 评论(0) 编辑收藏举报