前言

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

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

例子请使用手机查看哦

内容区域格式布局

网格布局

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

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

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

两列网格布局

 1 html> 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 html> 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 html> 2  3  4      5      6      8     10     12 13 14   
15     
可折叠区域
16     
刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗
17   
18 19 

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

form表单

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

我们来一个例子看看：

 1 html> 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         email31     32     33         url34     35     36         搜索37     38 39 

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

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

Toggle类型

 1 html> 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 html> 2  3  4      5      6      8     10     12 13 14     

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

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

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

 1 html> 2  3  4      5      6      8     10     12 13 14     

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

复选框

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

 1 html> 2  3  4      5      6      8     10     12 13 14     

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

下拉菜单

 1 html> 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                     C34                     C++35                     Java36                 37             38         39     
40 41 

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

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

 1 html> 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         34             请选择兴趣（多选）35             36                 37                     电影38                     体育39                     旅游40                 41                 42                     C43                     C++44                     Java45                 46             47         48     
49 50 

View Code

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

结语

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