Question

我正在尝试为我的第一个移动应用程序构建一个界面，该应用程序必须同时适用于Android和Windows Phone，因此我使用的是PhoneGap + jQuery Mobile。

设计我正在使用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");
    });    
});

使用jQuery Mobile自定义图像按钮

1 个答案: