Jquery李炎恢——39按钮UI【5】

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

按钮可以给生硬的原生按钮或者文本提供更多丰富多彩的外观，它不单单可以设置按钮或文本，还可以设置单选按钮和多选按钮

一、使用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{....}
}
.ui-state-active,.ui-widget-content,.ui-state-active,ui-widget-content-header,.ui-state-active{
background:url{....}
}
//注意：其他修改方案类似

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

button按钮选项
属性：disabled,默认值/类型：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:"查找"，
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("options","label"));

//设置button的options值
$("#search_button").button("options","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="mela">男</label>

</input>

//jquery单选框

$("#reg input[type=radio]").button()

//jquery单选框改

$("#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复选框

$("#reg input[type=checkbox]").button()

//jquery复选框改

$("#reg").buttonset()