发布在：jQuery UI > 小部件工厂

使用类 Option

从 1.12 版本开始，jQuery UI 小部件工厂包括一种通过 classes 选项 管理 CSS 类名称的方法。本文将概述 classes 选项的工作原理，并讨论如何使用它。

链接 语法概述

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

1
2
3
4
5
6
7
8
9
10
 
<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"。您可以通过在对象的 value 中包含多个空格分隔的类名称来关联多个类名称。例如，以下代码创建一个仍然有圆角的红色对话框

1
2
3
4
5
6
7
8
9
10
 
<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://jqueryui-api.jqueryjs.cn/dialog/#theming。

classes 选项与任何其他小部件工厂选项类似，这意味着所有小部件工厂选项机制仍然适用。例如，以下代码使用 option() 方法 删除当前与 ui-dialog 类名称关联的所有类名称

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

而以下内容创建一个小部件扩展，该扩展自动将custom-red类与ui-dialog类关联

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<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 对话框

1
2
3
4
5
6
7
8
 
$.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 框架一起使用一样。