jQuery Mobile简介

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets。

为智能手机和平板触摸优化的Web框架，基于jQuery。写Web App或者Hybrid App会用到，界面挺丑，Android上性能表现不是很行，主要是加入了大量圆角和阴影效果，去掉后表现会好一点，iOS上则表现很好，其它平台没有试过。

jQuery Mobile主要提供了两个方面，一个是页面导航，另一个是一些元素控件。页面切换有两种，一种是传统的url变换，另一种是基于hash的变换，切换的时候默认使用ajax载入，然后再切换页面元素。元素控件主要是提供了一些工具栏，列表，按钮，输入框之类的东西。

jQuery Mobile大量的使用了HTML5的dataset属性来设置和获取一些元素空间的属性，比如按钮的写法是<a href="index.html" data-role="button">Link button</a>通过data-role="button"来设定这是一个button，然后会在相应的生命周期位置处通过包裹dom元素和设定相应css样式来生成一个按钮。比如再添加data-mini="true"属性，则会生成一个小样式的按钮。

jQuery Mobile主要分为几个组件，Page, ToolBar, Button, Form elements, List views，还有基本的一些布局元素Content Formatting。jQuery Mobile产生的App的一个完整的界面是一个Page，里面顶栏和底栏是ToolBar。

一个基本的Page是如下的：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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>

jQuery Mobile还有主题系统，通过设定属性data-theme来设置主题。

 

基本内容也就这些，写的仓促，还是看http://jquerymobile.com/demos/1.1.1/这个更好。

写几个用jqm过程中遇到问题的一些解决方法。

1. 如果使用backbone，backbone和jqm都会监听url的hash变化，会产生冲突，可以通过设定jqm的hashListeningEnabled属性禁用掉。网上有详细方案，Google易得。

2. 可通过$.mobile.changePage手动更换page。

3. 可通过$.mobile.showPageLoadingMsg显示Loading对话框。

4. page transition在android上基本是悲剧。

5. 动态生成的listview可能会存在样式问题，可通过$("元素选择").listview(), $("元素选择").listview("create"), $("元素选择").listview("refresh")之一来解决，看具体情况。

6. 可以通过Layout grids来做些基本的多栏布局。

。。。

 

来一张用jqm做的weibo的截图：

 

（未完代续）