1

我试图在点击 JqueryMobile 中的按钮时获得按下按钮的效果。我可以使用 css 添加类以在单击按钮时获得此效果，但它不会恢复到以前的状态（发布时）。

下面是我的 index.html 代码：

<div class="loginbutton" id="sgninBtn">  </div>

下面是我获得按钮效果的脚本代码：

$(document).on("click", "#sgninBtn", function() {    
$("#sgninBtn").addClass('loginbuttonclick');  
});    

$(document).on("taphold", "#sgninBtn", function() {
$("#sgninBtn").addClass('loginbuttonpressed');
});

下面是我获得按钮效果的css代码： 

.loginbutton {width:300px; height:48px; background:url(../images/samplespriteimage-login.png) 0 0px;}
.loginbuttonpressed {width:300px; height:48px; background:url(../images/samplespriteimage-login.png) 0 -48px;}
.loginbuttonclick {width:300px; height:48px; background:url(../images/samplespriteimage-login.png) 0 -96px;}

所有这些类都根据需要应用，但是一旦单击并获得特定样式，它不会在释放按钮时恢复到以前的样式。JqueryMobile 中是否有任何发布事件可以使其正常工作。或者有什么方法可以解决这个问题。

我正在删除 pagebefore 事件上添加的类。但我理想情况下希望它在释放按钮时发生。请帮助我。谢谢

4

1 回答 1

0

您只需要.removeClass()在活动完成后即可。

演示

click事件可以分为两个事件：

  1. 事件的开始mousedown，vmousedown或touchstart。在这里，您可以添加课程或做其他事情。

    $('#sgninBtn').on('vmousedown touchstart', function (e) {
  if (e.type == 'touchstart') {
    $(this).addClass('loginbuttonpressed');
  } else {
    $(this).addClass('loginbuttonclick');
  }
  return false;
});

  2. 事件结束 mouseup，vmouseup或touchend。在这里，您删除课程或做其他事情。

    $('#sgninBtn').on('vmouseup touchend', function (e) {
  if (e.type == 'touchend') {
    $(this).removeClass('loginbuttonpressed');
  } else {
    $(this).removeClass('loginbuttonclick');
  }
  return false;
});

.

于 2013-09-25T10:59:14.473 回答