03.Jquery Mobile中的按钮
一、 基础按钮
1.设置链接的data-role，使其变成按钮。
<a href="index.html" data-role="button">Link button</a>
2.html5中的button ，普通button、提交button、重置button
<form>
<button>Button</button>
<input value="Input" type="button">
<input value="Submit" type="submit">
<input value="Reset" type="reset">
</form>
3.设置 data-inline="true" 把buttom转换成内联的buttom 说明：默认情况下按钮式会占据整个网页一行的，如果想要按钮只占据本身的大小，则需要设置为内联，设置data-inline="true"即可。
<a href="#"data-role="button" data-inline="true">True</a>
<a href="#"data-role="button" data-inline="true">False</a>
4.data-theme="a"设置button的内置样式
<a href="#" data-role="button" data-theme="a" data-inline="true">A</a>
<a href="#" data-role="button" data-theme="b" data-inline="true">B</a>
<a href="#" data-role="button" data-theme="c" data-inline="true">C</a>
<a href="#" data-role="button" data-theme="d" data-inline="true">D</a>
<a href="#" data-role="button" data-theme="e" data-inline="true">E</a>
效果如下：
5.设置data-mini，使按钮变小。
注意data-mini和data-inline的区别
<a href="#"data-role="button" data-mini="true" data-inline="true">Cancel</a>
<a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b">Place order</a>
二、 带图标的按钮
- 常见的data-icon ，data-icon=“arrow-l” 设置按钮图标
|
Left arrow |
arrow-l |
|
Right arrow |
arrow-r |
|
Up arrow |
arrow-u |
|
Down arrow |
arrow-d |
|
Delete |
delete |
|
Plus |
plus |
|
Minus |
minus |
|
Check |
check |
|
Gear |
gear |
|
Refresh |
refresh |
|
Forward |
forward |
|
Back |
back |
|
Grid |
grid |
|
Star |
star |
|
Alert |
alert |
|
Info |
info |
|
Home |
home |
|
Search |
search |
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
<a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Delete</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">Arrow left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">Arrow right</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">Arrow up</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">Arrow down</a>
<a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">Check</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">Gear</a>
<a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">Refresh</a>
<a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">Forward</a>
<a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">Back</a>
<a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">Grid</a>
<a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">Star</a>
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">Alert</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">Info</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">Home</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">Search</a>
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true">Bars</a>
<a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">Edit</a>
2.设置按钮的显示位置data-iconpos=“left”
Left左边按钮 Right 有别按钮 Top上别按钮 Bottom 底部按钮 Notext 只显示按钮不显示图片
<a href="#" data-role="button" data-inline="true">Text only</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left" data-inline="true">Left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true">Right</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top" data-inline="true">Top</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom" data-inline="true">Bottom</a>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">Icon only</a>
三、 按钮组
通过在多个按钮外添加一个DIV，并设置data-role="controlgroup"，这样就可以组成一个按钮组。默认按钮组是垂直显示的，如果要使其水平显示，需要设置DIV的data-type="horizontal"。 1．默认按钮组
<div data-role="controlgroup">
<a href="#" data-role="button">Timeline</a>
<a href="#" data-role="button">Mentions</a>
<a href="#" data-role="button">Retweets</a>
</div>
2.水平按钮组
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Maybe</a>
</div>
3.迷你按钮组
<divdata-role="controlgroup"data-type="horizontal"data-mini="true">
<a href="#"data-role="button"data-iconpos="notext"data-icon="plus"data-theme="b">Add</a>
<a href="#"data-role="button"data-iconpos="notext"data-icon="delete"data-theme="b">Delete</a>
<a href="#"data-role="button"data-iconpos="notext"data-icon="grid"data-theme="b">More</a>
</div>
4.控制按钮样式（data-iconshadow属性）控制圆角（角），阴影（数据阴影），图标有阴影的亮点。
<a href="#" data-role="button" data-icon="gear" data-theme="b">Default</a>
<a href="#" data-role="button" data-icon="gear" data-corners="false"data-theme="b">No rounded corners</a>
<a href="#" data-role="button" data-icon="gear" data-shadow="false"data-theme="b">No button shadow</a>
<a href="#" data-role="button" data-icon="gear" data-iconshadow="false"data-theme="b">No icon disc shadow</a>
5.设置按钮disabled。
<a href="#" data-role="button" class="ui-disabled">Disabled anchor via class</a>
<form>
<button disabled="">Button with disabled attribute</button>
<input value="Input with disabled attribute" disabled="" type="button">
</form>
