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