使用 classes 选项

从 1.12 版本开始，jQuery UI 部件工厂（widget factory）包含一种通过 classes 选项管理 CSS 类名的方法。本文将概述 classes 选项的工作原理，并讨论您可以使用它做什么。

link 语法概述

classes 选项用于将结构类名映射到您定义的主题相关类名。为了理解这意味着什么，让我们看一个示例。下面的代码使用 classes 选项创建一个红色对话框

<style>
    .custom-red { background: red; }
</style>
<script>
    var dialog = $( "<div>Red</div>" ).dialog({
        classes: {
            "ui-dialog": "custom-red"
        }
    });
</script>

在这里，展示性的 custom-red 类名与结构性的 ui-dialog 类名相关联。现在，每当对话框应用 ui-dialog 类名时，它也会添加 custom-red 类名。然而，这里发生了一些不那么明显的事情，不仅仅是添加了 custom-red 类。此代码还删除了现有的默认值 "ui-corner-all"。您可以通过在对象值中包含多个空格分隔的类名来关联多个类名。例如，下面的代码创建一个既是红色又具有圆角边框的对话框

<style>
    .custom-red { background: red; }
</style>
<script>
    var dialog = $( "<div>Big and red</div>" ).dialog({
        classes: {
            "ui-dialog": "ui-corner-all custom-red"
        }
    });
</script>

注意：要获取可与 classes 选项一起使用的类名完整列表，请查看您感兴趣的 jQuery UI 部件的 API 文档。例如，这是对话框宽度类的列表：https://api.jqueryui.com.cn/dialog/#theming。

classes 选项的工作方式与其他部件工厂选项一样，这意味着所有部件工厂选项机制仍然适用。例如，下面的代码使用 option() 方法来删除当前与 ui-dialog 类名相关联的所有类名

dialog.dialog( "option", "classes.ui-dialog", null );

下面创建一个 部件扩展，它自动将 custom-red 类与 ui-dialog 类相关联

<style>
    .custom-red { background: red; }
</style>
<script>
    $.widget( "custom.dialog", $.ui.dialog, {
        options: {
            classes: {
                "ui-dialog": "ui-corner-all custom-red custom-big"
            }
        }
    });
    $( "<div>Big and red</div>" ).dialog();
</script>

作为额外的好处，当部件被销毁时，部件工厂也会删除 classes 选项中指定的任何类名。

link 主题化

如前所述，classes 选项提供了一种将主题相关类名与部件中使用的结构类名相关联的快捷方式。这种方法适用于简单情况，但它也可以用于使第三方主题与使用部件工厂构建的部件一起使用。例如，如果您同时使用 Bootstrap 和 jQuery UI，您可以使用以下代码创建一个使用 Bootstrap 主题的 jQuery UI 对话框

$.extend( $.ui.dialog.prototype.options.classes, {
    "ui-dialog": "modal-content",
    "ui-dialog-titlebar": "modal-header",
    "ui-dialog-title": "modal-title",
    "ui-dialog-titlebar-close": "close",
    "ui-dialog-content": "modal-body",
    "ui-dialog-buttonpane": "modal-footer"
});

有关此方法的更多示例，请查看 Alexander Schmitz 的仓库，该仓库使用 classes 选项使 jQuery UI 与 Boostrap 兼容。

link 结论

classes 选项的引入使我们在结构类和主题相关类之间的分离上又迈进了一步，使得 jQuery UI 部件更容易匹配您现有网站的外观和感觉。同时，这也使得 jQuery UI 可以与其他 CSS 框架一起使用，就像 jQuery 可以与其他 JavaScript 框架一起使用一样。