一、按钮

jQuery Mobile在标准HTML input元素的基础上，加强了input按钮的美观度和可用性。

1.1、表单按钮

jQuery Mobile框架会自动将type属性值为submit、reset、button的input元素转化为自定义样式的按钮（无需另外添加data-role=”button”），即，如下三个input元素都会被转化为自定义样式的按钮。

<input type=”button” value=”Button”>

<input type=”submit” value=”Submit Button”>

<input type=”reset” value=”Reset Button”>

不过，如果有需要，你也可以直接将某些其他元素转化为按钮，相应的代码为：

$(元素对应的选择符).button();

二、提供预渲染标记（pre-rendered markup）

jQuery Mobile框架初始化其按钮组件的时候，会添加一些HTML标记，如果你事先就写好这些标记，可以减少页面加载的时间。具体说明如下：

你需要在按钮元素上添加data-enhanced=”true”来告诉jQuery Mobile可以直接跳过该按钮初始化阶段的相应DOM操作，因为你已经事先写好了所需的DOM结构。

在提供预渲染标记的时候，你需要添加上通常jQuery Mobile会添加的class值。另外，你需要写出非默认值的data（dataset）属性，这样jQuery Mobile才知道你不希望这些data属性采用默认值。

jQuery Mobile会在input按钮元素的外面包裹上一个div容器，如下即是一个预渲染标记示例。

<div class=”ui-btn ui-input-btn ui-shadow”>

<input type=”button” data-corners=”false” data-enhanced=”true” value=”The Button”></input>

</div>

在上面的示例中，我们显式地设定了data-corners=”false”（相应地，div的class属性中也没有写上ui-corner-all这个class值）来告诉jQuery Mobile我们不需要在这个input按钮组件上应用corners组件。

三、选项

3.1、corners

布尔型，默认值为true。true值表示应用圆角边框。该值也可通过data-corners=”false”的方式设定。

在初始化按钮组件时指定corners：

$(“.selector”).button({

corners: false

});

在初始化按钮组件之后获取/设定corners：

获取： var corners = $(“.selector”).button(“option”, “corners”);

设定：$( “.selector” ).button( “option”, “corners”, false );

3.2、disabled

布尔型，默认值为false。若设定为true会将按钮禁用。也可通过data-disable=”true”的方法来设定。

在按钮组件初始化时指定disabled：

$( “.selector” ).button({

disabled: true

});

在按钮组件初始化后获取/设定disabled：

获取：var disabled = $( “.selector” ).button( “option”, “disabled” );

设定：$( “.selector” ).button( “option”, “disabled”, true );

3.3、enhanced

布尔型。默认值为false。指出按钮组件所需标记是否已经在原始标记中事先给出。亦可通过data-enhanced=”true”来设定。

在按钮组件初始化时设定enhanced：

$( “.selector” ).button({

enhanced: true

});

在按钮组件初始化之后获取/设定enhanced：

获取：var enhanced = $( “.selector” ).button( “option”, “enhanced” );

设定：$( “.selector” ).button( “option”, “enhanced”, true );

3.4、icon

字符串型变量，默认值为null。从可用icon中选一个予以应用。可通过data-icon=”star”来设定。

在按钮组件初始化时指定icon：

$( “.selector” ).button({

icon: “star”

});

在按钮组件初始化后获取/设定icon：

获取：var icon = $( “.selector” ).button( “option”, “icon” );

设定：$( “.selector” ).button( “option”, “icon”, “star” );

3.5、iconpos

字符串型，默认值为”left”。规定icon在按钮组件中的位置。可选择的值有：left、right、top、bottom、none、notext。notext表示只显示icon图标，不显示按钮组件上的文字。也可通过data-iconpos=”right”来设定。

3.6、iconshadow

无需了解。在1.4.0版本中已经不提倡使用了，会在1.5.0版本中移除。

3.7、initSelector

