按钮综述
按钮是由标准的HTML的a标签和input元素写成,然后Jquery Mobile会让他们变得更吸引人而且易于触摸使用。查阅 data- attribute reference 来了解你可以给按钮添加的属性。
将链接样式化为按钮 Styling links as buttons
例如:
就会生成一个基于连接的按钮:
表单按钮 Form buttons
下面的选项适用于所有的按钮
$.mobile.changePage
布尔值
默认:true
此参数为ture的话则按钮会应用主题的圆角。此选项也可以通过data-corners="false"的属性设置
$('a').buttonMarkup({ corners: "false" });
icon
字符串
默认:null
从图标组给按钮添加图标。此选项也可以通过data-corners="false"的属性设置
$('a').buttonMarkup({ icon: "star" });
iconpos
字符串
默认:"left"
定义按钮的图标的位置。可能的值是: left, right, none,notext.使用notext值的话按钮按钮只显示图标,没有文字。此选项也可以通过data-iconpos="left"的属性设置
$('a').buttonMarkup({ iconpos: "right" });
iconshadow
布尔值
默认:true
此参数为ture的话则按钮会应用主题的圆角。此选项也可以通过data-iconshadow="false"的属性设置
$('a').buttonMarkup({ iconshadow: "false" });
inline
布尔值
默认:null (false)
设为true的话,会使按钮为内联的样式,这样按钮的宽度就由按钮内的文字来决定。默认情况下此项为null (false),所以按钮会的宽度会撑满,不管里面有多少文字。可以使用的值是:true, false。此选项也可以通过data-inline="true"的属性设置
$('a').buttonMarkup({ inline: "true" });
shadow
布尔值
默认:true
设为true的话,会使按钮有阴影。此选项也可以通过data-shadow="false"的属性设置
$('a').buttonMarkup({ shadow: "false" });
theme
字符串
默认:null,从父容器继承
给按钮的所有实例设定主题样式。接受从a-z的一个单个字母来映射相应的主题样式。默认情况下会继承父容器的主题样式。此选项也可以通过data-theme="a"的属性设置
$('a').buttonMarkup({ theme: "a" });
下面的选项只适用于表单的按钮,由框架自动初始化
initSelector
css选择符
默认: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"
此选项用来定义被被初始化为表单按钮的选择符(通过元素类型,数据规则等)
要改变被初始化的元素,需要给mobileinit event事件绑定这个选项
$( document ).bind( "mobileinit", function(){
$.mobile.button.prototype.options.initSelector = ".myButtons";
});
下面的方法只适用于表单中的按钮。基于链接的按钮没有相关联的方法。
此参数为ture的话则按钮会应用主题的圆角。此选项也可以通过data-corners="false"的属性设置
$('a').buttonMarkup({ corners: "false" });
enable
是一个被disabled的表单按钮可用
$('[type='submit']').button('enable');
disable
禁用一个表单按钮
$('[type='submit']').button('disable');
refresh
更新一个表单按钮
如果你通过js更新了一个表单按钮,你必须再对他通过refresh方法更新他的视觉样式。
$('[type='submit']').button('refresh');
通过jquery mobile的虚拟事件或者绑定标准的js事件,例如change, focus, blur等,可以给a, input,或者是button元素直接绑定事件。
$( ".myButton" ).bind( "click", function(event, ui) {
...
});
enable
使一个被disabled的表单按钮可用
$('[type='submit']').button('enable');
表单按钮拥有如下的自定义事件:
create
在一个表单元素被创建是触发
$('[type='submit']').button({
create: function(event, ui) { ... }
});