jQuery UI 秘籍（一）

原文：zh.annas-archive.org/md5/6053054F727DA7F93DC0A95B33107695

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

创造令人兴奋的用户体验是一项有趣而有价值的工作。实质上，您正在改善许多人的生活。大多数 UI 开发人员的目光都在终点上，看着他们的产品被使用。我们越快到达终点线而不牺牲质量，就越好。我们用来帮助我们达到这个目标的工具可能会产生世界上的所有差异。

jQuery 框架在开发人员中如此受欢迎的部分原因在于“少写，做得更多”的口号，在 jQuery UI 中也有体现。现代版本的 HTML 和 CSS 标准具有组装健壮，响应迅速的用户界面所需的工具。当这个想法破灭时——浏览器的不一致性以及跨项目的开发惯例和模式的缺乏——jQuery UI 介入。jQuery UI 的目标不是重新发明我们编写 Web 应用程序的方式，而是填补空白，并逐步增强现有的浏览器组件。

与任何框架一样，jQuery UI 并不适用于所有人，也不完全适合使用它的人。框架接受了这一事实，并为您可能遇到的大多数情况提供了可扩展性机制。我写这本书的目标是与您分享我在使用 jQuery UI 小部件时的一些经验。我尽可能地进行了扩展，并在必要时进行了修改。我相信您会发现本书中的大多数技巧都很有用，无论您构建什么类型的应用程序。

本书涵盖内容

第一章, 创建手风琴，帮助您学习如何在手风琴小部件之间拖放。此外，您还将学习如何扩展手风琴主题。

第二章, 包含自动完成，解释了自动完成小部件，显示如何使用多个数据源。还涵盖了将选择选项转换为自动完成小部件以及远程数据源过滤的内容。

第三章, 制作按钮，解释了如何修改我们应用程序中的按钮。按钮可以简单，修改文本和图标选项。或者，按钮可以更复杂，比如处理按钮集时。我们将研究间距问题，以及如何应用效果。

第四章, 开发日期选择器，讨论了日期选择器，这是最广泛使用的小部件，但利用率最低的。我们将通过使用一些技巧来更好地将日期选择器集成到您的应用程序中，发掘小部件的一些潜力。

第五章, 添加对话框，讨论了对话框小部件，这些小部件通常依赖于 API 数据。我们将研究加载数据和对话框显示问题。我们还涵盖了更改对话框标题栏以及对小部件应用效果的内容。

第六章, 制作菜单，帮助您学习如何制作可排序的菜单项。我们还将解决主题问题以及突出显示活动菜单项的问题。

第七章，进度条，展示了如何向进度条添加标签。我们还将扩展进度条以创建加载小部件。

第八章，使用滑块，介绍了不显示步进增量的滑块小部件。在这里，您将扩展小部件以提供此功能。我们还将研究更改滑块手柄的视觉显示。

第九章，使用微调器，解释了微调器，通常用于表单中。因此，我们在本章中处理了本地货币和日期的微调器值的格式化。我们还将研究处理小部件的主题问题。

第十章，使用选项卡，介绍了在处理选项卡时使用一些新技术，即使用每个选项卡作为普通 URL 链接。我们还涵盖了一些更高级的选项卡导航用法——动态加载和读取浏览器哈希值。

第十一章，使用工具提示，解释了工具提示，可以应用于页面上的几乎任何内容。在本章中，我们将向您展示如何将效果应用于工具提示，更改工具提示状态，并将工具提示应用于所选文本。

第十二章，小部件和更多！，讨论了小部件，它们不是独立存在的。它们是更大应用程序的一部分。本章涵盖了更大的 jQuery UI 开发画面。这包括从头开始构建小部件、构建自己的开发工具以及使用 Backbone。

本书需要什么

您将需要以下内容：

• 用于运行示例的现代 Web 浏览器。

• 一个用于阅读和调整示例的文本编辑器。

• 所有 JavaScript 依赖项都包含在示例下载中。

• Python（可选）；一些示例需要 Web 服务器，并在示例中使用内置的 Python Web 服务器。示例可以使用任何具有适当调整的 Web 服务器。

本书适用于谁

本书适用于希望改进其现有应用程序、为其新应用程序提取想法或更好地理解整体小部件架构的 jQuery UI 开发人员。读者至少应具有初步的了解什么是 jQuery UI，并编写了一些使用 jQuery UI 的代码。本书中的配方面向中级 jQuery UI 开发人员。根据您的需求，每个配方都足够独立以在自身上有用，但又足够连接以引导您到其他内容。

约定

在本书中，您将找到一些样式的文本，用于区分不同类型的信息。以下是这些样式的一些示例，以及它们的含义解释。

文本中的代码词如下所示：“在这种情况下，我们最好只是将默认的 dateFormat 值更改为我们的应用程序在整个过程中使用的某些内容。”

代码块设置如下：

$(function() {
    $( ".calendar" ).datepicker();
});

新术语 和重要单词 以粗体显示。您在屏幕上看到的单词，例如菜单或对话框中的单词，会以此类样式显示在文本中：“单击 no icons 链接将导致按钮图标被移除，并用它们的文本替换。”

注意

警告或重要说明会以此类样式显示在框中。

提示

贴士和技巧显示为此类样式。

第一章：创建手风琴

在本章中，我们将涵盖以下配方：

• 使用 Tab 键进行部分导航

• 动态更改高度样式

• 可调整大小的内容部分

• 使用主题控制间距

• 排序手风琴部分

• 在手风琴之间进行拖放

介绍

在本章中，我们将探讨多种方法，以扩展 手风琴 小部件，以适应多种情况。手风琴小部件提供了很多开箱即用的功能。例如，没有任何配置，我们就得到了一个主题化的容器小部件，将内容分组到部分中。

我们将专注于揭示手风琴小部件内部工作原理的用例。键盘事件是导航页面的一种方式，我们可以增强手风琴对这些事件的支持。在展开时，每个部分的高度会发生一些神奇的变化。我们将看到我们如何处理这些配置，特别是当部分高度在飞行中改变时。

此外，在高度方面，我们可以让用户控制各个部分的高度，或者从主题的角度来看，我们可以控制手风琴组件之间的空间。最后，我们将看一些更高级的手风琴用法，其中我们让用户自由地对手风琴部分进行排序，并将部分从一个手风琴拖到另一个手风琴中。

使用 Tab 键进行部分导航

在大多数桌面环境中，Tab 键是导航中的秘密武器——许多用户习惯使用的一个工具。同样，我们可以使用 tabindex 属性在 HTML5 应用程序中利用 Tab 键。这告诉浏览器每次按下该键时焦点元素的顺序。

不幸的是，使用手风琴小部件并不像看起来那么简单。我们不能在每个部分标题中指定 tabindex 值，并期望 Tab 键事件按预期工作。相反，默认小部件实现提供了一种不同类型的键导航——上 和 下 箭头键。理想情况下，给用户使用他们熟悉的 Tab 键通过手风琴部分导航的能力是有用的，同时保留小部件提供的默认键导航。

准备工作

