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();

  

posted @ 2015-12-16 15:31 破玉 阅读(...) 评论(...) 编辑 收藏