按钮选项

corners 圆角 类型: 布尔值 默认值: true

如果设置为真,将主题应用于按钮边界半径。此选项也可以通过 data-corners="false" 的属性设置.

//使用编程方式设置
$( "a" ).buttonMarkup({ corners: false });


//在HTML中使用data-corners="false"的属性设置
<a href="#" data-role="button" data-corners="false">No rounded corners</a>

  

与角选项指定初始化buttonMarkup

$( ".selector" ).buttonMarkup({ corners: false });

  

初始化后,获取或设置选项的圆角。

// getter
var corners = $( ".selector" ).buttonMarkup( "option", "corners" );
 
// setter
$( ".selector" ).buttonMarkup( "option", "corners", false );

  

icon 图标 类型: 字符串 默认值: null

从图标组给按钮添加图标。此选项也可以通过 data-icon="star" 的属性设置。

//使用编程方式设置
$( "a" ).buttonMarkup({ icon: "star" });
//在HTML中使用 data-icon="star" 的属性设置
<a href="#" data-role="button"  data-icon="star">Star icon</a>

  

用指定的图标初始化按钮

$( ".selector" ).buttonMarkup({ icon: "star" });

  

初始化后,获取或设置图标选项。

// getter
var corners = $( ".selector" ).buttonMarkup( "option", "icon" );
 
// setter
$( ".selector" ).buttonMarkup( "option", "icon", "star" );

  

iconpos 定位 类型: 字符串 默认值: left

定位按钮的图标。取值:left,right,top,bottom,none,notext。该notext仅仅显示图标,不显示文本。

//使用编程方式设置
$( "a" ).buttonMarkup({ iconpos: "right" });
 
//在HTML中使用 data-iconpos="right" 的属性设置
<a href="#" data-role="button" data-iconpos="right">Star icon</a>

  

iconshadow 图标阴影 类型: 布尔值 默认值: true

如果设置为 true 的话,会应用主题的阴影到图标上。默认值为:true。设置为false,取消图标阴影。此选项也可以通过,data-iconshadow="false"来取消图标阴影。

//使用编程方式设置
$( "a" ).buttonMarkup({ iconshadow: false  });
 
//在HTML中使用 data-iconshadow="false" 的属性设置
<a href="#" data-role="button" data-iconshadow="false"> No icon shadow </a>

  

initSelector 类型: CSS选择器的字符串 默认值: button, [type='button'], [type='submit'], [type='reset']

此选项用来定义被被初始化为表单按钮的选择符(通过元素类型,数据规则等),要改变被初始化的元素,需要给mobileinit event事件绑定这个选项。

$( document ).on( "mobileinit", function() {
  $.mobile.button.prototype.options.initSelector = ".myButtons";
}); 

注:此选项只适用于表单按钮,它会自动初始化由框架。

  

inline 内联 类型: 布尔值 默认值: null (false)

设为true的话,会使按钮为内联的样式,这样按钮的宽度就由按钮内的文字来决定。默认情况下此项为null (false),所以按钮会的宽度会撑满,不管里面有多少文字。可以使用的值是:true, false。此选项也可以通过 data-inline="true" 的属性设置。

//使用编程方式设置
$( "a" ).buttonMarkup({ inline: true });
 
//在HTML中使用 data-inline="true" 的属性设置
<a href="#" data-role="button"  data-inline="true"> Inline </a>

  

mini 迷你 类型: 布尔值 默认值: null (false)

如果设置为true,这将显示一个更紧凑版本的按钮,使用较少的垂直高度。取值:true, false。此选项也可以通过 data-mini="true" 的属性设置。

//使用编程方式设置
$( "a" ).buttonMarkup({ mini: true });
 
//在HTML中使用 data-mini="true" 的属性设置
<a href="#" data-role="button"  data-mini="true"> Mini </a>

  

shadow 按钮阴影 类型: 布尔值 默认值: true

如果设置为true,应用带阴影样式的按钮。取值:true, false。此选项也可以通过 data-shadow="false" 的属性设置,来取消按钮阴影。

//使用编程方式设置
$( "a" ).buttonMarkup({ shadow: false });
 
//在HTML中使用 data-shadow="false" 的属性设置
<a href="#" data-role="button"  data-shadow="false"> No button shadow </a>

  

theme 主题 类型: 字符串 默认值: null,从父容器继承

给按钮的所有实例设定设置配色方案(样本)。接受从a-z的一个单个字母来映射相应的主题样式。默认情况下会继承父容器的样本的颜色。 jquery mobile 预设置了a,b,c,d,e五款样式。此选项也可以通过data-theme="a"的属性设置。

//使用编程方式设置
$( "a" ).buttonMarkup({ theme: "a" });
 
//在HTML中使用 data-theme="a" 的属性设置
<a href="#" data-role="button"  data-theme="a"> Theme A </a>