Question

有没有办法使用jquery ui主题滚轮或其他方式为按钮创建多个样式（特别是jquery ui按钮）？如果你看看生成的主题 - 它似乎只允许一个按钮样式。

关键词是“jquery ui”;我理解如何在css中执行此操作，但使用jquery ui有助于保持小部件/ css的良好运行。

Answer 1

是的，您可以使用一个jQuery UI主题创建多个样式。在下面的示例中，我有3个不同的按钮，每个按钮具有不同的颜色，并且都使用相同的默认UI主题。为此，您需要重新定义正在使用的元素的UI CSS类。例如，要使按钮使用UI样式，您需要包含类名ui-state-default。请注意，在此示例中，我为所有按钮包含了相同的类。要覆盖特定按钮的UI类，我们通过向其添加另一个类来引用该按钮，然后在我们的css中对其进行样式设置并将其标记为重要。这将覆盖您正在使用的类的UI样式。

<button class="ui-state-default one">button one</button>
<button class="ui-state-default two">button two</button>
<button class="ui-state-default three">button three</button>

button{
    width:200px;
    height:50px;
    display:block;
    margin:10px;
}

.two{
    background: orange url(http://www.cyrilsframing.com.au/picts/menu.gif) repeat-x 0 0 !important;
    border:1px solid red!important;
}

.three{
    background: orange url(http://cmshuts.com/picts/background-menu-horz.gif) repeat-x 0 0 !important;
    border:1px solid yellow!important;
}

在http://jsfiddle.net/7vvhj/2/

查看工作示例

有关如何使用jQuery UI设置元素样式的更多信息，请查看以下2个链接

http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework

Answer 2

我最近一直试图这样做，最后选择了一个基本主题，为不同的按钮创建了新的样式（例如：对于保存按钮，请参阅下面的样式）你只需要添加类“保存按钮”到按钮（在我的情况下，我使用锚点作为按钮）

a.save-button
{
    background-image:none;
    border: 1px solid #FF0000;
    background-color:#FC8C8C;
    color:#FFFFFF;
}
a.save-button:hover
{ 
    border: 1px solid #FF0000;
    background-color:#FDB7B7;
    color:#000000;
}

<强>更新

我只需要再次这样做，除了满足按钮的渐变;我这样做是通过创建一个新的主题，然后复制渐变（..hard ..和..soft ..）并重命名它们以免与主题混淆，即当它们得到更新...然后只是添加按钮的类，类似于上面....

a.green-button
{
    background: url(Images/GreenBGHardGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:hover
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:active
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}

Answer 3

您可以使用“按钮”小部件，然后将状态类从“ui-state-default”更改为其他内容[即'ui-state-error'或'ui-state-highlight']。但是，这些状态看起来不像实际按钮而是默认状态。

$("button").button().addClass('ui-state-highlight');

示例： http://jsfiddle.net/dochoffiday/Kg5qn/

此外，您可以通过引入UI“范围”在页面上使用多个jQuery UI主题，如Filament Group所示：

http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

Answer 4

假设您已经为各种按钮主题创建了多个类，我认为您可以更改按钮的标记，您可以在其中更改类以匹配各种按钮主题。

我没有对此进行测试，只是试图指出你正确的方向： - ）

Answer 5

您需要注意的一件事是.ui-state-default风格。

我在对话框中有按钮，由于某种原因，在打开第二个对话框时会将.ui-state-default应用于它们。我假设对话框小部件正在尝试将状态重置为默认状态，这也适用于按钮。

方法1：

无论如何，我认为最简单的方法是将!important放在样式上，以防止此默认状态（来自主题滚筒样式）优先。

a.green-button
{
    background-color:#FFFFFF !important;
    border: 1px solid #132b14 !important;
    color:#132b14 !important;
}

方法2：

或者你可以应用这样的风格，这样就可以为这种风格提供更多的点数而不需要！重要的是：

a.green-button, a.ui-state-default.green-button
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}

如果我不使用!important，这是覆盖我的风格的原始css：

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }

如何使用jquery ui创建多个按钮样式？

5 个答案:

在http://jsfiddle.net/7vvhj/2/