单页上有多个样式的jQueryUI按钮

Question

我想在单页上使用几个按钮，但我希​​望有一个组有一种风格（例如红色），另一组有不同风格（例如灰色背景和红色前色）。

有可能吗？

Answer 1

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

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

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

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

Answer 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()方法......