jQuery UI 实例 - 按钮（Button）

概述

jQuery UI 的按钮（Button）是一种易于定制和构建的按钮，可以用于各种 Web 应用程序中，比如表单、导航、小工具等等。按钮组件可以应用各种主题，包括用于表单、视觉和作为交互元素的主题。通过使用 jQuery UI 的按钮，可以让你的页面变得更加美观，同时也能够提升用户交互体验。

使用

使用按钮组件十分简单，只需要在 HTML 中添加如下一行代码即可：

<button>Click me</button>

默认情况下，这个按钮看起来并不太好看，但是我们可以通过添加一些类名来改变它的外观。比如我们可以将其改变为基本按钮：

<button class="ui-button ui-widget ui-corner-all">Click me</button>

这样的按钮看起来更加美观了，但是它并没有绑定任何事件。我们可以使用 jQuery 来为按钮添加事件。比如，我们可以在按钮被点击时弹出一个提示框：

<button id="myButton" class="ui-button ui-widget ui-corner-all">Click me</button>

<script>
    $('#myButton').click(function() {
        alert('Hello!');
    });
</script>

上面的代码中，我们为按钮添加了一个 id 属性，然后通过 jQuery 来绑定了一个 click 事件处理函数。当按钮被点击时，它就会弹出一个提示框。

主题

jQuery UI 的按钮组件支持多种主题，可以根据自己的需求来选择。比如，我们可以将按钮的主题修改为黑色：

<button class="ui-button ui-widget ui-corner-all ui-button-icon-only ui-ignite-black"></button>

在上面的代码中，我们通过添加 ui-ignite-black 类来更改主题。其他可用的主题包括ui-lightness，ui-darkness，ui-wignant-red和ui-wiget-blue。

API

jQuery UI 的按钮组件还提供了一组可用的 API，可以通过调用这些函数来对按钮进行操作。下面是一些常用的 API：

.button(options)

这个方法可以用来初始化一个按钮，也可以修改按钮的属性。下面是一个示例：

$('#myButton').button({
    icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
    }
});

这个方法还可以接受其他的参数，具体的用法可以参考官方文档。

.button("disable")

这个方法可以用来禁用一个按钮：

$('#myButton').button("disable");

.button("enable")

这个方法可以用来启用一个按钮：

$('#myButton').button("enable");

总结

通过使用 jQuery UI 的按钮组件，我们可以方便地创建美观的按钮并绑定事件，同时还提供了多种可选的主题和 API，使其更加易于定制和扩展。