本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.3节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
7.3 技巧：将元素转换为按钮微件
一般情况下，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');
