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

时间:2011-09-21 21:49:01

标签: jquery-mobile

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

  • 我想点击一个简单的按钮执行一个简单的javascript函数。没有页面转换,没有什么特别的。

  • 我知道我可以通过return falsepreventDefault()

  • 消除页面转换
  • 但问题是按钮是否处于“活动”状态,即如果使用一般主题则突出显示为蓝色。我想知道如何在点击(或点击等)后删除它。

感谢。

8 个答案:

答案 0 :(得分:17)

您可以在加载jQueryMobile脚本之前禁用' mobileinit' -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;类。

答案 1 :(得分:12)

更新

这个问题和建议的黑客现在有点过时了。 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>

答案 2 :(得分:7)

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>

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

答案 3 :(得分:0)

你可以通过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;
}

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

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);
});

答案 6 :(得分:0)

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

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

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

}

答案 7 :(得分:0)

这适用于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>