【JQuery Mobile】按钮

在page的区域内，可以通过给链接加data-role="button"的属性样式化为按钮。Jquery Mobile会给链接加一些必要的class来把他表现为按钮。

如：<a href="index.html" data-role="button">Link button</a>

为了容易的样式化按钮，Jquery Mobile自动把type为submi,reset,button或image的按钮元素或输入元素样式化为按钮，所以没有必要增加data-role="button"的属性。

 

给链接添加data-icon 属性，可以添加按钮的图标，

如：<a href="index.html" data-role="button" data-icon="delete">Delete</a>

data-icon属性可以被用来创建如下所示的图标：

左箭头data-icon="arrow-l"                  删除 data-icon="delete"

右箭头data-icon="arrow-r"                 添加 data-icon="Plus"

上箭头data-icon="arrow-u"　　　　　　减少 data-icon="minus"

下箭头data-icon="arrow-d"　　　　　　检查data-icon="Check"

齿轮 data-icon="gear"　　　　　　　　 五角星data-icon="Star"

前进 data-icon="Forward"　　　　　　  警告 data-icon="Alert"

后退 data-icon="Back"　　　　　　　　 信息 data-icon="info"

网格 data-icon="Grid"　　　　　　　　  首页data-icon="home"

搜索data-icon="Search"

默认情况下，所有按钮图标出现在按钮的文本的左侧。可以通过data-iconpos="top" / "bottom" / "left" / "right" / "notext"属性来改变图标与文本的位置。notext，只有图标没有文本，文本设置为title提示信息。

要使用自定义图标，指定一个唯一的data-icon 值（比如data-icon=“myapp-email ”），Jquery Mobile的button插件会生成一个class值添加上去，该值由ui-icon-与data-icon的值组合而成（ui-icon-myapp-email ），然后在css中指定这个类的背景图片地址。为了保持视觉效果的一致，请使用png-8格式的白色8*18的透明图标。

默认情况下，body里的所有按钮都会被样式化为块级元素，撑大到与页面等宽，但是，如果你想让按钮外观紧凑，宽度只符合里面的文字和icon，那就给按钮添加data-inline="true"的属性。如果你有多个按钮想在一行横排，可以在按钮上增加data-inline="true"的属性，这样就可以把按钮样式化为最小宽度，并且浮动，使他们在同一行横排。

如：

<div data-inline="true">
　 <a href="index.html" data-role="button">Cancel</a>
　 <a href="index.html" data-role="button" data-theme="b">Save</a>
</div>

如果你想多个按钮在通过一行横排并且容器自动撑大到与页面同宽，可以使用 内容分栏 把多个普通的块级按钮 放入同一行内。

有时候，你想把一组按钮放进一个单独的容器内，使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内，然后给该容器添加data-role="controlgroup"属性，Jquery Mobile会创建一个垂直的按钮组，删除掉按钮间的margin和阴影，然后只在第一个按钮和最后一个按钮产生圆角，使他们看起来是一组按钮。

如：

<div data-role="controlgroup">
　<a href="index.html" data-role="button">Yes</a>
　<a href="index.html" data-role="button">No</a>
　<a href="index.html" data-role="button">Maybe</a>
</div>

默认情况下，组按钮表现为垂直列表，如果给容器添加data-type="horizontal"的属性，则可以转换为水平按钮的列表，按钮会横向一个挨着一个地排列，容器会自动撑大到适应内容（所以要注意横排情况下按钮不要太多，按钮的字也不要太多）。