知问前端——按钮UI
按钮（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的某个选项。
Button按钮选项
| 属性 | 默认值/类型 | 说明 |
| disabled | false/布尔值 | 默认为false，设置为true时，按钮是非激活的 |
| label | 无/字符串 | 对应按钮上的文字。如果没有，HTML内容将被作为按钮的文字 |
| icons | 无/字符串 | 对应按钮上的图标。 在按钮文字前面和后面都可以放置一个图标，通过对象键值对的方式完成： { primary : 'ui-icon-search', secondary : 'ui-icon-search' } |
| text | true/布尔值 | 当时设置为false时，不会显示文字，但必须指定一个图标 |
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <input type="button" value="查询" id="search_button" /> </div> <div class="header_member"> <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> </div> </div> </div> </body> </html>
jQuery代码：
$("#search_button").button({
disabled:true, //disabled设为true，按钮是非激活状态的
label:"搜索", //对应按钮上的文字
});
如果要使用icons属性，那么index.html中按钮必须修改为：
<button id="search_button">查询</button>
jQuery代码：
$("#search_button").button({
icons:{
primary:"ui-icon-search",
//secondary:"ui-icon-triangle-1-s"
},
text:false
});
注意：button的事件方法，只有一个：create，当创建button时调用。
button('action',param)
button('action',param)方法能设置和获取按钮，action表示指定操作的方式。
button('action',param)方法
| 方法 | 返回值 | 说明 |
| button('disabled') | jQuery对象 | 禁用按钮 |
| button('enable') | jQuery对象 | 启用按钮 |
| button('destroy') | jQuery对象 | 删除按钮，直接阻断了button |
| button('refresh') | jQuery对象 | 更新按钮布局 |
| button('widget') | jQuery对象 | 获取对话框的jQuery对象 |
| button('options',param) | 一般值 | 获取options属性的值 |
| button('options',param,value) | jQuery对象 | 设置options属性的值 |
禁用按钮：
$("#search_button").button("disable");
启用按钮：
$("#search_button").button("enable");
删除按钮：
$("#search_button").button("destroy"); //变成普通按钮
更新按钮，刷新按钮：
$("#search_button").button("refresh"); //感觉没什么鸟用
得到button的jQuery对象(与dialog类似)：
alert($("#search_button").button("widget"));
得到button的options值：
alert($("#search_button").button("option","label"));//查询
设置button的options值：
$("#search_button").button("option","label","搜索");
注意：对于UI上自带的按钮，比如dialog上的，我们可以通过Firebug查找得到jQuery对象。
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <button id="search_button">查询</button> </div> <div class="header_member"> <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> </div> </div> </div> <div id="reg" title="会员注册"> </div> </body> </html>
jQuery代码：
$("#search_button").button({
icons:{
primary:"ui-icon-search",
//secondary:"ui-icon-triangle-1-s"
}
});
$("#reg").dialog({
buttons:{
'提交':function() {
}
}
});
如何禁用对话框中的“提交按钮”?
alert($("#reg").parent().find("button").length); //2
alert($("#reg").parent().find("button").eq(1).html()); //<span class="ui-button-text">提交</span>
$("#reg").parent().find("button").eq(1).button("disable");
或者
$("#reg").dialog("widget").find("button").eq(1).button("disable");
单选框、复选框
button按钮不但可以设置普通的按钮，对于单选框、复选框同样有效。
1、html单选框
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <!-- <input type="button" value="查询" id="search_button" /> --> <button id="search_button">查询</button> </div> <div class="header_member"> <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> </div> </div> </div> <div id="reg" title="会员注册"> <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> </div> </body> </html>
jQuery代码：
$("#reg input[type=radio]").button(); //按钮之间还是有空隙的
或
$("#reg").buttonset(); //无空隙
2、html复选框
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div class="header_main"> <h1>知问</h1> <div class="header_search"> <input type="text" name="search" class="search" /> </div> <div class="header_button"> <!-- <input type="button" value="查询" id="search_button" /> --> <button id="search_button">查询</button> </div> <div class="header_member"> <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a> </div> </div> </div> <div id="reg" title="会员注册"> <input type="checkbox" name="color" value="red" id="red"><label for="red">红</label></input> <input type="checkbox" name="color" value="yellow" id="yellow"><label for="yellow">黄</label></input> <input type="checkbox" name="color" value="green" id="green"><label for="green">绿</label></input> <input type="checkbox" name="color" value="orange" id="orange"><label for="orange">橙</label></input> </div> </body> </html>
jQuery代码：
$("#reg input[type=checkbox]").button(); //按钮之间还是有空隙的
或
$("#reg").buttonset(); //无空隙
