本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.3节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
一般情况下，HTML提供了多种方法创建看似按钮的元素，甚至不使用CSS样式或JavaScript。回想一下，比如button元素、类型为button和submit的输入框。
通过结合CSS和JavaScript，任何元素都可以做成如按钮一样的外观。代码清单7-3演示了jQuery UI如何帮助你创建按钮。
代码清单7-3 选取一列元素并装饰成按钮
00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Button</title> 05 <link type="text/css" rel="stylesheet" href= 06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css"> 07 </head> 08 <body> 09 10 <div id="target"> 11 <button>My button</button> 12 <input type="submit" id="my-submit" value="My submit"> 13 <a href="http://www.google.com">My link</a> 14 <p> 15 My paragraph 16 </p> 17 <ul> 18 <li>My unordered list</li> 19 <li>This might not be the best idea . . . </li> 20 </ul> 21 </div> 22 23 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 24 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"> 25 </script> 26 27 <script> 28 // 请将下列代码移至一个外部的.js文件中 29 $(document).ready(function() { 30 31 $('#target') 32 .children() 33 .button() 34 .click(function() { 35 alert($(this).html()); 36 }); 37 38 }); 39 </script> 40 </body> 41 </html>在这个列表中，第11～20行是一组不同类型的HTML元素。当应用了第31～36行的代码后，所有元素都装饰成按钮而且看起来大致相似。
7.3.1 为按钮元素添加样式如果想使用自定义的CSS样式，那么在按钮生成后，可以使用下面的HTML结构：
<div id="target"> <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">| <span class="ui-button-text">My button</span> </button> <input type="submit" id="my-submit" value="My submit" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false"> <a href=http://www.google.com class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" > <span class="ui-button-text"> My link</span> </a> <p class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> <span class="ui-button-text"> My paragraph </span> </p> <ul class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> <span class="ui-button-text"> <li>My unordered list</li> <li>This might not be the best idea. . .</li> </span> </ul> </div>按钮组件添加了许多类，它们可用于定义样式或复用现有的主题。此外，还会嵌套附加的span标签来包裹按钮组件的内容。
当用户与按钮进行交互时，按钮会获取临时附加的类：ui-state-hover、ui-state-active、ui-state-disabled和ui-button-disabled。
7.3.2 设置按钮的选项disabled选项已经在前一章中讨论过。但是，尤其是在按钮的上下文中，该选项还是值得重复讨论的，因为禁用按钮元素要比禁用可拖曳元素频繁得多。以下示例演示了如何禁用按钮，如何在按钮上显示图标，以及如何更改按钮的文字。
禁用按钮：
$('button').button({ disabled: true}); 在按钮上显示两个图标，取代文字： $('button').button({ text: false, icons: { primary:'ui-icon-signal', secondary:'ui-icon-signal-diag'} });将按钮的文字更改为指定的值：
$('button').button({ label: 'Say something different'});7.3.3 捕获按钮的事件就像其他微件一样，按钮的事件处理可在创建过程和初始化过程中完成。下面的代码片段举例说明了如何处理按钮的事件。
当一个新的按钮初始化时，处理事件：
$('button').button({create: function(event, ui) { // 事件处理 }}); //或 $('button') .on('buttoncreate', function(event, ui) { // 事件处理 }) .button();你可能会惊讶在这里没有找到其他的事件。事实上，按钮上最重要的事件就是click。由于click事件已经存在于所有的HTML元素，所以jQuery UI框架就没必要重新创建它。
7.3.4 调用按钮的方法按钮微件的可用方法与本章开头讲到的折叠菜单微件以及在第6章讲到的可拖曳组件的方法是相似的。我建议你参考这些章节中关于destroy、disable、enable、option和widget的详细介绍。
基于页面的当前状态的按钮要手动刷新：
$('button').button('refresh');
相关资源：敏捷开发V1.0.pptx