jquery - 使用 jQuery Mobile 自定义图像按钮

Question

我正在尝试为我的第一个移动应用程序构建一个界面，并且该应用程序必须在 Android 和 Windows Phone 上运行，因此我使用 PhoneGap + jQuery Mobile。

设计我正在使用的 UI Appery .

我需要做的是有一个类似全屏切换按钮的东西，上面有一个自定义图像。

我有 3 份图像副本，每种状态各一份。

假设我有:

• 打开状态的图像 on.png
• 关闭状态的图像 off.png
• 在用户释放按钮之前一直显示 Image Pressed.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>

Answer 1

工作示例: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");
    });    
});