标签：
按钮、导航栏、折叠块、折叠菜单的生成及方法、事件
1. 按钮
jQueryMobile 自动把button和type属性为submit、reset、button、image的input元素增强为按钮
<div data-role="content" data-theme="b">
<button>Button</button>
<input type="submit" value="submit">
<input type="reset" value="reset">
<input type="button" value="button">
将 a、div 设置为button
<a href="page.html" data-role="button">go to page</a>
<div data-role="button">button</div>
合成组合按钮
(上下带圆角，垂直方向)
<div data-rel="controlgroup">
<button>返回</button>
<button>主页</button>
<button>前进</button>
</div>
(水平方向，两端带圆角)
<div data-rel="controlgroup" data-type="horizontal">
<button>返回</button>
<button>主页</button>
<button>前进</button>
</div>
</div>
配置按钮组件
data-corners corners true 圆角；false 直角；默认为true
data-icon icon 使用图标
data-iconpos iconpos 指定icon的位置
data-iconshadow iconshadow 若为true，则为图标添加阴影
data-inline inline 生产根据内容自动设置宽度的按钮
data-mini mini 若为true，则显示为紧凑型按钮
data-shadow shadow 若为true（默认），有阴影；false，没有阴影；
为按钮添加图标
arrow-l, arrow-r, 左右上下的箭头
arrow-u, arrow-d
bars 三条水平线
edit 铅笔头，提示内容可修改
Check, delete 对号，错号
Plus, minus 加号，减号
gear 齿轮
Refresh, forward 刷新，前一页
back, home, search 后一页，首页，放大镜（搜索）
star 五角星
alert 叹号，警告
info i 信息固有格式
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<button data-icon="home">home</button>//home图标
</div>
<div class="ui-block-b">
<button data-icon="home" data-iconpos="up">home</button>//图标放在home文本上方
</div>
<div class="ui-block-c">
<button data-icon="home" data-iconpos="notext">home</button>//只有图标，没有文本
</div>
<div class="ui-block-d">
<button data-icon="home" data-inline="true" dat-mini="true">home</button>//简约格式，按文本决定按钮长度
</div>
</div>
</div>
更新按钮组件内容
button("disable") 禁用，不可点
button("enable") 启用，可点
button("refresh") 刷新按钮状态反映底层元素发生的变化
若组件底层的button或input元素的内容发生变化，则调用refresh
<script>
$(document).bind("pageinit",function(){ //绑定pageinit事件
var conter=0;
setInterval(function(){ //每隔1秒更新底层元素内容
var msg="Conter"+conter++; //次数每次加一
$("#btn").text(msg).button("refresh"); //调用refresh按钮上的文本才能随底层元素内容变化而变化
$("#inp").val(msg).buton("refresh");
$("#divE span.ui-btn-text").text(msg); //在div里添加了span ,可以使用.ui-btn-text定位到span元素，并改变内容
},1000);
})
</script>
<div data-role="content">
<button id="btn">Button</button>
<input id="inp" type="button" value="Input">
<div id="divE" data-role="button">DIV</div>
</div>
按钮事件
create 事件，该事件在按钮组件成功生成后触发，而按钮组件的底层元素也会触发他们自己的时间，
也就是 可以用 tap 事件编写处理函数，来接受点击按钮之后的反馈。
<script>
$(document).bind("pageinit",function(){
$("#btn").tap(function(){
$(this).text("Taped").button("refresh");//点击后更新按钮内容
});
});
</script>
2. 导航栏
<div data-role="navbar" data-iconpos="left"> //定义导航栏，也可添加图标
<ul> //为指示当前页是哪个，必须给a元素添加两个类
//ui-btn-active:当前按钮标记为活跃
//ui-state-persist：保证在用户返回上一页时，按钮活跃状态不变
<li><a href="#page1" data-icon="info" class="ui-btn-active ui-state-persist">Page1</a></li>
<li><a href="#page2" data-icon="alert">Page 2</a></li>
<li><a href="#page3" data-icon="gear">Page 3</a></li>
</ul>
</div>
3. 折叠块
data-collapsed collapsed 默认为true，隐藏，只显示标题；false显示，标题内容一起展示
data-collapsed-icon collapsedIcon 指定折叠状态时显示的图标
data-content-theme contentTheme 指定折叠内容区的主题
data-corners corners true折叠区显示为圆角，false为直角
data-expanded-icon expandedIcon 折叠块展开状态时显示的图标
data-iconpos iconPos 图标在标题中显示的位置
data-inset inset 默认true，若为false则标题紧贴窗口，没有任何留白
data-mini mini true则为紧凑的标题
<div data-role="content" data-theme="a">
<div data-role="collapsible" data-collapsed="true" data-content-theme="c"
data-inset="false" data-iconpos="top">
<h1>标题</h1>
<p>此处内容...很多</p>
</div>
</div>
4. 折叠菜单
一个包裹这几个折叠块构成的菜单 data-role="collapsible-set"
<div data-role="collapsible-set" data-theme="a"> //折叠块菜单
<div data-role="collapsible"> //折叠块
<h1>标题</h1>
<p>此处内容...很多1111</p>
</div>
<div data-role="collapsible" data-collapsed="false">//默认展开
<h1>标题</h1>
<p>此处内容...很多2222</p>
</div>
<div data-role="collapsible">
<h1>标题</h1>
<p>此处内容...很多3333</p>
</div>
</div>
标签：
原文地址：http://www.cnblogs.com/zhangchen2015/p/4579687.html
