Как удалить активное состояние кнопки с помощью jQuery Mobile?

В моем мобильном приложении, используя jQuery Mobile...

Я бы хотел, чтобы простая кнопка выполняла простую функцию javascript при щелчке. Нет переходов страниц, ничего особенного.
Я понял, что могу устранить переходы страниц, выполнив return false или preventDefault()
Но проблема заключается в том, что кнопка управляется "активным" состоянием, т.е. выделяется синим цветом, если вы используете общую тему. Мне интересно, как я могу удалить это после клика (или нажмите, и т.д.).

Спасибо.

Ответ 1

Обновление:

Этот вопрос и предложенные хаки теперь немного устарели. jQuery mobile обрабатывает кнопки совсем немного иначе, чем 3 года назад, а также, jQuery mobile теперь имеет несколько разных определений "button". Если вы хотите сделать то, что искали 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 script и выше jQuery-mobile script.

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

Ответ 2

Вы можете отключить "выделенное синее" состояние в событии "mobileinit" перед загрузкой jQueryMobile- script:

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

Ответ 3

Do НЕ установите для 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>

Это хорошо работает, чтобы удалить подсветку с кнопок, сохраняя активное состояние на других элементах.

Ответ 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;
}

Ответ 5

То, что я делаю, - заставить кнопки вернуться к неактивному состоянию до изменения страницы.

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

Ответ 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);
});

Ответ 7

Я потратил большую часть дня и ночи на то, чтобы найти ответ на эту проблему, главным образом, на Android-телефоне. Вместо стандартных кнопок JQM я использую пользовательские изображения с: активным состоянием в CSS. Перейдя по ссылке на следующую страницу, затем, щелкнув назад, кнопка просто останется в активном состоянии. Я попытался добавить классы и удалить классы и другие другие предложения, и ничего не сработало.

Итак, я придумал свое небольшое исправление, которое работает, и может помочь любому, кто сидит здесь в тупике. Я просто назову этот фрагмент кода на "pagecontainerchange", используя data.toPage [0].id, чтобы вызывать его только на странице, где происходит активное состояние. Просто не забудьте обернуть свои кнопки в div, в моем случае называется "themenu".

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

}

Ответ 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>