jQuery Mobile 学习（二）

昨天我们一起学习了一部分jquery mobile的知识，今天我们继续。

这些是些很基础的东西，有朋友觉得这个没有其它的好，但是学习下不吃亏嘛，我反正也不会一起学习基础啦。

例子请使用手机查看哦

网格布局

jquery mobile提供一种多列布局功能，由于移动设备的屏幕大小原因，一般情况还是不要使用多列布局啦。

jquery mobile提供一种css样式规则来定义多列布局，对应css为ui-block，每列的样式是通过定义前缀+“-a”等方式对网格的列进行布局，a字母根据网格的列数而定。

例如两列布局CSS为：ui-block-a与ui-block-b

两列网格布局

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14     

 15         

 16             
 17         
 18         

 19             
 20         
 21     
 22 
 23 

http://sandbox.runjs.cn/show/tdwazgd4

我们看见了他这些都是使用float布局的。

两列布局，需要指定外层div样式是ui-grid-a，ui-grid-a样式用于指定行列采用两列布局样式。

以上两个按钮各占屏幕的50%，采用data-line属性对按钮进行水平排列，按钮宽度根据实际文本而定。

ui-grid-a 两列
 ui-grid-b 三列
 ui-grid-c 四列
 ui-grid-d 五列

我们来看一个三列网格布局：

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14     

 15         

 16             
 17         
 18         

 19             
 20         
 21         

 22             
 23         
 24     
 25 
 26 

http://sandbox.runjs.cn/show/wxkkjlfy

折叠块是移动端经常用到的效果，只要使用jquery mobile约定的编码规则并且利用HTML5的dataset特性，程序就能生成折叠快了。

其中data-role设置为collapsible，便可以创建一个可折叠的内容区，来个例子吧：

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14   

 15     
可折叠区域
 16     
刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗
 17   
 18 
 19 

http://sandbox.runjs.cn/show/omulbkhg

我们手机上的form表单其实都很漂亮了，但是我们的jquery mobile还是给他渲染了下下，是非常不错的。

我们来一个例子看看：

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14     
 15         姓名
 16     
 17     
 18         密码
 19     
 20     
 21         密码
 22     
 23     
 24         年龄
 25     
 26     
 27         手机
 28     
 29     
 30         email
 31     
 32     
 33         url
 34     
 35     
 36         搜索
 37     
 38 
 39 

http://sandbox.runjs.cn/show/by9mvtu8

我这里喷一下《HTML5移动Web开发指南》这本书！
 唐骏开写的，这家伙写的这本书不行，书中很多例子有问题。

Toggle类型

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14     

 15         
 16             打开开关：
 17         
 18             关闭
 19             开启
 20         
 21     
 22 
 23 

http://sandbox.runjs.cn/show/ty7aywwm

单选按钮类型

我们要创建一组单选按钮需要这样做：

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14     

 15         
请选择你的年龄范围：
 16         
 17         
 18             不限
 19         
 20         
 21             16-22岁
 22         
 23         
 24             23-30岁
 25         
 26         
 27             31-40岁
 28         
 29         
 30             40岁以上
 31     
 32 
 33 

http://sandbox.runjs.cn/show/nwfuhvep

我们看到，他还是挺好看的哈。。。

我们先是竖排，我们设置一个横排的单选按钮看看：

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14     

 15         
请选择你的年龄范围：
 16         
 17         
 18             不限
 19         
 20         
 21             16-22岁
 22         
 23         
 24             23-30岁
 25     
 26 
 27 

http://sandbox.runjs.cn/show/vz3bjotg

复选框

单选完了我们来看看复选框：

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14     

 15         
爱好：
 16         
 17         
 18             足球
 19         
 20         
 21            篮球
 22         
 23         
 24             编码（危险）
 25     
 26 
 27 

http://sandbox.runjs.cn/show/1zpxdut8

下拉菜单

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14     

 15         
 16             请选择兴趣
 17             
 18                 电影
 19                 体育
 20                 旅游
 21             
 22         
 23 
 24         
 25             请选择兴趣（多选）
 26             
 27                 
 28                     电影
 29                     体育
 30                     旅游
 31                 
 32                 
 33                     C
 34                     C++
 35                     Java
 36                 
 37             
 38         
 39     
 40 
 41 

http://sandbox.runjs.cn/show/zu0zsl2w

我们这里做一点改变，样式会发生变化：

http://sandbox.runjs.cn/show/ynvpsuyw

今天篇幅够长了，我们下一篇再继续吧。