单页上具有多种样式的 jQueryUI 按钮答案

【问题标题】：jQueryUI button with multiple styles on single page单页上具有多种样式的 jQueryUI 按钮
【发布时间】：2013-08-15 13:15:19
【问题描述】：

我想在单个页面上使用多个按钮，但我希望一组具有一种样式（例如红色）和另一组具有不同样式（例如灰色背景和红色前景色）。

有没有可能？

【问题讨论】：

【解决方案1】：

是的，你可以。这样做的方法是在下载 ui 时使用 css scope 选项 - http://jqueryui.com/download/

只需包含框架，并包含具有不同样式的两个样式表。确保应用不同的 CSS 范围（例如 .light-style 和 .dark-style）。

接下来，在您的 html 中，每当您显示按钮时，将适当的 CSS 范围添加到父元素，以便选择正确的样式。

您还可以手动组合两个样式表以节省空间。这是假设您只需要两种不同的按钮样式。

【讨论】：

在大多数情况下，这比我的解决方案还要好。 :-)
这听起来很不错。但是现在我决定只通过 CSS w/o jQ UI.button() 来设置简单按钮的样式，因为我发现它更灵活（我可以使用精灵作为按钮图标，在悬停时更改它们等），我的 CSS 文件是体积更小。

【解决方案2】：

在此处阅读主题部分：http://api.jqueryui.com/button/

您可以随时添加额外的类来更改样式。所以在一个元素上调用 button() 之后，你可以：

$(element).removeClass("ui-button-text");
$(element).addClass("ui-button-text-2");

当然，您需要为此定义自己的 CSS 类：

.ui-button-text-2 { color: red; }

这当然很笨拙，因为您需要使用两个调用而不是单个 button() 调用。但是 jQuery 可以扩展——你可以简单地创建一个接受额外参数的$.themedbutton() 方法...

【讨论】：