Faster, Higher, Stronger
更快,更高,更强

jQuery Mobile: Button widget

一、按钮

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

赞(0) 打赏
未经允许不得转载:峰间的云 » jQuery Mobile: Button widget

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