1

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

为了设计我正在使用Appery的 UI 。

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

我有 3 个图像副本，每个状态一个。

假设我有：

  • 开启状态的图像 on.png
  • 关闭状态的图像 off.png
  • 图像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>
4

1 回答 1

4

工作示例：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-13T19:05:51.317 回答