如何用jQuery UI設置Button的顏色？

我在我的HTML頁面中有兩個按鈕。我已將jQuery UI主題添加到我的頁面中。不過，我的按鈕有不同的顏色。頂部位置Button繼承jQuery UI的顏色，而下方的位置來自頁面中定義的自定義正文CSS。如何用jQuery UI設置Button的顏色？

這裏是我的兩個按鈕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; }

來源

2014-05-11 user3622611

你不能在ID空間。替換ID =「前臺」與ID =「前臺」 –

至於你說的：

榜首位按鈕從jQuery UI的繼承顏色，而向下地方是從頁

定義的自定義身體CSS這意味着你有一個ID在自定義的身體CSS命名Front Desk被重寫的JQuery UI CSS 所以，快速解決方案是，在您的自定義CSS中找到id，然後將其刪除或將其他某個ID名稱提供給第二個按鈕。下面一行

或

添加在您的JS

$("#front").button();

爲按鈕的代碼

<button id="front" style="margin-left:178px; margin-top:0px">Front Desk</button>

來源

2014-05-11 10:56:30 mrdeveloper

我改了id，還是同樣的問題 – user3622611

沒有用 – user3622611

你需要重寫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'); 

});

來源

2014-05-11 10:18:43

顏色不會改變爲jQuery的UI使用css – user3622611

編輯答案與coor改變@ user3622611 –

我需要添加相同顏色的jquery ui css。因爲其他在頁面中的CSS它不會來..如何做到這一點？ – user3622611

如何用jQuery UI設置Button的顏色？

回答

相關問題