4.jQuery UI 按钮UI

   按钮（button），可以给生硬的原生按钮或者文本提供更多丰富多彩的外观。它不

单单可以设置按钮或文本，还可以设置单选按钮和多选按钮。

一．使用button 按钮

   使用button 按钮UI 的时候，不一定必须是input 按钮形式，普通的文本也可以设

置成button 按钮。

$('#button').button();

二．修改button 样式

   在弹出的button 对话框中，在火狐浏览器中打开Firebug 或者右击->查看元素。这

样，可以看看button 的样式，根据样式进行修改。为了和网站主题符合，对button 的标

题背景进行修改。

//无须修改ui 里的CSS，直接用style.css 替代掉
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {

   background:url(../img/xxx.png);

}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {

   background:url(../img/yyy.png);

}

三．button()方法的属性

   按钮方法有两种形式：1.button(options)，options 是以对象键值对的

形式传参，每个键值对表示一个选项；2.button('action', param)，action

是操作对话框方法的字符串，param 则是options 的某个选项。

button 按钮选项

属性	默认值/类型	说明
disabled	false/布尔值	默认为false，设置为true 时，按钮是非激活的。
label	无/字符串	对应按钮上的文字。如果没有，HTML 内容将被 作为按钮的文字。
icons	无/字符串	对应按钮上的图标。在按钮文字前面和后面都可以 放置一个图标，通过对象键值对的方式完成： {    primary : 'ui-icon-search',    secondary : 'ui-icon-search' }
text	true/布尔值	当时设置为false 时，不会显示文字，但必须指定 一个图标。

$('#search_button').button({
disabled : false,

   icons : {

      primary : 'ui-icon-search',

   },

   label : 'search',

   text : false,

});

注意：对于button 的事件方法，只有一个：create，当创建button 时调用。

四．button('action', param)  方法

        button('action', param)方法能设置和获取按钮。action 表示指定操作的方式。

button('action', param)方法

方法	返回值	说明
button('disable')	jQuery 对象	禁用按钮
button('enable')	jQuery 对象	启用按钮
button('destroy')	jQuery 对象	删除按钮，直接阻断了button
button('refresh')	jQuery 对象	更新按钮布局
button('widget')	jQuery 对象	获取对话框的jQuery 对象
button('option', param)	一般值	获取options 属性的值
button('option', param, value)	jQuery 对象	设置options 属性的值

 //禁用按钮
$('#search_button').button('disable');

//启用按钮
$('#search_button').button('enable');

//删除按钮
$('#search_button').button('destroy');

//更新按钮，刷新按钮
$('#search_button').button('refresh');

//得到button 的jQuery 对象
$('#search_button').button('widget');

//得到button 的options 值
alert($('#search_button').button('option', 'label'));

//设置button 的options 值
$('#search_button').button('option', 'label', '搜索');

注意：对于UI 上自带的按钮，比如button 上的，可以通过Firebug 查找得到jQuery对象。

$('#reg').parent().find('button').eq(1).button('disable');

五．单选框、复选框

   button 按钮不但可以设置普通的按钮，对于单选框、复选框同样有效。

单选框 :

html : 

<input type="radio" name="sex" value="male" id="male">
   <label for="male">男</label>
</input>

<input type="radio" name="sex" value="female" id="female">
   <label for="female">女</label>
</input>

jQuery : 

//jQuery 单选框
$('#reg input[type=radio]').button();

//jQuery 单选框 表格内的全部button设置
$('#reg').buttonset();

复选框 :

html : 

<input type="checkbox" name="color" value="red" id="red">
   <label for="red">红</label>
</input>
<input type="checkbox" name="color" value="green" id="green">
   <label for="green">绿</label>
</input>
<input type="checkbox" name="color" value="yellow" id="yellow">
   <label for="yellow">黄</label></input>
<input type="checkbox" name="color" value="orange" id="orange">
   <label for="orange">橙</label>
</input>

jQuery : 

//jQuery 复选框
$('#reg input[type=checkbox]').button();

//jQuery 复选框 表格内全部button设置
$('#reg').buttonset();