如何使用jQuery Mobile删除按钮的活动状态? [英] How do you remove a button's active state with jQuery Mobile?

问题描述

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

In my mobile app, using jQuery Mobile...

• 我想使一个简单的按钮在单击时执行一个简单的javascript函数.没有页面过渡，没什么特别的.

• I would like to make a simple button execute a simple javascript function on click. No page transitions, nothing special like that.

我知道我可以通过执行return false或preventDefault()

I understood I can eliminate the page transitions by doing return false or preventDefault()

但是问题是按钮停留在活动"状态，即如果您使用常规主题，则突出显示为蓝色.我想知道如何在单击(或点击等)后将其删除.

But the problem is the button sticks with the "active" state, i.e. highlighted blue if you use the general theme. I'm wondering how I can remove that after click (or tap, etc).

谢谢.

推荐答案

更新:

这个问题和建议的hacks现在已经过时了. jQuery mobile处理按钮的方式与3年前大不相同，而且jQuery mobile现在具有"button"的几种不同定义.如果您想执行OP所希望的操作，则现在可以使用以下方法来避免此问题:

Update:

This question and the hacks suggested are now a bit outdated. jQuery mobile handles buttons quite a bit differently than 3 years ago and also, jQuery mobile now has several different definitions of "button". If you want to do what the OP was looking for, you might now be able to avoid the issue by using this:

第1步:

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

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

Alternatively, you could also use jQuery mobile input buttons:

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

第2步: 然后，您的标准jQuery on回调:

Step 2: Then your standard jquery on callback:

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

如果使用的按钮或选项卡等已应用了活动"类的按钮(默认值为ui-btn-active)，则旧答案可能仍对某人有用.另外，这里是一个小提琴，它演示了下面的代码.

If you are using a button or a tab, or whatever, that has the "active" class applied to it (the default is ui-btn-active), the old answer may still be useful to someone. Also, here is a fiddle demonstrating the code below.

有选择地删除活动状态:

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

As demonstrated in another answer, you can disable the active state for all buttons on all pages. If that is acceptable for the project in question, that is the appropriate (and simpler) solution. However, if you want to disable the active state for some buttons while preserving active states for others, you can use this method.

第1步:

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

第2步:

然后将activeOnce类(或任何您想调用的类-这是一个自定义类)添加到您不想在单击时突出显示的按钮上.

Then add the activeOnce class (or whatever you want to call it - it's a custom class) to the buttons that you don't want to highlight when clicking.

和往常一样，当将任何东西绑定到mobileinit时，请确保将绑定-也许更好的是，将所有JavaScript代码- 下面 放置在jQuery脚本中， 上方 的jQuery移动脚本.

And as is usual when binding anything to mobileinit, be sure you place your bindings - and perhaps better, all your javascript code - below the jQuery script and above the jQuery-mobile script.

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

这篇关于如何使用jQuery Mobile删除按钮的活动状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！