第16章 知问前端--按钮UI

学习要点：
1.使用 button 按钮
2.修改 button 样式
3.button()方法的属性
4.button('action', param)
5.单选、复选按钮

按钮（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();