1. jQuery UI - Button
Nat
2012/12/28

2. jQuery UI Button Style!
• 任何 Element 都可成為 Button Style !
• $(element).button();
• 但要注意 Element 本身的行為
• <a>, <input type=‘submit’ />, <input type=‘reset’ />… 等
• 所以要做怎樣的動作來防止 !?
$( "input[type=submit], a, input[type=reset]" ).button()
.click(function( event ) {
event.preventDefault();
});

3. jQuery UI Button – Toggle & Buttonset
• <input type=“checkbox” />
• Toggle 的行為
$(container).buttonset();

4. jQuery UI Button – Icons
• <button>Button with two icons</button>
primary secondary

5. Button Widget

6. options
• disabled with refresh
• http://jsbin.com/utenad/2/edit
• icons with text
• http://jsbin.com/ibopid/4/edit
• label
• http://jsbin.com/ayikiw/1/edit

7. methods
• destory
• http://jsbin.com/uzotiv/1/edit
• option, disable, enable
• refresh
• widget: Return jQuery
• var widget = $("input").button(“widget ”);

9. reference
• jQuery Button
• http://jqueryui.com/button/
• http://api.jqueryui.com/button/
• Accessibility
• http://
stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag
• http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
• https://developer.mozilla.org/en-US/docs/HTML/Element/label
• http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control

10. demo reference
• http://jsbin.com/utenad/2/edit - disabled with refresh
• http://jsbin.com/ibopid/4/edit - icons with text
• http://jsbin.com/ayikiw/1/edit - label
• http://jsbin.com/uzotiv/1/edit - destory