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

(为什么代码不能高亮显示？？？）

一：基本按钮：

按钮通常用标准的HTML锚或者input元素实现，然后经过jQueryMobile的强化之后，在手机上有更多吸引人的交互及可用性。使用一个链接锚（如a标签）来标记一个导航按钮，一个input或者button元素来标识一个表单提交。通过查看data-attributereference来查看可以增加到按钮上的属性。

二：按钮样式的链接

在主内容块中，你可以为链接添加属性data-role="button"来使它的样式像一个按钮。框架会强化这个标签给他加上标记及类属性，例如下面的标签：

链接按钮

会产生如下的按钮：

（官网去看吧！）

像按钮一样的链接样式跟基于表单的的按钮有所以相同的选项。但它们有几点不同。基于链接的按钮不是不是按钮插件的一个部分。而仅仅是使用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"属性。然后就会使用使用的控件渲染了。。

三：为按钮添加图标

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

一个图标可以添加到按钮上，只要添加一个data-icon属性即可。

在一个锚上指定一个用于显示的图标，标记如下：

Delete

图标集：

可用在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");

}

这将会创建一个标准的分辨率的icon，但是很多设备但是有很高的分辨率的显示屏。如retina显示屏。添加一个HD图标，创建一个36*36的像素(刚好是18像素的两倍大小。

添加第二条CSS规则使用-webkit-min-device-pixel-ratio:2媒体查询一个目标规则，仅针对一个高分辨率的显示设备。为HD图标指定一个背景图片。设置background-size为18*18。将会使36*36填充18含像素大小的空间。

媒体查询语句块可以包含多个CSS规则。如下：

[code=css]

@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2){

.ui-icon-myapp-email{

background-image("app-icon-email-hghres.png");

background-size:18px18px;

}

/*morecssrules**/

}

五图标与主题(Iconandthemes)：

在语义透明的黑色圆圈来保证在任何背景中都有好的对比度，所以它与jQueryMobile的主题系统很适应。下面是一些示例，在不同swatch下的图标样式。

（到官网去看吧。！）

六内联图标(inlinebuttons)

在默认情况下，所有在主体内容部分像会以块级元素来样式化，所以它们将与设备屏幕有相同的宽度。

然后，如果你想要更紧凑的按钮，刚好只有文字及图标的宽度。添加一个data-inline="true"属性就可以了。

如果你要几个按钮并排就请给每个图标加上data-inline="true"的属性。

如果你图标并排着但占满整个屏幕。你可以使用contentcolumngrids来将按钮

放置到2或3个列中。

七：一组按钮

有些情况下，你可能需要将可见的一组按钮组织在一起来组成一个

单独的块像包含导航容器。为了达到这个效果，将一系列的按钮用一个带data-role="controlgroup"的容器包装起来。，框架本身会创建一个垂直在按钮组。删除所有

外边框并在按钮之间有一个阴影。仅在他们在第一个组和最后一个按钮时有用。

下面是一个示例：

[code=html]

<divdata-role="controlgroup">

Yes

NO

MayBe

</div>

添加一个data-type="horizontal"属性到controlgroup容器。

你能包装一个水平样式，按钮将一个挨一个的浮动。设置宽度，以足够大能填充所以内容。

（注意：如果按钮数大多的话或者文本长度超出了屏幕的话，将会包装成多行。）

示例：

（到官网去看吧！）

八主题按钮

jQueryMobile有一个丰富的主题系统，它给你全面的控制按钮部件的样式。

当一个链接添加到一个容器中，它自动会拥有一个框架设置的主题，主题与父容器一致。

九设置一主题样品

按钮可以添加一个data-theme属性来设置主题样式

可选的值有a,b,c,d,e