在jQuery UI中更改單選按鈕圖像

2

理想的情況下使用，您將要使用的ThemeRoller如果你能擺脫它。但是，如果您想要完全自定義的東西，例如使用自定義圖像背景和自定義圖標，同時仍保留jQuery UI按鈕的功能，您仍然可以。它只需要更多的工作來覆蓋默認的jQuery UI CSS樣式並創建一些新的樣式。

例如：

enter image description here

右邊的按鈕是的ThemeRoller風格的一個jQuery UI按鈕，而在左側的按鈕仍然是一個jQuery UI按鈕，但使用自定義圖標和背景。以下是你需要做的，完成一個自定義按鈕是什麼：

開始與背景和你的圖標圖片：

enter image description here

這裏是你將需要創建CSS：

.house{ 
    background-image: url("./yourIconImage.png") !important; 
    width: 45px !important; 
    height: 45px !important; 
    margin-left: -22px !important; 
    margin-top: -22px !important; 
} 

#houseLabel.ui-state-active 
{ 
    background-repeat: no-repeat; 
    background-position: 0px -120px; 
} 


.background 
{ 
    width: 60px !important; 
    height: 60px !important; 
    background-image: url("./yourBackgroundImage.png") !important; 
    border: 0px solid black !important; 
    background-position: 0px 0px; 
} 

.background:active 
{ 
    background-repeat: no-repeat; 
    background-position: 0px -120px !important; 
} 
.background:hover 
{ 
    background-repeat: no-repeat; 
    background-position: 0px -60px; 
}

然後在您的JavaScript創建按鈕時：

$("#button").button({ 
     text: false, 
     icons: { 
      primary: "house" 
     } 
    }); 
    $("#button").next(".ui-button").addClass("background").attr('id', 'houseLabel');

有了這個，你的＃按鈕看起來就像左邊的自定義樣式按鈕。當然，您必須通過指定正確的圖像和尺寸來調整此代碼以適應您的資源。

來源

2012-03-21 17:45:12

+0

thx，這是很多的幫助 – mfadel 2012-03-21 18:11:52

+0

@FaddelHomsi沒問題，如果我的答案幫助你，請考慮upvoting或接受它。謝謝。 – 2012-03-21 18:32:36

1

這不是圖像。它正在與css完成。

只需更改類的CSS。

class="ui-button-text" - 按鈕內的文本。
class= "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"

或更改與theme roller，如果你不知道什麼css是丟失容易的主題。
請注意，您需要使用您自己的本地css文件。

來源

2012-03-21 17:18:48 gdoron

+0

你的意思是，我可以不使用我們的設計師製作的圖像？ – mfadel 2012-03-21 17:35:06

+0

@FaddelHomsi。您可以。而不是按鈕，把你的圖像。 – gdoron 2012-03-21 17:36:56

0

你應該去themeroller page，選擇您想要的顏色，並下載CSS文件在你的應用程序

來源

2012-03-21 17:20:26

+0

themeroller不能讓我完全自定義單選按鈕集 – mfadel 2012-03-21 18:16:04

0

我發現了一個簡單的解決方案，這是使用的div並將其分配值，以同樣的方式單選按鈕作品

我更熟悉這比使用jQuery UI的

來源

2012-04-06 05:26:23 mfadel

在jQuery UI中更改單選按鈕圖像

回答

相關問題