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="page">

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

 

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

 </div><!-- /page -->

</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"的属性,就可以将之设计为黄色的主题样式。

你可能感兴趣的:(jquery,mobile)