在jquery mobile中，是使用自定义属性驱动页面的（data-….），比如：

data-role

定义元素在页面中的角色，该属性允许定义不同的组件元素及页面视图：data-role=”page”

data-title

定义jquery mobile视图页面标题

data-transition

定义视图切换的动画效果

data-rel

定义具有浮动效果的视图

data-theme

指定元素或者组件内主题样式风格

data-icon

在元素内增加小图标

data-iconpos

定义小图标位置

data-inline

指定按钮根据内容自适应其长度

data-type

定义分组按钮水平或者垂直方向排布

data-rel

定义具有特定功能的元素，例如data-rel=”back”返回按钮

data-add-back-btn

指定视图页面自动在页眉左侧添加返回按钮

data-back-btn-text

指定由石头页面自动创建的返回按钮的文本内容，该属性的使用通常都需要和data-add-back-btn配合

data-position

该属性是实现在滑动屏幕时工具栏的显示和隐藏状态

data-fullscreen

用于指定全屏视图页面

data-native-menu

指定下拉选择功能采用平台内置的选择器

data-placeholder

设置下拉选择功能的占位符

data-inset

实现内嵌列表功能

data-split-theme

设置列表右侧图标的主题样式风格

data-filter

开启列表过滤功能

搞了这么多自定义属性，我们也不知道什么是什么，所以不如来试一试吧。

页面与视图作为移动web应用程序最重要的用户界面之一，他主要承担整个web应用程序的界面呈现工作。

jquery mobile提供一套自定义元素属性用于搭建各种页面和视图。

 1 2 3 4     5     6     7     8     9 
 10 
 11     

 12         
页头
 13         
 14         
内容
 15         
 16         
页脚
 17         
 18     
 19 
 20 

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

不要说还是有点感觉的。。。

我们在实例中使用div元素作为视图页面的布局元素但是我们这里改为html的元素更加好：

 1 2 3 4     5     6     7     8     9 
 10 
 11     

 12         
页头
 13         
 14         
内容
 15         
 16         
 18     
 19 
 20 

多视图web页面

前面只有一个视图，我们现在来看看多视图页面怎么处理：

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14     

 15         
视图一
 16         
 17         

 18             去视图二
 19         
 20         
 22     
 23      

 24         
视图二
 25         
 26         

 27             去视图1
 28         
 29         
 31     
 32 
 33 

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

我们点击超链接可以在视图一与视图二切换，你会发现还有一点点动画效果呢！！！

PS：在此若是设置了data-title将改变手机上title的标题

动画

我们可以设置6钟动画效果：

① Slide 从右到左切换
 ② Slideup 从下到上切换
 ③ Slidedown 从上到下切换
 ④ Pop弹出框方式打开
 ⑤ Fade 渐变褪色方式
 ⑥ Flip飞入飞出方式

这里我就不截图了，我私下试试去。

去视图1

效果感觉不错哦！！！

dialog对话框

只要在标签的data-rel设置了dialog属性，视图就具有dialog浮动层效果。

去视图二

这里有点表现不佳，我们暂时不管他。

页面主题

关于自定义属性的东西暂时写到这里，我们来看看我们比较重要的按钮。

按钮在移动web应用程序中式非常重要的用户界面组件，主要用作为用户提供各种操作入口和视图交互功能，我们的jquery mobile提供了很多不错的按钮。

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14   
我是按钮
 15 
 16 

于是我们的按钮就出现啦，在页面上独占一行。

input 中button、submit等也都变成了这个样式了

小图标

jquery mobile提供了一套小图标：

图标太多，我这里简单列两个：

delete：删除，data-icon=”delete”

plus：加号，data-icon=”plus”

PS:设置data-iconpos=”notext”便可以只要图标不要文字

1   
删除
 2   
删除
 3   
删除

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

若是系统提供的图标不能满足条件的话，便可以自定义图标

data-icon="myapp-email"
 myapp-email就是自定义图标的名称（需要上传）
 css中对应的样式是.ui-icon-myapp-email
 自定义图标大小是18*18，建议png-8

按钮分组

 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 

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

感觉还不错的说，这里还可以为各个按钮设置主题，看起来就更加有分别了。

工具栏也是一重要组件，我们这里结合前面的按钮来完成一完整的工具栏。

jquery mobile提供两组工具栏：

Headers bar
 充当视图页面的标题作用，在一般情况下header bar位于页面的顶部，一般包含2按钮

Footer bar
 这个工具栏一般位于尾部，就是与header bar对应的东东

初体验：

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14 

 15   

 16     
header bar
 17   
 18   
内容区域
 19   
 22 
 23 
 24 

我们在此基础上改下：

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14 

 15   

 16     
header bar
 17   
 18   
内容区域
 19   
 29 
 30 
 31 

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

导航工具条

navbar是非常有用的，他提供不同数量的按钮组合，一般位于header或者footer中

 1 2 3 4     5     6     8     
 10     
 12 
 13 
 14 

 15   

 16     
header bar
 17   
 18   
内容区域
 19   
 34 
 35 
 36 
 37 

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

各位感觉还行吧。。。

fixed工具栏

这个家伙提供后，我们在轻触屏幕或者滑动屏幕时，header和footer都会出现或者消失

我们今天暂时学到这里，明天再继续吧。