如何向jQuery主题添加新的按钮类

时间:2012-04-19 19:41:16

标签: addclass jquery-ui-button

我是jQuery的新手所以请耐心等待。我想添加一个单独的按钮类,但不能使悬停和默认值一起工作为新的按钮类。 ui-button-blue是默认设置,使用蓝色渐变背景图像。 ui-button-orange是悬停,使用橙色渐变背景图像。

我可以强制新的默认蓝色按钮正确显示,通过重置ui-button-blue的css属性作为我主题的默认ui-button属性 - 但悬停只应用border属性(橙色)和不是新的橙色背景图片。

我可以通过将ui按钮重置回主题默认值来使ui-button-orange(悬停)工作。

如果ui按钮设置为主题默认值,则此css使按钮橙色悬停:

.ui-state-hover, 
.ui-button-orange { 
    border: 1px solid #ff7f00; 
    height: 24px; 
    display: inline-block; 
    position: relative; 
    padding: 0px 0px 0px 0px; 
    margin-right: .1em; 
    text-decoration: none !important; 
    cursor: pointer; 
    text-align: center; 
    zoom: 1; 
    overflow: hidden; 
    *overflow: visible; 
    background-image: url(images/ but_01_orange.png); 
    background-repeat:repeat-x; 
    color:#fff; 
}

但我不能让他们一起工作。我已经尝试了一些自定义的.js来覆盖jQuery css和.js,但也无法让它工作。

$(document).ready(function() {
    $("button").button();
    $("button").hover(
        function () {
            $(this).removeClass();
           $(this).addClass('ui-button-orange ui-widget ui-state-default ui-corner-all  ui-button-text-only ui-button-blue');//hover
        },
        function () {
            $(this).removeClass();
            $(this).addClass('ui-button-blue ui-widget ui-state-default ui-corner-all ui-button-text-only-ui-button-blue');
        }
    );
});

0 个答案:

没有答案