jqueryui的button组件

1.html

<a href="#" id="myButton">A link button</a>

<input id="myButton" value="button按钮" type="button"/>

<button id="myButton">button</button>	

 

2.options

 

3.事件

create

 

4.调用

$("#myButton2").button();
$("#myButton2").button(options)

5.方法

destroy, disable, enable, option，refresh（用于单选和多选按钮）

 

6.单选和多选按钮组

<div id="buttons">
<h2>Programming Languages</h2>
<p>Select all languages you know:</p>
<label for="js">JavaScript</label>
<input id="js" type="checkbox">
<label for="py">Python</label>
<input id="py" type="checkbox">
<label for="cSharp">C#</label>
<input id="cSharp" type="checkbox">
<label for="jv">Java</label>
<input id="jv" type="checkbox">
</div>

 

<div id="buttons">
<h2>Programming Languages</h2>
<p>Select your most proficient languages:</p>
<label for="js">JavaScript</label>
<input id="js" type="radio" name="lang">
<label for="py">Python</label>
<input id="py" type="radio" name="lang">
<label for="cSharp">C#</label>
<input id="cSharp" type="radio" name="lang">
<label for="jv">Java</label>
<input id="jv" type="radio" name="lang">
</div>

*调用：

$("#buttons").buttonset();

7.input生成的带图标的按钮

<div
class="iconic-input ui-button-text-icons ui-state-default uicorner-
all">
<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
<input id="myButton" type = "button" value="Input icons"
class="ui-button-text">
<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-
1-s"></span>
</div>

 

.iconic-input { display:inline-block; position:relative; }
.ui-icon { z-index:2; }
.iconic-input input { border:none; margin:0; }

 

$(function($){
$("#myButton").button().hover(function() {
$(this).parent().addClass("ui-state-hover");
}, function() {
$(this).parent().removeClass("ui-state-hover");
});
});