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

Question

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

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

• 我明白我可以通过做return false或消除页面转换preventDefault()

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

谢谢.

Answer 1

在加载jQueryMobile脚本之前,您可以在'mobileinit'事件中禁用'突出显示的蓝色'状态:

<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>

现在,当您单击链接时,执行单击后不会添加任何类.你仍然会有'hoover'和'down'类.

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),旧答案可能对某人有用.此外,这里有一个演示下面代码的小提琴.

有选择地删除活动状态:

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

步骤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

请不要设置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>

这可以很好地从按钮中删除突出显示,同时保持活动状态在其他元素上.