jquery - 如何使用 jQuery UI 设置按钮的颜色？

Question

我的 HTML 页面中有两个按钮。我已将 jQuery UI 主题添加到我的页面中。不过，我的按钮有不同的颜色。顶部按钮从 jQuery UI 继承颜色，而底部按钮从页面中定义的自定义主体 CSS 继承颜色。

这是我的两个按钮的 HTML:

<button id="housekeeping" style="float:left; margin-left:30px">HouseKeeping</button>
<button id="Front Desk" style="margin-left:178px; margin-top:0px">Front Desk</button>

如何解决？

如何将 jQuery 按钮 UI 样式添加到 Front Desk 按钮？

.frontdesk{
margin-left:178px;
margin-top:0px;
}

div.ui-datepicker{
    font-size:10px;
}
.ui-datepicker {
    width: 16em;
}

 body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
    #tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
    #tabs li { float:left; margin-left:4px; display:block; padding:10px; !important background-color:#8AE62E; margin-right:0px;}
    #tabs li a { color:#fff; !important text-decoration:none; }
    #tabs li.current { background-color:#C16CC1; !important height:18px}
    #tabs li.current a { color:#000; !important text-decoration:none; }
    #tabs li a.remove { color:#f00; !important margin-left:10px;}
    #content { background-color:#e1e1e1; !important}
    #content p { margin: 0; padding:20px 20px 100px 20px;}

    #main { width:1050px; height:500px; margin:0px auto; overflow:hidden;background-color:#F6F6F6; !important margin-top:0px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:0px;}
    #wrapper, #doclist { float:left; margin:0 0px 0 0;}
    #doclist { width:150px; border-right:solid 1px #dcdcdc;}
    #doclist ul { margin:0; list-style:none;}
    #doclist li { margin:10px 0; padding:0;}
    #documents { margin:0; padding:0;}

    #wrapper { width:1200px; margin-top:0px;}

    #header{ background-color:#F6F6F6; !important width:900px; margin:0px auto; margin-top:0px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px; position:relative;}
    #header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}


a:link {
color:#042953;
font-size:10px;
font-weight:700;

}   


/*demo styles*/
    body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
    fieldset { border:0; margin: 0px 0 0 0;}    
    label,select,.ui-select-menu { float: left; margin-left:12px; margin-right: 10px; }
    select { width: 140px; }

    /*select with custom icons*/
    body a.customicons { height: 2.8em;}
    body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
    body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
    body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; }
    body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
    body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; }

Answer 1

您需要覆盖 jQuery UI 样式。

你可以在 css 中做这样的事情，但这必须在 jQuery UI css 之后加载!

.frontdesk{
    margin-left:178px;
    margin-top:0px;
    color: red;
}

并进入您的 html:

<button id="Front Desk" class="frontdesk">Front Desk</button>

或者您可以像这样使用 jQuery css 设置您的按钮，而无需在您的 css 中使用类:

$(document).ready(function(){

    $('.frontdesk).css('margin-left', '178px').css('margin-top', '0').css('color', 'red');

});