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

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