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生成的带图标的按钮

<divclass="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");});});