要开始，我们需要一个基本的手风琴；理想情况下，是一些简单的内容，每个部分都有基本的内容，这样我们就可以在实现自定义事件之前和之后直观地看到 Tab 键的行为如何工作。

作为指南，这是我的基本手风琴标记：

div id="accordion">
    h3>Section 1/h3>
    div>
        p>Section 1 content/p>
    /div>
    h3>Section 2/h3>
    div>
        p>Section 2 content/p>
    /div>
    h3>Section 3/h3>
    div>
        p>Section 3 content/p>
    /div>
    h3>Section 4/h3>
    div>
        p>Section 4 content/p>
    /div>
/div>

并且，这是用于实例化手风琴小部件的代码：

$(function() {

    $( "#accordion" ).accordion({
        collapsible: true
    });

});

提示

下载示例代码

您可以从您在 www.packtpub.com 的帐户中下载您购买的所有 Packt 图书的示例代码文件。如果您在其他地方购买了此书，您可以访问 www.packtpub.com/support 并注册以直接将文件发送到您的电子邮件。

现在我们有一个基本的可折叠手风琴小部件，我们可以在浏览器中查看。我们在这里添加 collapsible 选项的原因是为了可以实验按键导航——当所有部分都折叠时，我们可以更好地看到哪个部分处于焦点状态。您可以看到 up 和down箭头键允许用户遍历手风琴部分，而 Tab 键没有任何效果。让我们改变一下。

如何做…

我们将扩展手风琴小部件以包括一个 keypress 事件的事件处理程序。默认的手风琴实现有处理 up、down、left、right 和Enter键的 keypress 事件。我们不需要改变这一点。相反，我们添加了一个理解当按下 Tab 键和 Shift + Tab 键时该做什么的自定义处理程序。

看一下以下代码：

(function( $, undefined ) {

$.widget( "ab.accordion", $.ui.accordion, {

    _create: function () {

        this._super( "_create" );
        this._on( this.headers, { keydown: "_tabkeydown" } );

    },

    _tabkeydown: function ( event ) {

        if ( event.altKey || event.ctrlKey ) {
            return;
         }

        if ( event.keyCode !== $.ui.keyCode.TAB ) {
            return;
        }

        var headers = this.headers,
            headerLength = headers.length,
            headerIndex = headers.index( event.target ),
            toFocus = false;

        if ( event.shiftKey && headerIndex - 1 >= 0 ) {
            toFocus = headers[ headerIndex - 1 ];
        }

        if ( !event.shiftKey && headerIndex + 1  headerLength ) {
            toFocus = headers[ headerIndex + 1 ];
        }

        if ( toFocus ) {

            $( event.target ).attr( "tabIndex", -1 );
            $( toFocus ).attr( "tabIndex", 0 );
            toFocus.focus();
            event.preventDefault();

        }

    }

});

})( jQuery );

$(function() {

    $( "#accordion" ).accordion({
        collapsible: true
    });

});

它是如何工作的…

我们在这里通过扩展默认的手风琴小部件来创建一个新的手风琴小部件。扩展手风琴小部件的优势在于我们不会去修改小部件的实例；所有手风琴实例都将获得这种新的行为。

_create()方法被我们的新实现所取代。在这个替代方法中，我们首先调用原始的 _create() 方法。我们不想阻止手风琴小部件的默认设置操作发生。因此，使用 _super() 我们能够做到这一点。接下来我们绑定了我们的新的 tabkeydown() 事件处理程序到 keydown 事件上。

tabkeydown()处理程序是原始手风琴实现中提供的 keydown 事件处理程序的简化版本。如果 Alt 或Ctrl键与其他键组合按下，则我们忽略事件。如果按下的键不是 Tab，我们也会忽略事件，因为我们只对当手风琴标题处于焦点时改变Tab 键行为感兴趣。

处理程序的要点在于确定 Tab 键按下时应该发生什么。我们应该将手风琴标题焦点移动到哪个方向？何时忽略事件并让默认浏览器行为接管？诀窍在于确定我们当前的索引位置。如果我们在第一个标题上，并且用户按下Shift + Tab，意味着他们想向后遍历，则我们不做任何操作。同样，如果我们在最后一个标题上，并且用户按下Tab，我们将控制权交给浏览器，以便不干扰预期功能。

动态改变高度样式

手风琴是用于组织和显示其他 UI 元素的容器。将每个手风琴部分视为静态内容是一个错误。手风琴部分的内容确实会发生变化。例如，用户触发的事件可能会导致在部分内创建新元素。很可能，部分内的组件会动态改变大小，这是我们需要注意的部分。为什么关注手风琴内容变化大小很重要？因为这是一个手风琴，我们可能会有几个部分（或至少有一些）。让它们都具有统一的高度有意义吗？在某个部分的高度增加到非常大的程度时，它就不再具有统一的高度了。当发生这种情况时，我们需要查看手风琴部分高度的变化，并在必要时动态调整一些高度设置。

准备就绪

让我们使用以下标记创建手风琴小部件：

div id="accordion">
    h3>Section 1/h3>
    div>
        p>Section 1 content/p>
    /div>
    h3>Section 2/h3>
    div>
        p>Section 2 content/p>
    /div>
    h3>Section 3/h3>
    div>
        p>Section 3 content/p>
    /div>
    h3>Section 4/h3>
     div>
        ul>
            li>First item/li>
            li>Second item/li>
            li>Third item/li>
            li>Fourth item/li>
        /ul>
     /div>
/div>

我们将使用所有默认选项值创建手风琴如下：

$(function() {
    $("#accordion").accordion();
});

现在，我们会注意到一个关于高度的轻微不一致性。以下是第一部分的样子。它内容很少，但却使用了比所需更多的空间。

这是由于 heightStyle 选项的默认值造成的，该选项规定手风琴中每个部分的高度将等于最高部分的高度。因此，我们在第一部分浪费了空间。让我们看看以下屏幕截图中的第四部分，以了解为什么会发生这种情况：

我们可以看到，第一部分与第四部分一样高。这是由于 heightStyle 的auto值造成的。在这个特定的例子中，差异并不是那么大。也就是说，第一部分没有浪费太多的空白空间。因此，保持每个部分具有相同高度的手风琴配置可能是有意义的。

当我们处理动态向特定手风琴部分提供内容的应用程序时，挑战就出现了，在某个临界点达到时，保持自动 heightStyle 配置就不再有意义了。

如何做…

将 heightStyle 设置为 auto 可以为我们解决问题，因为每个部分只会使用必要的高度来显示内容。但是，如果能够在内容自身的高度发生变化时更改手风琴的此属性，那就更好了。

(function( $, undefined ) {

$.widget( "ab.accordion", $.ui.accordion, {

    refresh: function() {

        this._super( "refresh" );

        if ( this.options.heightStyle !== "content" ) {
            return;
        }

        this.headers.next().each( function() {

            if ( $( this ).css( "height" ) ) {
                $( this ).css( "height", "" );
            }

        });

    }

});

})(jQuery);

