20151216JqueryUI学习笔记---按钮

按钮（button） ， 可以给生硬的原生按钮或者文本提供更多丰富多彩的外观。 它不单单
可以设置按钮或文本，还可以设置单选按钮和多选按钮。
一． 使用 button 按钮
使用 button 按钮 UI 的时候，不一定必须是 input 按钮形式，普通的文本也可以设置
button 按钮。

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

　　二． 修改 button 样式
在弹出的 button 对话框中，在火狐浏览器中打开 Firebug 或者右击->查看元素。这样，
我们可以看看 button 的样式，根据样式进行修改。我们为了和网站主题符合，对 dialog 的标题背景进行修改。

//无须修改 ui 里的 CSS，直接用 style.css 替代掉

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background:url(../img/ui_header_bg.png);
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background:url(../img/ui_white.png);
}

　　注意：其他修改方案类似。

三． button()方法的属性
按钮方法有两种形式： 1.button(options)， options 是以对象键值对的形式传参，每个键
值对表示一个选项； 2.button('action', param)， action 是操作对话框方法的字符串， param 则
是 options 的某个选项。

$('#search_button').button({
disabled : false,
icons : {
primary : 'ui-icon-search',
},
label : '查找',
text : false,
});

　　注意：对于 button 的事件方法，只有一个： create，当创建 button 时调用。
四． button('action', param)
button('action', param)方法能设置和获取按钮。 action 表示指定操作的方式。

//禁用按钮
$('#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 上自带的按钮， 比如 dialog 上的， 我们可以通过 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 单选框
$('#reg input[type=radio]').button();
//jQuery 单选框改
$('#reg').buttonset(); //HTML 部分做成一行即可
//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 复选框
$('#reg input[type=radio]').button();
//jQuery 复选框改
$('#reg').buttonset();