jquerymobile

data-role参数表：
page 页面容器，其内部的mobile元素将会继承这个容器上所设置的属性
header 页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素
footer 页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素
content 页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素
controlgroup 将几个元素设置成一组，一般是几个相同的元素类型
collapsible 页面中可折叠的内容面板
collapsible-set 一组可折叠的面板（手风琴布局）
fieldcontain 区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔
navbar 功能导航容器，通俗的讲就是工具条
listview 列表展示容器，类似手机中联系人列表的展示方式
list-divider 列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接
button 按钮，将链接和普通按钮的样式设置成为jQueryMobile的风格
none 阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。
dialog 对话页面
slider 用于布尔值的可视化滑块
nojs 在兼容jQueryMobile的浏览器上会被隐藏的元素
data-transition参数表：
slide 从右侧向左滑入页面
slideup 从底部向上滑入
slidedown 从上向下滑入
pop 从中心渐显展开
fade 渐显
flip 翻转
data-iconpos参数表：
right 图标在文字的右侧
top 图标在文字上面
bottom 图标在文字下面
pop 从中心渐显展开
fade 渐显
flip 翻转
eg:
Toolbar：

例：

 
Page Title
Options

主题样式：data-theme="a | b | c | d | e"
位置固定：data-pisition="fixed"
全屏样式：data-fullscreen="true"
返回按钮：data-rel="back"
反向过渡：data-direction="reverse"
按钮位置：data-role="button" class="ui-btn-right"
自定义导航菜单： class="ui-bar ui-bar-b"
例：

I'm just a div with bar classes and a Button



One
Two

链接：
打开对话框：Dialog link
对话框大小设置：
.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { max-width: 500px; margin: 10% auto 15px auto; }
对话框遮罩主题：data-overlay-theme="a | b | c | d | e"
页面过渡：data-transition="fade | pop | flip | turn | flow | slide | slideup | slidedown | none"

Buttons：
Link button
小按钮：data-mini="true"
按钮上的图标：data-icon="arrow-l | arrow-r | arrow-u | arrow-d | delete | plus | minus | check | gear | refresh | forward | back | grid | star | alert | info | home | search"
图标位置：data-iconpos="top | bottom | left | right"
无文字按钮：data-iconpos="notext"
自定义图标：data-icon="myicon" .ui-icon-myicon{ }
按钮并列：data-inline="true"
按钮组：data-role="controlgroup"
水平按钮组：data-type="horizontal"
例：

Yes
No
Maybe

Content：
标题：h1 、h2。。。；文本区域；图片；
可折叠： data-role="collapsible"
内容主题：data-content-theme=“a”
默认展开：data-collapsed="false"
小号折叠：data-mini="true"
可折叠组：data-role="collapsible-set"
例：

    
Section 1
  
I'm the collapsible set content for section B.
   
  
   
Section 2
  
I'm the collapsible set content for section B.
   

网格：class="ui-grid"
两列 (ui-grid-a)
三列(ui-grid-b)
四列 (ui-grid-c)
五列 (ui-grid-d)
例：

 
I'm Block A and text inside will wrap
    
I'm Block B and text inside will wrap

List Views：
列表：data-role="listview"
普通列表：

    
Acura
 
Audi
   
BMW


编号列表：

只读列表：没有链接
列表块：

调用ListView的插件：$('#mylist').listview();
更新列表：$('#mylist').listview('refresh');
Form Elements：
表单结构：

...

隐藏标签：

Username:

或者

Username:

禁用表单元素：disable & enable
表单容器： data-role="fieldcontain"
刷新表单元素：
复选框:
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh"); 
单选框:
$("input[type='radio']").prop("checked",true).checkboxradio("refresh"); 
下拉菜单:
var myselect = $("#selectfoo");myselect[0].selectedIndex = 3;myselect.selectmenu("refresh");
Sliders:
$("input[type='range']").val(60).slider("refresh");
开关:
var myswitch = $("#selectbar");myswitch[0].selectedIndex = 1;myswitch.slider("refresh");
保持原生态：data-role="none"
滑块：
Input slider:

开关：

Flip switch:
  
  No
  Yes
   

单选复选：type="radio" type="checkbox"水平排列
 ,单选框name要一致。

     
Choose a pet:
          
             
Cat             
          
Dog             
 
Pig 


下拉菜单：弹出式data-native-menu="false"
      

Shipping method:        
       
Choose one...          
Standard: 7 day

Rush: 3 days          
Express: next day          
Overnight