[翻译学习]JQuery Mobile按钮之基本按钮！

(为什么代码不能高亮显示？？？）
一：基本按钮：
按钮通常用标准的HTML锚或者input元素实现，然后经过jQuery Mobile的强化之后，在手机上有更多吸引人的交互及可用性。使用一个链接锚（如a标签）来标记一个导航按钮，一个input或者button元素来标识一个表单提交。通过查看[url=http://jquerymobile.com/demos/1.0/docs/api/data-attributes.html]data-attribute reference[/url]来查看可以增加到按钮上的属性。

二：按钮样式的链接
在主内容块中，你可以为链接添加属性data-role="button"来使它的样式像一个按钮。框架会强化这个标签给他加上标记及类属性，例如下面的标签：
[url=index.html]链接按钮[/url]
会产生如下的按钮：
（官网去看吧！）
像按钮一样的链接样式跟基于表单的的按钮有所以相同的选项。但它们有几点不同。基于链接的按钮不是不是按钮插件的一个部分。而仅仅是使用buttonMarkup插件来产生按钮样式所以不支持表单按钮(enable,disable,refresh)等事件。
如果你需要禁用一个基于链接的按钮，你需要自己为为其加上ui-disabled类属性。用javaScript来达到同样的效果。

三：表单按钮
为了方便应用样式，框架会自动将任何一个有submit,reset,button或者image类型的button或者input元素转换为一个自定义样式的按钮，，没有必要添加data-role="button"属性。然后如果你需要你可以直接在任何选择器中调用button插件，就好比其它的jQuery 插件：
$('[type='submit']').button();
为了截断绑定到button或者input上的原始事件，框架会隐藏原来的元素使它透明并用新的按钮标签覆盖。当用户点击自定义按钮时，他们实际上在点击原始的元素。为了避免一个元素被转换为一个加强型的按钮，添加data-role="none"属性。然后就会使用使用的控件渲染了。。

三：为按钮添加图标
jQuery Mobile框架包括了一系列手机应用最常用的图标。为了减少最小的下载尺寸，jQuery Mobile包含了一个单独白色的图标集，自动添加一个语义透明的黑色背景圆圈，可以确保在任何背景下它的高对比度。

一个图标可以添加到按钮上，只要添加一个data-icon属性即可。
在一个锚上指定一个用于显示的图标，标记如下：
[url=index.html]Delete[/url]

图标集：
可用在data-icon属性的值如下：
arrow-l,arrow-r,arrow-u,arrow-d,delete,plus,minus,check,gear,refresh,forward,back,grid,star,alert,info,home,search
图标位置：
默认的情况下所以的图标都在按钮文字的左边。你可以用data-iconpos来覆盖默认值。
可以选择的值如下：
left,right,above,top,below,bottom，notext。注意位置都是相对于文字的。其中above和top一样。
bottom和below一样。
notext可以用来创建一个没有文字的图标

四 自定义图标：
为了使用一个自定义图标，先为data-icon指定一个唯一的名字如"myapp-email"然后button插件将会产生一个以ui-icon为前缀的类属性作为data-icon的值，即ui-icon-myapp-email。
然后你就可以在你的样式文件中为ui-icon-myapp-email写样式了。
为了与其它的图标保持一致将使用PNG-8格式及带alpha透明，颜色为白色，大小为18*18。
在这个示例中，我们仅仅将它指向一个单独的图标文件，但是你可以使用sprite来指定位置。如我们在框架中使用sprite中一样。
[code=css]
.ui-icon-myapp-email{
background-image:url("app-icon-email.png");
}
[/code]


这将会创建一个标准的分辨率的icon，但是很多设备但是有很高的分辨率的显示屏。如retina显示屏。添加一个HD图标，创建一个36*36的像素(刚好是18像素的两倍大小。
添加第二条CSS规则使用-webkit-min-device-pixel-ratio:2 媒体查询一个目标规则，仅针对一个高分辨率的显示设备。为HD图标指定一个背景图片。设置background-size为18*18。将会使36*36填充18含像素大小的空间。
媒体查询语句块可以包含多个CSS规则。如下：
[code=css]
@media only screen and(-webkit-min-device-pixel-ratio:2){
.ui-icon-myapp-email{
background-image("app-icon-email-hghres.png");
background-size:18px 18px;
}
/* more css rules**/
}
[/code]

五 图标与主题(Icon and themes)：
在语义透明的黑色圆圈来保证在任何背景中都有好的对比度，所以它与jQuery Mobile的主题系统很适应。下面是一些示例，在不同swatch下的图标样式。
（到官网去看吧。！）

六 内联图标(inline buttons)
在默认情况下，所有在主体内容部分像会以块级元素来样式化，所以它们将与设备屏幕有相同的宽度。
然后，如果你想要更紧凑的按钮，刚好只有文字及图标的宽度。添加一个data-inline="true"属性就可以了。

如果你要几个按钮并排就请给每个图标加上data-inline="true"的属性。
如果你图标并排着但占满整个屏幕。你可以使用[url=http://jquerymobile.com/demos/1.0/docs/content/content-grids.html]content column grids[/url]来将按钮
放置到2或3个列中。

七：一组按钮
有些情况下，你可能需要将可见的一组按钮组织在一起来组成一个
单独的块像包含导航容器。为了达到这个效果，将一系列的按钮用一个带data-role="controlgroup"的容器包装起来。，框架本身会创建一个垂直在按钮组。删除所有
外边框并在按钮之间有一个阴影。仅在他们在第一个 组和最后一个按钮时有用。
下面是一个示例：
[code=html]

[url=index.html]Yes[/url]
[url=index.html]NO[/url]
[url=index.html]MayBe[/url]

[/code]
添加一个data-type="horizontal"属性到controlgroup容器。
你能包装一个水平样式，按钮将一个挨一个的浮动。设置宽度，以足够大能填充所以内容。
（注意：如果按钮数大多的话或者文本长度超出了屏幕的话，将会包装成 多行。）

示例：
（到官网去看吧！）

八 主题按钮
jQuery Mobile有一个丰富的主题系统，它给你全面的控制按钮部件的样式。
当一个链接添加到一个容器中，它自动会拥有一个框架设置的主题，主题与父容器一致。

九 设置一主题样品
按钮可以添加一个data-theme属性来设置主题样式
可选的值有a,b,c,d,e