jQueryUI的按鈕：如何更改按鈕圖標「色」

我在下面的方式放置在HTML按鈕一個DIV內：jQueryUI的按鈕：如何更改按鈕圖標「色」

<div class="ui-state-highlight"> 
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary"> 
     <!-- first span --> 
     <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span> 
     <!-- second span --> 
     <span class="ui-button-text">Save</span> 
    </button> 
    <!-- third span --> 
    <span class="ui-icon ui-icon-info"></span> 
    <strong>All</strong> form fields are required. 
</div>

由於DIV分配與類：ui-state-highlight按鈕的圖標顏色已更改爲藍色。

有沒有辦法可以將圖標顏色還原爲：默認（黑色）顏色？

而且進一步，我需要在第三跨度的圖標有ui-state-highlight效果（彩色）。

我試過應用ui-state-default，只是到第一個範圍（包含圖標），但沒有給出預期的效果。

來源

2013-03-01 dan

重新編寫適用於容器中的ui-state-highlight類（如的div和跨越）修復問題。

來源

2013-03-04 09:00:24 dan

您可以添加新的風格，將路徑圖像默認（黑色）圖標顏色（http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_2e83ff_256x240.png）

編輯：

或修改外層div類UI狀態默認：

<div class="ui-state-default"> 
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary"> 
     <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span> 
     <span class="ui-button-text">Save</span> 
    </button> 
</div>

來源

2013-03-01 10:20:55

感謝您的回覆。我在我的列表中錯過了一件事。在同一個* div *裏面包含另一個* span *，它顯示了一個不同的圖標，但必須使用'ui-state-highlight'（藍色托盤）。如果我給給定的* png重新着色，我會放棄這種效果，不是嗎？ – dan 2013-03-01 10:29:35

簡單的方法是一類添加到您的按鈕（不同顏色），然後有一些CSS覆寫jQuery的UI CSS。

var $button = $(document.createElement('a')); 
//add class 
$button.addClass('redButton'); 
//call the jquery-ui button function 
$button.button();

CSS

.ui-button.redButton { 
    background-color: red; 
} 
.ui-button.greenButton { 
    background-color: green; 
}

來源

2013-03-01 10:24:34 Amrendra

定義自己的風格，就像這樣：

.ui-icon-custom { background-image: url(images/custom.png); }

然後打電話時.button（），像這樣只是用它：

$('#button').button({ 
    label: 'Test', 
    icons: {primary: 'ui-icon-custom', secondary: null} 
});

這假定您的自定義圖標在images下的CSS文件夾......和jQuery UI圖標地圖通常一樣。當圖標的創建它得到這樣一個類：class =「UI圖標UI圖標定製」，以及UI圖標類看起來是這樣的（可能是不同的圖像，這取決於主題）：

.ui-icon { 
    width: 16px; 
    height: 16px; 
    background-image: url(images/ui-icons_222222_256x240.png); 
}

所以在你的風格你只是替代在背景圖片，如果需要更改寬度，高度等

來源

2013-03-01 10:32:50 gangakvp

感謝您的回覆。請你確認我遵循的步驟。 ** [步驟01] **創建了一個'ui-icons_454545_256x240.png'作爲jQuery UI圖標地圖的相同位置，並將其重命名爲'custom.png' ** [步驟02] **創建了類'.ui-icon-custom'在我的網站css * ** [步驟03] **調用$（'＃button'）。button（）'例程。畢竟，我仍然得到*藍色*圖標。我錯過了什麼？再次感謝。 – dan 2013-03-01 11:42:46

而且這個解決方案是否覆蓋了應用於父* div *的'ui-state-highlight'的樣式僅適用於這個範圍？稍後我稍微改變了我的原始問題:) – dan 2013-03-01 12:04:49

jQueryUI的按鈕：如何更改按鈕圖標「色」

回答

相關問題