$(function() {

    $( "#accordion" ).accordion();

    for ( var i=0; i20; i++ ){
        $( "ul" ).append( "
nth item
" );
    }

    $( "#accordion" ).accordion( "option", "heightStyle", "content" )
                     .accordion( "refresh" );

});

它是如何工作的…

我们在这里所做的是扩展手风琴小部件的 refresh() 方法，以允许在运行时将 heightStyle 选项更改为内容。默认实现不允许此操作。为了说明这个想法，请考虑上面的代码，我们正在创建手风琴小部件，并向最后一个内容部分添加 20 个新项。我们在这里使用的是默认部分高度，即 auto。因此，如果我们没有扩展refresh() 方法来允许此行为在填充第四部分后，我们会看到一个滚动条。

可调整大小的内容部分

可调整大小的内容部分允许用户通过拖动部分底部来调整高度。这是一种很好的选择，而不是依赖于 heightStyle 属性。因此，如果手风琴的每个部分都可以由用户调整，则他们可以自由地定制手风琴布局。例如，如果手风琴有一个高的部分，在底部浪费了空间，用户可能会选择缩小该部分的高度，以更好地查看手风琴以及 UI 的其他组件。

如何操作…

我们将通过使用可调整大小的交互小部件使手风琴内的每个内容的 div 可调整大小来扩展默认手风琴的 _create() 方法。

( function( $, undefined ) {

$.widget( "ab.accordion", $.ui.accordion, {

    _create: function () {

        this._super( "_create" );

        this.headers.next()
                    .resizable( { handles: "s" } )
                    .css( "overflow", "hidden" );

    },

    _destroy: function () {

        this._super( "_destroy" );

        this.headers.next()
                    .resizable( "destroy" )
                    .css( "overflow", "" );

    }

});

})( jQuery );

$( function() {

    $( "#accordion" ).accordion();

});

您将看到类似以下的内容。请注意，第二节已被向下拖动，并带有调整大小的鼠标光标。

工作原理…

我们的 _create() 方法的新版本首先调用默认手风琴的 _create() 方法。完成后，我们找到手风琴的所有内容部分，并应用 resizable() 小部件。您还会注意到，我们告诉可调整大小的小部件仅显示一个 south 手柄。这意味着用户只能使用部分底部的光标将手风琴的任何给定内容部分向上或向下拖动。

这个手风琴的特殊化还提供了一个新的 _delete() 方法的实现。再次，我们在调用原始手风琴的 _delete() 之后，清理我们添加的新可调整大小组件。这包括删除overflowCSS 属性。

还有更多…

我们可以通过提供关闭它的手段来扩展手风琴中的可调整大小行为。我们将在手风琴中添加一个简单的 resizable 选项，用于检查是否使手风琴部分可调整大小。

(function( $, undefined ) {

$.widget( "ab.accordion", $.ui.accordion, {

    options: {
        resizable: true
    },

    _create: function () {

        this._super( "_create" );

        if ( !this.options.resizable ) {
            return;
        }

        this.headers.next()
                    .resizable( { handles: "s" } )
                    .css( "overflow", "hidden" );
    },

    _destroy: function () {

        this._super( "_destroy" );

        if ( !this.options.resizable ) {
            return;
        }

        this.headers.next()
                    .resizable( "destroy" )
                    .css( "overflow", "" );

    },

});

})( jQuery );

$(function() {

    $( "#accordion" ).accordion( { resizable: false } );

});

使用主题控制间距

手风琴部分之间的间距由 CSS 主题框架控制。特别是，手风琴的视觉结构由一组 CSS 规则定义，可以修改以控制手风琴部分之间的间距。我们可以覆盖手风琴主题 CSS 以调整部分之间的间距。

如何操作…

我们将为我们的 UI 提供一个额外的 CSS 模块，它将覆盖我们目前正在使用的主题中提供的手风琴结构。然而，无需担心，我们的更改很简单。我们将更新 margin-top 属性。在一个名为 theme.accordion.css 的新 CSS 文件中，让我们添加以下样式规则：

.ui-accordion .ui-accordion-header {
    margin-top: 4px;
}

现在我们有了 CSS，我们需要将其包含在我们的 HTML 头部。它应该类似于这样：

工作原理…

我们复制了与任何 jQuery UI 主题中找到的相同的 CSS 选择器。我们刚刚更改的特定属性改变了手风琴部分之间的间距。由于我们覆盖了默认主题值，所以将我们的 CSS 文件包含在默认主题文件之后非常重要。这样我们就可以覆盖默认主题，而不是默认主题覆盖我们的修改。

对手风琴部分进行排序

使用可排序交互式小部件，我们能够将静态手风琴部分布局转换为用户指定的内容。也就是说，可排序交互式小部件接受一个容器元素，并允许对所有子元素进行就地排序。用户通过将元素拖动到所需顺序来执行此操作。

我们将看看如何扩展手风琴功能，以便在创建时可以通过配置选项打开可排序部分功能。

操作步骤…

当手风琴小部件创建时，以及销毁手风琴时，我们必须执行几个操作。以下是我们如何扩展小部件的方式：

( function( $, undefined ) {

$.widget( "ab.accordion", $.ui.accordion, {

    options: {
        sortable: false
    },

    _create: function () {

        this._super( "_create" );

        if ( !this.options.sortable ) {
            return;
        }

        this.headers.each( function() {
            $( this ).next()
                     .addBack()
                     .wrapAll( "
" );
        });

        this.element.sortable({
            axis: "y",
            handle: "h3",
            stop: function( event, ui ) {
                ui.item.children( "h3" )
                       .triggerHandler( "focusout" );
            }
        });        

    },

    _destroy: function () {

        if ( !this.options.sortable ) {
            this._super( "_destroy" );
            return;
        }

        this.element.sortable( "destroy" );

        this.headers.each( function () {
            $( this ).unwrap( "
" );
        });

        this._super( "_destroy" );

    }

});

})( jQuery );

$( function() {

    $( "#accordion" ).accordion( { sortable: true } );

});

有了我们新的标记为 sortable 的手风琴小部件，用户现在可以在手风琴内拖动头部部分。例如，如果第一个手风琴部分属于底部，用户只需将其拖到底部。

工作原理…

借助 sortable() 交互式小部件的帮助，我们能够扩展默认手风琴小部件实现，以包括排序功能。与任何 jQuery UI 小部件增强一样，我们实际上不需要扩展所讨论的小部件；新功能始终可以在小部件实例化后附加。然而，正如您将在本书中看到的，最佳实践是封装自定义内容并将其作为一组选项呈现给小部件客户端。

我们在此扩展了可用的手风琴选项集，包括一个 sortable 选项。这是我们打开或关闭自定义的方式（它是一个布尔值）。我们实现的自定义 _create() 版本将调用手风琴的 _create() 方法的默认版本。之后，我们将查看可排序行为是否被关闭（在这种情况下我们无需做任何事情，所以返回）。同样，我们的自定义 _delete() 函数在调用原始删除功能后检查可排序行为是否已打开。

实现可排序手风琴部分的棘手部分在于我们必须在手风琴元素内进行轻微的 DOM 操作。这是为了使用可排序交互小部件所必需的。手风琴小部件的标记结构化，使得所有部分都相邻。也就是说，我们有一个 h3 元素，后面跟着一个 div 元素。这是一个部分，并且后面跟着另一个 h3 和另一个 div，依此类推。这是一个平面结构。有两种处理方式：修改创建小部件所需的标记，或者注入一些轻微的 DOM 修改，并且小部件客户端对此一无所知。我们选择后一种方式，不要求客户端更改其代码。这是另一个最佳实践，即在提供定制时保持现有小部件客户端代码的功能性。

在我们定制的 _create() 版本中，我们正在迭代每个手风琴标题，并将标题元素和相应的内容元素包装在一个 div 元素中，以便将它们捆绑在一起。这样，可排序小部件就知道如何移动这个捆绑包了。如果我们没有这样做，用户只能移动标题部分，从而将其与内容分开。最后，我们正在创建可排序小部件，将移动限制为 y 轴，并将可移动手柄设置为手风琴标题。

我们定制的 _destroy() 函数在调用原始的 _destroy() 方法之前撤消我们的修改。这意味着取消包装我们的新 div 元素并销毁可排序小部件。

在手风琴之间拖放

一些应用程序需要比其他更流畅的布局，不仅从屏幕分辨率的角度来看，而且从功能的角度来看也是如此。手风琴小部件是一个静态分组组件，用于将较小的组件组织成部分。我们只需展开感兴趣的部分，就可以隐藏所有不相关的材料。正如我们在 排序手风琴部分 的示例中看到的那样，我们可以提供一个手风琴，用户可以通过拖放来操作其结构。实际上，这已经成为用户大规模预期的事情——通过拖放进行 UI 配置。

可排序手风琴专注于单个手风琴。当然，在应用程序的范围内给予用户自由的精神下，我们为什么不试着看看我们是否能支持将手风琴部分移动到一个新的手风琴中呢？

准备就绪

对于这个实验，我们需要两个基本的手风琴。标记应该假设如下所示的形式：

div id="target-accordion" style="width: 30%">
    h3>Section 1/h3>
    div>
        p>Section 1 content/p>
    /div>
    h3>Section 2/h3>
    div>
        p>Section 2 content/p>
    /div>
    h3>Section 3/h3>
    div>
        p>Section 3 content/p>
    /div>
/div>
p>/p>
div id="accept-accordion" style="width: 30%">
    h3>Section 4/h3>
    div>
        p>Section 4 content/p>
    /div>
    h3>Section 5/h3>
    div>
        p>Section 5 content/p>
    /div>
    h3>Section 6/h3>
    div>
        p>Section 6 content/p>
    /div>
/div>

如何做…

有了这个，让我们将这个标记转换为两个手风琴。我们首先将手风琴小部件扩展为带有一些花哨的拖放行为。意图是允许用户将第一个小部件的手风琴部分拖到第二个小部件中。下面是具体操作：

(function( $, undefined ) {

$.widget( "ui.accordion", $.ui.accordion, {

    options: {
         target: false,
         accept: false,
         header: "> h3, > div > h3"
    },

    _teardownEvents: function( event ) {

        var self = this,
            events = {};

        if ( !event ) {
            return;
        }

        $.each( event.split(""), function( index, eventName ) {
            self._off( self.headers, eventName );
        });

    },

    _createTarget: function() {

        var self = this,
            draggableOptions = {
                handle: "h3",
                helper: "clone",
                connectToSortable: this.options.target,
            };

        this.headers.each( function() {
            $( this ).next()
                     .addBack()
                     .wrapAll( "
" )
                     .parent()
                     .draggable( draggableOptions );
        });
    },

    _createAccept: function() {

        var self = this,
            options = self.options,
            target = $( options.accept ).data( "uiAccordion" );

        var sortableOptions = {

            stop: function ( event, ui ) {

                var dropped       = $(ui.item),
                    droppedHeader = dropped.find("> h3"),
                    droppedClass  = "ui-draggable",
                    droppedId;

                if ( !dropped.hasClass( droppedClass ) ) {
                    return;
                }

                
                droppedId = droppedHeader.attr( "id" );
                droppedHeader.attr( "id", "" );

                
                self.headers = self.element.find( options.header )

                
                self._off( self.headers, "keydown" );
                self._off( self.headers.next(), "keydown" );
                self._teardownEvents( options.event );

                
                self._hoverable( droppedHeader );
                self._focusable( droppedHeader );
                self._on( self.headers, { keydown: "_keydown" } );
                self._on( self.headers.next(), { keydown: "_panelKeyDown" } );
                self._setupEvents( options.event );

                
                $( "#" + droppedId ).parent().fadeOut( "slow", function() {
                    $( this ).remove();
                    target.refresh();
                });

                dropped.removeClass( droppedClass );

            }

        };

        this.headers.each( function() {
            $(this).next()
                   .addBack()
                   .wrapAll( "
" );
        });

        this.element.sortable( sortableOptions );

    },

    _create: function() {

        this._super( "_create" );

        if ( this.options.target ) {
            this._createTarget();
        }

        if ( this.options.accept ) {
            this._createAccept();
        }

    },

    _destroy: function() {

        this._super( "_destroy" );

        if ( this.options.target || this.options.accept ) {

            this.headers.each( function() {
                $( this ).next()
                         .addBack()
                         .unwrap( "
" );
            });
        }
    }

});

})( jQuery );

$(function() {

    $( "#target-accordion" ).accordion({
        target: "#accept-accordion"
    });

    $( "#accept-accordion" ).accordion({
        accept: "#target-accordion" 
    });

});

现在我们有了两个看起来基本的手风琴小部件。然而，如果用户愿意，他们可以将第一个手风琴的部分拖到第二个手风琴中。

它是如何运作的…

乍一看，这可能看起来是很多的代码，但是只需要很少的工作（约 130 行左右），我们就能够将手风琴部分从一个手风琴拖放到另一个手风琴。让我们进一步解析一下。

我们通过这个小部件扩展添加了两个手风琴选项：target 和 accept。目标允许我们指定手风琴的部分目的地。在这个例子中，我们将第二个手风琴作为第一个手风琴的目标，这意味着我们可以从 target-accordion 拖放到accept-accordion。但是，为了实现这一点，必须告诉第二个手风琴从哪里接受部分；在这种情况下，它是target-accordion。我们基本上使用这两个选项在两个小部件之间建立拖放合同。

这个例子使用了两个交互式小部件：draggable 和 sortable。target-accordion使用了 draggable。如果指定了 target 选项，将调用 _createTarget() 方法。_createTarget()方法将浏览手风琴部分，将它们包装在 div 元素中，并创建一个 draggable() 小部件。这就是我们能够从第一个手风琴拖动部分的方法。

如果指定了 accept 选项，将调用 _createAccept() 方法。这遵循将每个手风琴标题与其内容包装在 div 元素中的相同模式。但在这里，我们使整个手风琴小部件sortable()。

这可能看起来反直觉。为什么我们要使希望接受新部分的第二个手风琴可排序？使用 droppable 不是更合理吗？我们可以选择这条路线，但这将涉及大量使用 connectToSortable 选项的工作。这是在 _createTarget() 中指定的 draggable 选项，我们在其中说我们想把这些可拖动的项放到一个可排序的小部件中。在这个例子中，可排序的是第二个手风琴。

这解决了关于相对于其他部分在哪里放置手风琴部分的问题（可排序小部件知道如何处理）。然而，在这种方法中的一个有趣的约束是，我们必须克隆拖动的项目。也就是说，最终被放置到新手风琴中的部分只是一个克隆，而不是原件。因此，我们必须在放置时处理这个问题。

在 _createAccept() 中定义的排序选项的一部分，我们提供了一个 stop 回调。当我们将新的手风琴部分放入手风琴时，将触发这个回调函数。实际上，这对于任何排序活动都会触发，包括新的部分被放置。因此，我们必须小心检查我们实际上正在处理什么。我们通过检查项目是否附有 draggable 类来做到这一点，如果是，我们可以假设我们正在处理一个新的手风琴部分。

请记住，这个新添加的折叠菜单部分只是原始部分的克隆，因此在我们开始将其插入折叠菜单之前，需要发生一些有趣的事情。首先，这个新部分具有与原始部分相同的 ID。最终，我们将从第一个折叠菜单中删除原始部分，因此我们存储了该 ID 以供以后使用。一旦我们获得了它，我们就可以摆脱被删除部分的 ID，以避免重复。

确保完成这一步之后，我们已经在适当的位置放置了新的 DOM 元素，但是折叠菜单部件对此一无所知。这就是我们重新加载标题的地方，包括新添加的标题。新的折叠菜单部分仍然不可用，因为它没有正确处理事件，所以，例如，展开新部分将不起作用。为了避免奇怪的行为，我们关闭所有事件处理程序并重新绑定它们。这样就将新的折叠菜单放在了新的上下文中，而事件则保持开启状态。

现在，我们在 accept-accordion 中有了一个新的部分。但是我们不能忘记原来的部分。它仍然需要被移除。回想一下，我们存储了原始部分的 DOM ID，现在我们可以安全地移除该部分并刷新折叠菜单以调整高度。

第二章：包括自动完成

在本章中，我们将涵盖:

• 用主题样式化默认输入

• 使用选择选项构建数据源

• 使用多个数据源

• 远程自动完成过滤

• 自定义数据和分类

• 将效果应用于下拉菜单

介绍

自动完成 小部件的主要目的是增强标准 HTML 表单 input 元素的功能。用户不必每次输入字段的完整值，自动完成小部件会提供可能的值作为建议。例如，假设您正在添加一个新产品。产品字段可以是文本输入、选择输入等等。在这种情况下，一个人会使用系统中现有的产品作为自动完成小部件的来源。很有可能，输入产品的用户，或者其他用户，之前已经输入过该产品。通过自动完成，用户可以确保他们提供的是有效的输入。

用主题样式化默认输入

默认的自动完成实现不会改变输入元素的任何视觉效果。从功能上讲，我们不希望更改输入元素。我们只需要在用户开始输入时出现下拉组件。但让我们看看是否可以使用小部件框架和主题框架中的组件改变自动完成输入元素的虚拟外观。

准备工作

我们将使用以下标记作为我们的示例，一个简单的 label 元素和一个简单的 input 元素：

div>
    label for="autocomplete">Items: /label>
    input id="autocomplete"/>
/div>

如何做…

我们将使用以下代码使用主题框架中的 CSS 类来扩展自动完成小部件。我们正在引入一个关于焦点事件的微小行为调整。

( function( $, undefined ) {

$.widget( "ab.autocomplete", $.ui.autocomplete, {

    inputClasses: "ui-widget ui-widget-content ui-corner-all",

    _create: function() {

        this._super( "_create" );
        this._focusable( this.element );
        this.element.addClass( this.inputClasses );

    },

    _destroy: function() {

        this._super( "_destroy" );
        this.element.removeClass( this.inputClasses );

    }

});

})( jQuery );

$( function() {

    var source = [
        'First Item',
        'Second Item',
        'Third Item',
        'Fourth Item'
    ];

    $( "#autocomplete" ).autocomplete( { source: source } );

});

完成我们自动完成 input 元素的样式要求的最后一件事是使用一些规则的新 CSS 样式表。样式表应该在定义输入标记的主 HTML 中包含。

input.ui-autocomplete-input {
    padding: 2px;
}

input.ui-autocomplete-input:focus {
    outline: none;
}

这是我们新样式的自动完成小部件在没有焦点时的样子。

这是自动完成在有焦点时的样子，并且下拉菜单已展开。

它是如何工作的…

文档加载时，我们正在创建一个简单的自动完成使用#autocomplete 输入元素。

你会注意到的第一件事是 inputClasses 属性。这个字符串代表了我们想要应用到小部件的主题框架的三个类：ui-widget、ui-widget-content 和 ui-corner-all。ui-widget类除了处理字体外并没有太多作用，将这个类应用到主题化的元素是一个好的做法。ui-widget-content 类为我们修复了输入的边框，而 ui-corner-all 类为我们应用了漂亮的圆角。我们将这个字符串定义为小部件的属性的原因是因为这些类在两个地方使用，这样易于维护。

我们在这里覆盖的 _create() 方法只是调用了自动完成的 _create() 方法的原始实现。一旦这完成，我们通过调用 _focusable() 使input元素可聚焦。这是小部件工厂定义的一个方便的实用方法，并且被所有小部件继承。它通过在元素聚焦时从主题框架中应用 ui-state-focusCSS 类来处理使元素可聚焦。当元素失去焦点时，它也会移除类。也许，_focusable() 最好的部分是小部件工厂机制将在小部件销毁时清理任何焦点事件处理程序。我们自定义的 _create() 实现的最后一个任务是将 inputClasses 的 CSS 类添加到输入元素中。

一如既往，当我们从自动完成小部件中借用完成后，我们需要确保清理干净。这意味着扩展 _delete() 以确保从输入元素中删除 inputClasses 属性。

我们使用的微小 CSS 规则有两个作用。第一个改变是给 input 元素添加一点填充——这纯粹是出于美观考虑，因为我们做的其他改变使得文本在输入框中显得有点紧凑。第二个改变是在焦点集中时删除围绕 input 元素的轮廓。这仅适用于某些浏览器，如 Chrome，在其中会自动应用轮廓。

注意

通常，不建议移除轮廓，因为这会影响可访问性。但是，我们的改动已经考虑到了焦点输入，所以这样做是可以的。

使用选择选项构建数据源

有时，将数组用作自动完成小部件的数据源并不是最佳选择。例如，如果我们的用户界面中已经有一个 select 元素，那么重用该元素中的选项来创建自动完成会是个明智的选择。否则，我们不仅需要设计一些新代码来构建数组数据源，还需要删除现有的 select 元素。

准备工作

让我们为这个例子编写一些基本的标记。通常，自动完成小部件期望一个 input 作为其元素。相反，我们将给它一个带有一些简单选项的 select 元素。

div>
    label for="autocomplete">Items: /label>
    select id="autocomplete">
        option>First Item/option>
        option>Second Item/option>
        option>Third Item/option>
        option>Fourth Item/option>
    /select>
/div>

操作步骤…

我们将扩展自动完成小部件的功能，使其知道如何处理 select 元素。之后，我们就能够使用自动完成小部件来定位我们的 select 元素了。

( function( $, undefined ) {

$.widget( "ab.autocomplete", $.ui.autocomplete, {

    inputClasses: "ui-widget ui-widget-content ui-corner-all",

    _create: function() {

        if ( this.element.is( "select" ) ) {

            var self = this;
            this.original = this.element.hide();
            this.element = $( "" ).insertAfter( this.original );

            this.options.source = function( request, response ) {

                var filter = $.ui.autocomplete.filter,
                    options = self.original.find( "option" ),
                    result = options.map( function() {
                        return $( this ).val();
                    });

                response( filter( result, request.term ) );

            };

        }

        this._super( "_create" );

    },

    _destroy: function() {

        this._super( "_destroy" );
        this.element.remove();
        this.original.show();

    }

});

})( jQuery );

$( function() {
    $( "#autocomplete" ).autocomplete();
});

现在你应该看到的是一个看起来像是普通的自动完成——看不到 select 元素。此外，如果你尝试使用自动完成，你会发现呈现的选项与 select 元素的选项相同。

工作原理…

在这里，我们需要为 select 元素添加对自动完成小部件的支持；我们在自定义的 _create() 实现的开始时执行此操作。如果我们处理的是 select 元素，则我们要做的第一件事是隐藏它并将其引用存储在 original 属性中。记住，我们只对 select 元素通过其 options 提供的数据源感兴趣 – 我们不希望实际显示 select。相反，我们将 select 替换为一个 input 元素，因为这是用户键入的方式，而小部件则完成。

自动完成小部件的 source 选项是我们能够指定返回要使用的源数据的自定义函数的方式。在我们的例子中，我们提供了一个函数，该函数从每个选择 option 获取值。回想一下，select 元素先前存储在 original 属性中。我们在这里使用 jQuery map() 实用程序函数将 select 选项转换为自动完成可以使用的数组。filter() 函数被应用，并且 response() 函数被发送到下拉菜单。

当小部件被销毁时，我们希望恢复原始的 select 元素，因为这是我们替换的元素。在我们自定义的 _delete() 实现中，原始元素再次显示 – 这是在调用原始的 _delete() 方法执行常规清理任务后发生的。我们创建的 input 元素也在这里销毁。

使用多个数据源

有时，自动完成小部件不直接映射到一个数据源。以视频为例。想象一下用户需要选择一个视频，但是两个数据源是 DVD 和蓝光。如果我们要使用自动完成选择视频，我们需要一种方法来分配多个数据源。此外，该机制需要足够灵活，以支持添加更多数据源，特别是因为每隔一年就会诞生一种新的视频格式。

怎么做…

自动完成小部件的默认实现期望一个单一的数据源 – 一个数组或一个 API 端点字符串。我们将给小部件添加一个新的 sources 选项来允许这种行为。这就是我们将扩展自动完成并创建一个具有两个视频数据源的小部件实例 – 一个用于 DVD，一个用于蓝光光盘。

( function( $, undefined ) {

$.widget( "ab.autocomplete", $.ui.autocomplete, {

    options: { 
        sources: []    
    },

    _create: function() {

        var sources = this.options.sources;

        if ( sources.length ) {

            this.options.source = function ( request, response ) {

                var merged = [],
                    filter = $.ui.autocomplete.filter;

                $.each( sources, function ( index, value ) {
                    $.merge( merged, value );
                });

                response( filter( merged, request.term ) );

            };

        }

        this._super( "_create" );

    },

    _destroy: function() {
        this._super( "_destroy" );
    }

});

})( jQuery );

$( function() {
    var s1 = [
            "DVD 1",
            "DVD 2",
            "DVD 3"
        ],
        s2 = [
            "Blu-ray 1",
            "Blu-ray 2",
            "Blu-ray 3"
        ];

    $( "#autocomplete" ).autocomplete({
        sources: [s1, s2]
    });
});

如您所见，如果您开始搜索视频 1，您将在下拉菜单中从每个数据源获得版本。

工作原理…

我们不是在将我们的两个数据源合并到传递给自动完成之前，而是扩展了小部件的功能来处理这项任务。特别是，我们添加了一个新的 sources 选项，该选项可以接受多个数组。在示例中，我们将 DVD 和蓝光源都传递给我们的小部件。

我们的定制版本的 _create() 通过检查 sources 选项的长度来看是否已经提供了多个数据源。如果有多个数据源，我们使用 merge()jQuery 实用函数创建一个新数组，并对其应用filter() 函数。这种方法的一个很好的特点是它不在乎有多少个数据源——我们以后可以传递更多数据源到我们的实现中。这些数据源的合并被封装在小部件后面。

远程自动完成过滤

自动完成过滤功能并不仅限于默认实现，它搜索数组数据源中的对象。我们可以指定一个自定义 source() 函数，该函数将仅检索用户正在寻找的数据。如果您希望在包含数千个项目的数据源上使用自动完成，这是理想的方法。否则，在浏览器上过滤要求会变得过于苛刻——下载大型数据集，然后对每次按键进行大型数组搜索。

如何做…

我们将使用 GitHub API 作为自动完成小部件的数据源。这是一个很好的例子，因为它太大了，无法在浏览器内存中使用。

$( function() {
  $( "#autocomplete" ).autocomplete({
        minLength: 3,
        source: function( request, response ) {
            $.ajax({
                url: "https://api.github.com/legacy/repos/search/:" + request.term,
                dataType: "jsonp",
                success: function( resp ) {
                    var repositories = resp.data.repositories.splice( 0, 10 );
                    var items = $.map( repositories, function ( item ) {
                        return { 
                            label: item.name + "(" + 
                                      item.language + ")",
                            value: item.name
                        };
                    });
                    response( items );
                }
            });
        }
    });
});

现在，如果您在浏览器中查看结果小部件并开始输入，您将在下拉菜单中看到 Github 仓库数据。

它是如何工作的…

由于我们使用了一个大型数据源，我们告诉这个特定的自动完成小部件，只有在至少有三个字符时才应执行项目的搜索。这是使用 minLength 选项来实现的。否则，我们将要求服务器基于一个或两个字符进行查询，这不是我们想要的。

在我们的示例中，source选项指定了我们将要使用的数据源——Github API。我们传递给 source 的函数执行了一个对 Github API 的 $.ajax() 调用。我们使用 jsonp 作为格式，这意味着 API 的回调函数将被发送回来。我们还向 API 传递了一些查询数据。

一旦 API 响应了数据，我们的成功回调函数就会执行。然后, 我们通过 $.map() 实用程序函数将这些数据传递，以便生成自动完成小部件可以理解的数组。我们的成功函数对数据进行简单的$.map()，将其转换为自动完成可以使用的对象数组。

还有更多内容…

我们可以通过在小部件中引入术语缓存来进一步减少网络通信开销。术语缓存，顾名思义，会在本地存储执行远程过滤操作的结果。这样，当用户不可避免地在他们的按键中执行完全相同的操作时，我们不会再次执行相同的任务，并发出远程 API 调用, 因为我们已经在小部件中缓存了结果。

( function( $, undefined ) {

$.widget( "ab.autocomplete", $.ui.autocomplete, {

    _cache: {},

    _search: function( value ) {

        var response = this._response(),
            cache = this._cache;

    this.pending++;
    this.element.addClass( "ui-autocomplete-loading" );
    this.cancelSearch = false;

        if ( value in cache ) {
            response( cache[value] );
        }
        else {
            this.source( { term: value }, response );
        }

    }

});

})( jQuery );

$( function() {
  $( "#autocomplete" ).autocomplete({
        minLength: 3,
        source: function( request, response ) {
            var self = this;
            $.ajax({
                url: "https://api.github.com/legacy/repos/search/:" + request.term,
                dataType: "jsonp",
                success: function( resp ) {
                    var repositories = resp.data.repositories.splice( 0, 10 );
                    var items = $.map( repositories, function ( item ) {
                        return { 
                            label: item.name + "(" + 
                                      item.language + ")",
                            value: item.name
                        };
                    });
                    self._cache[request.term] = items;
                    response( items );
                }
            });
        }
    });
});

您可以在前面的代码中看到我们所做的更改以支持缓存从 HTTP 请求返回的项目。现在我们正在扩展小部件以添加新的 _cache 属性。我们还扩展了 _search() 函数，该函数负责检查缓存值。如果找到一个，就使用缓存版本的数据调用渲染响应。source() 函数负责存储缓存结果，但这只是一个简单的一行代码。

自定义数据和类别

分离两个自动完成数据类别的一种方法可能是拥有两个不同的字段，每个字段都有自己的自动完成小部件。另一种方法是在小部件本身引入类别的概念。当下拉菜单出现为用户建议项目时，他们还将看到项目所属的类别。要在自动完成小部件中执行此操作，我们需要更改小部件如何理解源数据以及如何呈现菜单项。

如何做…

我们将扩展自动完成小部件，以改变菜单项的渲染方式。我们还需要考虑传递给小部件的数据作为源。

( function( $, undefined ) {

$.widget( "ab.autocomplete", $.ui.autocomplete, {

    _renderMenu: function( ul, items ) {

        var that = this,
            currentCategory = "";

        items.sort(function( a, b ) {
            return a.cat > b.cat 
        });

        $.each( items, function( index, item ) {

            if ( item.cat != currentCategory ) {
                that._renderCategory( ul, item );
                currentCategory = item.cat;
            }

            that._renderItemData( ul, item );

        });

    },

    _renderCategory: function( ul, item ) {
        return $( "
" ).addClass( "ui-autocomplete-category" )
                          .html( item.cat )                          
                          .appendTo( ul );
    },

    _renderItem: function( ul, item ) {
        return $( "
" ).addClass( "ui-autocomplete-item" )
                          .append( $( "" )
                          .append( $( "" ).html( item.label ) )
                          .append( $( "" ).html( item.desc ) ) )
                          .appendTo( ul );
    }

});

})( jQuery );

$( function() {

    var items = [
        {
            value: "First Item",
            label: "First Item",
            desc: "A description of the first item goes here",
            cat: "Completed"
        },
        {
            value: "Second Item",
            label: "Second Item",
            desc: "A description of the second item goes here",
            cat: "In Progress"
        },
        {
            value: "Third Item",
            label: "Third Item",
            desc: "A description of the third item goes here",
            cat: "Completed"
        }
    ];

    $( "#autocomplete" ).autocomplete( {source: items} );

});

我们差不多完成了。我们对菜单所做的更改不会神奇地起作用，我们需要应用一些样式。以下 CSS 代码应包含在页面中：

.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
}

.ui-autocomplete-item > a > span {
    display: block;
}

.ui-autocomplete-item > a > span + span {
    font-size: .9em;
}

现在，如果您开始在自动完成中输入，您会注意到下拉菜单与我们所习惯的大不相同，因为它包含类别和描述信息。

如何工作…

此小部件扩展的目标是接受自定义源数据并在下拉菜单的显示中使用该数据。具体而言，我们正在处理的新数据是类别和描述。类别是一对多关系，因此我们传递给小部件的几个项目可能具有相同的类别字符串。我们的工作是弄清楚任何给定类别下的项目，并在下拉菜单中表示此结构。此外，项目的描述是一对一关系，因此此处需要的工作较少，但我们仍然希望在下拉菜单中包含描述。

我们覆盖的原始实现的第一种方法是 _renderMenu()。_renderMenu() 的工作是每次向用户提出建议时更改底层 HTML 结构。我们使用 currentCategory 跟踪当前类别。然后我们使用 _renderItem() 渲染每个项目。

_renderCategory() 函数将类别文本呈现为

$.ui.autocomplete.filter = function( array, term ) {

    var matcher = new RegExp( $.ui.autocomplete.escapeRegex( term ), "i" );

    return $.grep( array, function( value ) {
        return matcher.test( value.cat ) || 
               matcher.test( value.desc ) ||
               matcher.test( value.label )
    });

};

( function( $, undefined ) {

$.widget( "ab.autocomplete", $.ui.autocomplete, {

    _suggest: function( items ) {

        this._resetMenu();
        this._renderMenu( this.menu.element, items );
        this.menu.refresh();

        this._resizeMenu();
        this._positionMenu();

    },

    _resetMenu: function() {

        this.menu.element
                 .empty()
                 .zIndex( this.element.zIndex() + 1 );

    },

    _positionMenu: function() {

        var pos = $.extend( { of: this.element }, this.options.position );
        this.menu.element.position( pos );

    },

    _resizeMenu: function() {

        var menu = this.menu,
            exclude = 0;
            target = Math.max(
                menu.element.width( "" ).outerWidth() + 1,
                this.element.outerWidth()
            ),
            excludeCSS = [
                'borderLeftWidth',
                'borderRightWidth',
                'paddingLeft',
                'paddingRight'
            ];

        if( menu.element.is( ":hidden" ) ) {
            menu.element.css( { display: "block", opacity: 0 } );
        }

        $.each( excludeCSS , function( index, item ) {
            exclude += parseFloat( menu.element.css( item ) );
        });

        if ( menu.element.css( "opacity" ) == 0 ) {
            menu.element.animate({
                width: target - exclude,
                opacity: 1
            }, 300);
        }
        else{
            menu.element.width( target - exclude );
        }

    },

    _close: function( event ) {

        var menu = this.menu;

        if ( menu.element.is( ":visible" ) ) {

            menu.element.fadeOut();
            menu.blur();
            this.isNewMenu = true;
            this._trigger( "close", event );

        }

    }

});

})( jQuery );

$(function() {
    var source = [
        "First Item",
        "Second Item",
        "Third Item",
        "Fourth Item"
    ];
    $( "#autocomplete" ).autocomplete({
        source: source,
    });
});

(function( $, undefined ) {
    
}); 

div>
    input type="checkbox" id="first" />
    label for="first">Item 1/label>
    input type="checkbox" id="second" />
    label for="second">Item 2/label>
    input type="checkbox" id="third" />
    label for="third">Item 3/label>
    input type="checkbox" id="fourth" />
    label for="fourth">Item 4/label>
/div>

$(function() {

    $( "input" ).button( { icons: { primary: "ui-icon-bullet" } } );

    $( "input" ).change( function( e ) {

        var button = $( this );

        if ( button.is( ":checked" ) ) {

            button.button( "option", {
                icons: { primary: "ui-icon-check" } 
            });

        }
        else {

            button.button( "option", {
                icons: { primary: "ui-icon-bullet" } 
            });

        }

    });

});

div>
    input type="radio" id="first" name="items" />
    label for="first">Item 1/label>
    input type="radio" id="second" name="items" />
    label for="second">Item 2/label>
    input type="radio" id="third" name="items" />
    label for="third">Item 3/label>
    input type="radio" id="fourth" name="items"/>
    label for="fourth">Item 4/label>
/div>

$(function() {
    $( "div" ).buttonset();
});

(function( $, undefined ) {

$.widget( "ab.buttonset", $.ui.buttonset, {

    options: {
        exploded: false
    },

    refresh: function() {

        this._super("refresh");

        if ( !this.options.exploded ) {
            return;
        }

        var buttons = this.buttons.map(function() {
            return $( this ).button( "widget" )[ 0 ];
        });

        this.element.addClass( "ui-buttonset-exploded" );

        buttons.removeClass( "ui-corner-left ui-corner-right" )
               .addClass( "ui-corner-all" );

    }

});

})( jQuery );

$(function() {
    $( "div" ).buttonset( { exploded: true } );
});

.ui-buttonset-exploded .ui-button {
    margin: 1px;
}

div>
    button style="display: block;">Button 1/button>
    button style="display: block;">Button 2/button>
    button style="display: block;">Button with longer text/button>
/div>

$(function() {
    $( "button" ).button();
});

(function( $, undefined ) {

$.widget( "ab.button", $.ui.button, {

    options: {
        matchWidth: false
    },

    _create: function() {

        this._super( "create" );

        if ( !this.options.matchWidth ) {
            return;
        }

        this.element.siblings( ":" + this.widgetFullName )
                    .addBack()
                    .button( "refresh" );

    },

    refresh: function() {

        this._super( "refresh" );

        if ( !this.options.matchWidth ) {
            return;
        }

        var widths = this.element
                         .siblings( ":" + this.widgetFullName )
                         .addBack()
                         .children( ".ui-button-text" )
                         .map(function() {
                            return $( this ).width();
                         }),
            maxWidth = Math.max.apply( Math, widths ),
            buttonText = this.element.children( ".ui-button-text" );

        if ( buttonText.width()  maxWidth ) {
            buttonText.width( maxWidth );
        }

    }

});

})( jQuery );

$(function() {
    $( "button" ).button( { matchWidth: true } );
});

(function( $, undefined ) {

$.widget( "ab.button", $.ui.button, {

    options: {
        matchWidth: false
    },

    _create: function() {

        this._super( "create" );

        if ( !this.options.matchWidth ) {
            return;
        }

        this.element.siblings( ":" + this.widgetFullName )
                    .addBack()
                    .button( "refresh" );

    },

    _destroy: function() {
        this._super();
        this.element.css( "text-align", "" );
    },

    refresh: function() {

        this._super( "refresh" );

        if ( !this.options.matchWidth ) {
            return;
        }

        var widths = this.element
                         .siblings( ":" + this.widgetFullName )
                         .addBack()
                         .children( ".ui-button-text" )
                         .map(function() {
                            return $( this ).width();
                         }),
            maxWidth = Math.max.apply( Math, widths ),
            buttonText = this.element.children( ".ui-button-text" );

        if ( buttonText.width()  maxWidth ) {
            buttonText.width( maxWidth );
            this.element.css( "text-align", "left" );
        }

    }

});

})( jQuery );

$(function() {
    $( "button" ).button( { matchWidth: true } );
});

ul>
    li>a href="#">Button 1/a>/li>
    li>a href="#">Button 2/a>/li>
    li>a href="#">Button 3/a>/li>
/ul>

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 4px;
}

$(function() {
    $( "a" ).button();
    $( "ul" ).sortable({
        opacity: 0.6
    });
});

div>
    button>Button 1/button>
    button>Button 2/button>
    button>Button 3/button>
/div>

(function( $, undefined ) {

$.widget( "ab.button", $.ui.button, {

    options: {
        animateHover: false 
    },

    _create: function() {

        this._super( "create" );

        if ( !this.options.animateHover ) {
            return;
        }

        this._off( this.element, "mouseenter mouseleave" );

        this._on({
            mouseenter: "_mouseenter",
            mouseleave: "_mouseleave"
        });

    },

    _mouseenter: function( e ) { 
        this.element.stop( true, true )
                    .addClass( "ui-state-hover", 200 );
    },

    _mouseleave: function( e ) {
        this.element.stop( true, true )
                    .removeClass( "ui-state-hover", 100 );
    }

});

})( jQuery );

$(function() {
    $( "button" ).button( { animateHover: true } );
});

div>
    button class="play">Play/button>
    button class="pause">Pause/button>
    button class="stop">Stop/button>
/div>

div>
    br/>
    a href="#" class="no-icons">no icons/a>
    br/>
    a href="#" class="icons">icons/a>
/div>

(function( $, undefined ) {

$.widget( "ab.button", $.ui.button, {

    options: {
        icon: true
    },

    _hiddenIcons: {},

    _setOption: function( key, value ) {

        if ( key != "icon" ) {
            this._superApply( arguments );
            return;
        }

        if ( !value && !$.isEmptyObject( this.options.icons ) ) {
            this._hiddenIcons = this.options.icons;
            this._super( "text", true );
            this._super( "icons", {} );
        }
        else if ( value && $.isEmptyObject( this.options.icons ) ) {
            this._super( "icons", this._hiddenIcons );
        }

    },

    _create: function() {

        if ( !this.options.icon ) {
            this._hiddenIcons = this.options.icons;
            this.options.icons = {};
        }

        this._superApply( arguments );

    }

});

})( jQuery );

$(function() {

    $( "a.no-icons" ).click( function( e ) {
        e.preventDefault();
        $( "button" ).button( "option", "icon", false );
    });

    $( "a.icons" ).click( function( e ) {
        e.preventDefault();
        $( "button" ).button( "option", "icon", true );
    });

    $( "button" ).button( {text: false} );

    $( ".play" ).button( "option", {
        icons: { primary: "ui-icon-play" }
    });

    $( ".pause" ).button( "option", {
        icons: { primary: "ui-icon-pause" }
    });

    $( ".stop" ).button( "option", {
        icons: { primary: "ui-icon-stop" } 
    });

});