jquery mobile 移动web(2)

button 按钮
　　data-role="button" 将超链接变成button。
　　具有icon 图标的button 组件。
　　提供了18常用的图标 data-icon =""
　　　　1.arrow-1左箭头
　　　　2.arrow-r 右箭头
　　　　3.arrow-u 上箭头
　　　　4.arrow-d 下箭头
　　　　5.delete 删除
　　　　6.plus 加号
　　　　7.minus 减号
　　　　8.check 对号
　　　　9.gear 齿轮
　　　　10.refresh 刷新
　　　　11.forward 前进
　　　　12.back 返回
　　　　13.grid 网格
　　　　14.stat 星星
　　　　15.alert 提示
　　　　16.info 信息
　　　　17.home 主页
　　　　18.search 查找

　　图标的位置
　　　　data-iconpos=""
　　　　　　left right top bottom
　　　　　　通过 设置 data-iconpos="notext" 可以创建一个没有文字，只有icon 图标的按钮。
　　自定义图标按钮。
　　　　例如：data-icon="myapp-email" myapp-email 就是自定义的图标名称，根据规范编写css 样式 样式名称为.ui-icon-myapp-email 并在改样式中把图标设置为背景。
　　　　data-inline="" 属性值为true button 按钮的按钮的宽度会自动适应按钮文本内容和图标组合的长度。
　　　　<a href="#" data-role="button" data-icon="home" data-inline="true">home</a>
　　　　具有分组功能的buttonn按钮
　　　　　　在按钮的最外层增加一个div 并设置 data-role 属性值为 controlgroup。

　　　　　　　<div data-role="controlgroup">
　　　　　　　　　　<a data-role="button"></a>
　　　　　　　　　　<a data-role="button"></a>

　　　　　　　　</div>

　　　　　　data-type="horizontal" 将垂直的按钮变成水平分布。

　　　　　　data-rel="back" jQuery Mobile 会忽略a 元素的href属性，并模拟出类似浏览器后退按钮。

多按钮的Footer 工具栏。
　　footer 工具栏和header工具栏在布局上有一些区别。在footer工具栏中添加的按钮会自动给哦设置成inline 模式，并自动适应文本内容的宽度。
　　实现一组按钮的方法 在最外层设置一个div 设置data-role 属性值为controlgroup 然后在设置data-type 属性值为 horizontal,说明该按钮时水平排列的。
　　导航条工具栏。

<footer data-role="header">
　　　　<nav data-role="navbar">
　　　　<ul>
　　　　　　<li>
　　　　　　　　<a href="#" class="ui-btn-active" data-icon="home" data-iconpos="top">主页</a>
　　　　　　</li>
　　　　　　<li>
　　　　　　　　<a href="#" data-icon="search" data-iconpos="top">查找</a>
　　　　　　</li>
　　　　　　<li>
　　　　　　　　<a href="#" data-icon="info" data-iconpos="top">主页</a>
　　　　　　</li>
　　　　</ul>
　　　　</nav>
　　</footer>

定义fixed 工具栏
　　<header data-role="header" data-position="fixed">
　　　　<h1>固定位置工具栏</h1>
　　</header>
　　全屏模式工具栏
　　　　在页面视图内的header 或footer 区域设置为 data-position 属性值为fixed,然后在页面或视图的div 元素上设置data-fullscreen 属性为true
　　　　页面或试图采用全屏模式。

　　内容区域格式布局。

网格布局。
　　代码如下：

　　　　<div class="ui-grid-a">
　　　　　　<div class="ui-block-a">
　　　　　　　　<input type="reset" data-theme="c" value="reset">
　　　　　　</div>
　　　　　　<div class="ui-block-b">
　　　　　　　　<input type="reset" data-theme="b" value="submit">
　　　　　　</div>
　　　　</div>

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

　　三列网格布局如下：

　<div class="ui-grid-b">
　　　　　　<div class="ui-block-a">
　　　　　　　　<input type="reset" data-theme="a" value="a">
　　　　　　</div>
　　　　　　<div class="ui-block-b">
　　　　　　　　<input type="reset" data-theme="b" value="b">
　　　　　　</div>
　　　　　　<div class="ui-block-c">
　　　　　　　　<input type="reset" data-theme="c" value="c">
　　　　　　</div>
　　　　</div>

　　多列以此类推。