无需了解。在1.4.0版本中已经不提倡使用了，会在1.5.0版本中移除。

3.8、inline

布尔型，默认值为null (false)。设定为true时按钮组件会类似于行内按钮，其宽度由按钮文本内容决定。默认情况下，inline的值为null（false），所以按钮组件会占满全宽。

亦可通过data-inline=”true”予以设定。

3.9、mini

布尔型，默认值为null (false)。设定为true时，按钮会呈现得更加紧凑，会在按钮组件最外层元素上添加一个ui-mini的class值来减少按钮组件的竖直高度。

亦可通过data-mini=”true”予以设定。

3.10、shadow

布尔型，默认值为true。设定为true时，会给按钮组件添加阴影效果。也可以通过data-shadow=”false”来设定。

3.11、theme

字符串型，默认值为null（继承自父元素）。设定按钮组件的配色方案（swatch）。接受的值为a-z中的单个字母，对应于主题中的一个swatch。

可能的值：swach字母（a-z）。

也可通过data-theme=”b”来设定。

在按钮组件初始化时指定theme：

$( “.selector” ).button({

theme: “b”

});

在按钮组件初始化后获取/设定theme：

获取：var theme = $( “.selector” ).button( “option”, “theme” );

设定：$( “.selector” ).button( “option”, “theme”, “b” );

3.12、wrapperClass

字符串型，默认值为null。允许您设定按钮组件外层元素上的class。也可通过data-wrapper-class=”custom-class”设定。

四、方法

4.1、destroy()

彻底移除按钮组件功能。这会将按钮返回至其初始化之前的状态。

该方法不接受任何参数。

调用destroy方法：$( “.selector” ).button( “destroy” );

4.2、disable()

禁用按钮组件。该方法不接受任何参数。

调用disable方法：$( “.selector” ).button( “disable” );

4.3、enable()

启用按钮组件。该方法不接受任何参数。

调用enable方法：$( “.selector” ).button( “enable” );

4.4、option(optionName)

返回：object

获取当前optionName对应的值。

optionName参数为字符串型。

调用：var isDisabled = $( “.selector” ).button( “option”, “disabled” );

4.5、option()

返回：plainObject

获取一个包含体现当前按钮组件选项的key/value对的对象。

该方法不接受任何参数。

调用：var options = $( “.selector” ).button( “option” );

4.6、option(optionName, value)

设定按钮组件中指定optionName的对应值。

参数optionName为字符串型，参数value为object。

调用：$( “.selector” ).button( “option”, “disabled”, true );

4.7、option(options)

为按钮组件设定一个或多个选项。参数options为object。

调用：$( “.selector” ).button( “option”, { disabled: true } );

4.8、refresh()

更新表单按钮。

如果你通过JavaScript操作了表单按钮，你需要调用refresh方法来更新表单按钮的视觉外观。

该方法不接受任何参数。

调用refresh方法：$( “.selector” ).button( “refresh” );

五、事件

5.1、create(event, ui)

类型：buttoncreate

在按钮被创建时触发该事件。event参数类型为event，ui参数类型为object。

注意：ui参数是空的，但是为了与其他时间一致，不可省略。

在按钮组件初始化时指定create回调函数：

$( “.selector” ).button({

create: function( event, ui ) {}

});

绑定一个事件监听器到buttoncreate事件上：

$( “.selector” ).on( “buttoncreate”, function( event, ui ) {} );

六、Demo

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>button demo</title>

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>

<script src=”//code.jquery.com/jquery-1.10.2.min.js”></script>

<script src=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

</head>

<body>

<div data-role=”page” id=”page1″>

<div data-role=”header”>

<h1>jQuery Mobile Example</h1>

</div>

<div role=”main” class=”ui-content”>

<form action=”#” method=”get”>

<input type=”submit” value=”Input Button”></input>

</form>

</div>

</div>

</body>

</html>

参考：http://api.jquerymobile.com/button/

以上，滕运锋，2015年12月于上海