jQuery Mobile 按钮

三种方式创建按钮：

<button>按钮</button> //用于表单提交

<input type="button" value="按钮"> //用于表单提交

<a href="#link" data-role="button">按钮</a> //推荐用这种形式的按钮

导航按钮： <a href="#page2" data-role="button">转到page2</a>

行内按钮：data-inline="true" 可使按钮宽度自适应其内容 （按钮默认情况会占据屏幕的全部宽度）

<a href="#page2" data-role="button" data-inline="true">转到page2</a>

组合按钮：data-role="controlgroup" data-type="horizontal | vertical" 水平或垂直排列一组按钮

<div data-role="controlgroup" data-type="horizontal">

<a href="#link" data-role="button">button1</a>

<a href="#link" data-role="button">button2</a>

<a href="#link" data-role="button">button3</a>

</div>

p.s. 水平分组按钮，默认是data-inline="true"

后退按钮：data-rel="back" （此时会忽略href的值）

<a href="#" data-role="button" data-rel="back" >返回</a>

其他按钮样式属性：data-corners="true | false " //按钮是否有圆角

data-mini="true | false " //按钮是否是小型按钮

data-shadow="true | false " //按钮是否有阴影，默认是有

按钮图标： data-icon="search" // 默认按钮中的图标位置是靠左放置

<a href="#anylink" data-role="button" data-icon="search">搜索</a>

data-icon="arrow-l | arrow-r"
// 左/右箭头图标的按钮

data-icon="delete" // 删除

data-icon="info" // 信息

data-icon="home" //首页

data-icon="forward | back" / 向前/返回

data-icon="search" //搜索

data-icon="grid" //网格

data-icon="plus|minus" // 加/减符号

data-icon="check" //勾选

data-icon="star" //星

data-icon="gear" //齿轮形

data-icon="arrow-d | arrow-u" // 向下/上箭头

定位按钮图标： data-iconpos="top | right | botton | left " // 可以重置按钮上的图标位置－ 上,右,下,左

<a href="#link" data-role="button" data-icon="search" data-iconpos="top" > 上 </a>

图标按钮：data-iconpos="notext" // 只显示图标，没有文本

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext" > 搜索 </a> //鼠标移到图标上会看到提示文本：搜索