一、按钮

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

1.1、表单按钮

jQuery Mobile框架会自动将type属性值为submit、reset、button的input元素转化为自定义样式的按钮（无需另外添加data-role="button"），即，如下三个input元素都会被转化为自定义样式的按钮。不过，如果有需要，你也可以直接将某些其他元素转化为按钮，相应的代码为： $(元素对应的选择符).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容器，如下即是一个预渲染标记示例。

html

<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 = $(" . s e l e c t o r ") . b u t t o n (" o p t i o n ", " c o r n e r s "); 设定：$ ( ".selector" ).button( "option", "corners", false );

3.2、disabled

布尔型，默认值为false。若设定为true会将按钮禁用。也可通过data-disable="true"的方法来设定。在按钮组件初始化时指定disabled： $( ".selector" ).button({ disabled: true }); 在按钮组件初始化后获取/设定disabled：获取：var disabled = $(" . s e l e c t o r ") . b u t t o n (" o p t i o n ", " d i s a b l e d "); 设定：$ ( ".selector" ).button( "option", "disabled", true );

3.3、enhanced

布尔型。默认值为false。指出按钮组件所需标记是否已经在原始标记中事先给出。亦可通过data-enhanced="true"来设定。在按钮组件初始化时设定enhanced： $( ".selector" ).button({ enhanced: true }); 在按钮组件初始化之后获取/设定enhanced：获取：var enhanced = $(" . s e l e c t o r ") . b u t t o n (" o p t i o n ", " e n h a n c e d "); 设定：$ ( ".selector" ).button( "option", "enhanced", true );

3.4、icon

字符串型变量，默认值为null。从可用icon中选一个予以应用。可通过data-icon="star"来设定。在按钮组件初始化时指定icon： $( ".selector" ).button({ icon: "star" }); 在按钮组件初始化后获取/设定icon：获取：var icon = $(" . s e l e c t o r ") . b u t t o n (" o p t i o n ", " i c o n "); 设定：$ ( ".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 = $(" . s e l e c t o r ") . b u t t o n (" o p t i o n ", " t h e m e "); 设定：$ ( ".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

html

<!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月于上海

jQuery Mobile: Button widget ​

一、按钮 ​

1.1、表单按钮 ​

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

三、选项 ​

3.1、corners ​

3.2、disabled ​

3.3、enhanced ​

3.4、icon ​

3.5、iconpos ​

3.6、iconshadow ​

3.7、initSelector ​

3.8、inline ​

3.9、mini ​

3.10、shadow ​

3.11、theme ​

3.12、wrapperClass ​

四、方法 ​

4.1、destroy() ​

4.2、disable() ​

4.3、enable() ​

4.4、option(optionName) ​

4.5、option() ​

4.6、option(optionName, value) ​

4.7、option(options) ​

4.8、refresh() ​

五、事件 ​

5.1、create(event, ui) ​

六、Demo ​

jQuery Mobile: Button widget