jQuery Mobile自定義圖像按鈕

我想爲我的第一個移動應用程序構建一個接口，並且該應用程序必須在Android和Windows Phone上都可以使用，所以我使用的是PhoneGap + jQuery Mobile。jQuery Mobile自定義圖像按鈕

要設計我使用Appery的UI。

我需要做的就是擁有像全屏切換按鈕和自定義圖像的東西。

我有3份圖像，每種狀態一份。

比方說，我有：

爲開啓狀態
圖片off.png爲關閉狀態
圖片pressed.png圖片on.png中顯示，直到用戶釋放按鈕

我使用此代碼顯示在按鈕上的第一個圖像：

$("[name='toggleOnOff']").text("").append("<img height=\"300\" src=\"off.png\" width=\"280\"/>").button();

但我不知道如何做不同的狀態來定製我的按鈕。

我試過ThemeRoller但它只是讓我改變按鈕的顏色，這不是我所需要的。

編輯：這是該按鈕的HTML：

<a data-role="button" name="toggleOnOff" dsid="toggleOnOff" class=' mobilebutton2' 
    id='j_5' data-corners="true" data-mini="false" data-theme="a" tabIndex="2"> 
    Button 
</a>

來源

2013-05-13 StepTNT

向我們展示你正在試圖改變按鈕的HTML。 – Gajotres 2013-05-13 12:54:40

添加了該按鈕的代碼。 – StepTNT 2013-05-13 12:57:09

您可以使用JS變量或CSS類來定義狀態。可以設置一個值，例如..「狀態」變量關閉/打開/按下或使用addClass/removeClass添加/刪除.on/.off/.pressed類。然後，您可以將背景圖像設置爲CSS或使用.append就像結合一系列'if'語句來確定要添加/刪除哪個圖像 – Calvin 2013-05-13 14:09:14

工作例如：http://jsfiddle.net/Gajotres/GFnyg/

HTML：

<a data-role="button" class="toggleOnButton" id='toggleButton' data-corners="true" data-mini="false" data-theme="a" tabIndex="2"></a>

CSS：

.toggleOnButton { 
    width: 280px !important;  
    height: 300px !important; 
    background: transparent url('http://www.projectpuppylove.org/wp-content/uploads/2013/01/cropped-puppy_vet.jpg') no-repeat center center !important; 
} 

.toggleOffButton { 
    background: transparent url('http://www.strawberryreef.com/images/Accessories/G4animals/cat2_pink.jpg') no-repeat center center !important; 
} 

.toggleOnButton:active { 
    background: transparent url('http://talliscountry.co.uk/uploads/Small%20Pets.jpg') no-repeat center center !important; 
}

的Javascript：

$(document).on('pagebeforeshow', '#index', function(){ 
    $("#toggleButton").on("click", function(){ 
     $(this).toggleClass("toggleOffButton"); 
    });  
});

來源

2013-05-13 19:05:51 Gajotres

它的工作原理！+1爲圖像：D只是一個小方面的問題：如果我想這個圖像的大小是相對於屏幕的分辨率？我試着用'寬度：90％！重要;身高：70％！重要;'沒有成功！ – StepTNT 2013-05-14 16:01:21

你想要按鈕是相對於屏幕分辨率或圖像，因爲圖像只是按鈕背景？ – Gajotres 2013-05-14 16:12:21

對不起，我正在談論按鈕！你的css非常適合320x480的屏幕，但在400x800的屏幕上並不是那麼好（至少根據Appery的預覽！） – StepTNT 2013-05-14 16:17:40

jQuery Mobile自定義圖像按鈕

回答

相關問題