Question

在我的移动应用中，使用jQuery Mobile ...

我想点击一个简单的按钮执行一个简单的javascript函数。没有页面转换，没有什么特别的。
我知道我可以通过return false或preventDefault()
但问题是按钮是否处于“活动”状态，即如果使用一般主题则突出显示为蓝色。我想知道如何在点击（或点击等）后删除它。

感谢。

Answer 1

您可以在加载jQueryMobile脚本之前禁用＆＃39; mobileinit＆＃39; -event中突出显示的蓝色＆##状态：

<head>
    <script>
    $(document).bind('mobileinit', function () {
        $.mobile.activeBtnClass = 'unused';
    });
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

现在，当您单击链接时，执行单击后不会添加任何类。你仍然会有“胡扯”。并且＆＃39; down＆＃39;类。

Answer 2

更新

这个问题和建议的黑客现在有点过时了。 jQuery mobile处理按钮的方式与3年前完全不同，jQuery mobile现在有几种不同的“按钮”定义。如果你想做OP正在寻找的东西，你现在可以通过使用它来避免这个问题：

第1步：

<button class="ui-btn myButton">Button</button>

或者，您也可以使用jQuery移动输入按钮：

<form>
    <input value="Button One" type="button" class="myButton">
    <input value="Button Two" type="button" class="myButton2">
</form>

第2步： 然后你的标准jquery on回调：

$(".myButton").on("tap", function(e) {
    // do your thing
});

如果您正在使用已应用“有效”类的按钮或标签或其他内容（默认值为ui-btn-active），则旧答案可能对某人有用。此外，here is a fiddle演示了以下代码。

有选择地删除活动状态：

如另一个答案所示，您可以禁用所有页面上所有按钮的活动状态。如果这对于有问题的项目是可接受的，那么这是适当的（并且更简单的）解决方案。但是，如果要为某些按钮禁用活动状态，同时为其他按钮保留活动状态，则可以使用此方法。

第1步：

    $(document).bind('mobileinit', function() {
        $(document).on('tap', function(e) {
            $('.activeOnce').removeClass($.mobile.activeBtnClass);
        });
    });

第2步：

然后将activeOnce类（或任何您想要调用的类 - 它是自定义类）添加到您不希望在单击时突出显示的按钮。

正如通常将任何内容绑定到mobileinit一样，请确保放置绑定 - 或许更好，所有javascript代码 - jQuery脚本和上面 jQuery-mobile脚本。

<script src="js/jquery.js"></script>
<script src="js/my_script.js"></script>
<script src="js/jquery.mobile.js"></script>

Answer 3

NOT 按照建议将activeBtnClass设置为''，这会在关闭对话框和pageLoading函数时导致错误。

所描述的方法确实有效，但不能设置为null， activeBtnClass 变量用作选择器，因此将其设置为不存在的类以获得相同的效果而不会出现错误。

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).bind('mobileinit', function () {
            $.mobile.activeBtnClass = 'aBtnSelector';
        });
    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

这样可以在保持活动状态到其他元素的同时从按钮中删除突出显示。

Answer 4

你可以通过css而不是java来实现它：

例如:(你明白了）

#cart #item_options .ui-btn-active, #cart #item_options .ui-btn-hover-d, #cart #item_options .ui-btn-up-d, #cart #item_options  .ui-link-inherit{
    background:inherit;
    color:inherit;
    text-shadow:inherit;
}

Answer 5

我所做的是强制按钮在页面更改之前恢复为非活动状态。

//force menu buttons to revert to inactive state
$( '.menu-btn' ).on('touchend', function() {
    $(this).removeClass("ui-btn-active");
});

Answer 6

If you want to support non touch devices you should add timeout.

$('.btn' ).on('touchend click', function() {
    var self = this;
    setTimeout(function() {
            $(self).removeClass("ui-btn-active");
        },
    0);
});

Answer 7

我花了很多时间来寻找这个问题的答案主要发生在Android运行的手机上。我使用自定义图像而不是标准的JQM按钮：CSS中的活动状态。按照指向下一页的链接，然后单击后退，该按钮将保持在：活动状态。我已经尝试添加类和删除类和其他各种建议，但没有任何工作。

因此，我提出了自己的小修复方法，可以帮助那些坐在这里难以忍受的人。我只是使用data.toPage [0] .id在'pagecontainerchange'上调用这段代码，只在活动状态卡住的页面上调用它。只需确保将按钮包装在div中，在我的情况下称为“themenu”。

function ResetMenu() {
var menuHtml = $("#themenu").html();
$("#themenu").empty().html(menuHtml).trigger("create");

}

Answer 8

这适用于JqueryMobile headerTab

中的按钮

<style>
.Foo {
    color: #FFF !important;
    background: #347b68 !important;
 }
</style>

<div id="headerTab" data-id="headerTab" data-role="navbar">
  <ul id="header_tabs">
    <li><a href="#" data-transition="none" id="unique-id" class="Foo">name</a>
          </li>
  </ul>
</div>

如何使用jQuery Mobile删除按钮活动状态？

8 个答案:

更新