jQueryMobile的(十一) 按钮

创建按钮 data-role="button"

给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。

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

迷你版 data-mini="true"

<a href="index.html" data-role="button" data-mini="true">Link button</a>

给按钮添加图标 data-icon

一个图标，可以通过添加一个对锚杆指定要显示的图标数据图标属性添加到一个按钮。例如，下面的标记：

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

图标样式列表

jQuery Mobile 自带很多按钮小图标，如下图所示：

左箭头：data-icon="arrow-l"
右箭头：data-icon="arrow-r"
上箭头：data-icon="arrow-u"
下箭头：data-icon="arrow-d"
删除：data-icon="delete"
添加：data-icon="Plus"
减少：data-icon="minus"
检查：data-icon="Check"
齿轮：data-icon="gear" 
前进：data-icon="Forward"
后退：data-icon="Back"
网格：data-icon="Grid"
五角：data-icon="Star"
警告：data-icon="Alert"
信息：data-icon="info"
首页：data-icon="home"
搜索：data-icon="Search"

图标定位 data-iconpos

默认情况下，所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos 属性来设置图标的右上方（top）、底部（bottom）、右侧（right）、左侧（left）的文本。例如，标记：

font color=#0000ff><a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

隐藏图片上的文字 data-iconpos="notext"

你也可以创建一个图标按钮，设置 data-iconpos="notext"。按钮插件将隐藏的文字在屏幕上，但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如，data-iconpos="right"，data-iconpos="notext"：

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

自定义图标 data-icon="自定义值"

使用自定义图标，需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类，它的前缀是ui-icon- ，后面的是data-icon值。假如：有一个按钮 data-icon 属性的值为 myapp-email，即 data-icon=“ myapp-email”。那么生产的CSS类是：ui-icon-myapp-email。

然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性，请创建一个白色18x18像素的PNG-8图标，并且保存为Alpha透明度。

.ui-icon-myapp-email {  background-image: url( "app-icon-email.png" );}

分组按钮 data-role="controlgroup"

有时候，你想把一组按钮放进一个单独的容器内，使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内，然后给该容器添加 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"

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

<div data-role="controlgroup"  data-type="horizontal">  <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>