Как быстро удалить текст кнопки в JQuery Mobile

Я очень новичок в Jquery и jquery mobile. Я изменяю размер кнопки, чтобы она реагировала на размер окна. Чтобы быть более конкретным, я меняю его с iconpos="left" на iconpos="notext", чтобы удалить текст в маленьких окнах. Я нашел следующую функцию, которая работает для меня.

$(window).on("throttledresize", function() {
  var smallButtons = $(window).width() <= 480;
  $('#menu_toggle').toggleClass('ui-btn-icon-notext', smallButtons);
  $('#menu_toggle').toggleClass('ui-btn-icon-left', !smallButtons);
});

Но это работает только при изменении размера окна. Очевидно, я также хотел бы, чтобы он показывал правильный размер при загрузке страницы, а не просто изменял размер. Я нашел код ниже, но я не знаю, как поместить их оба в 1, более краткий фрагмент кода.

$("#page_id").on("pageshow" , function() {
 The Function
});

jquery-mobile jquery-mobile-button
person devsie    schedule 12.02.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

jQuery для мобильных устройств >= 1.4

.buttonMarkup(), а также data-role="button" устарели и будут удалены в 1.5. Вместо этого классы следует добавлять вручную в тег Anchor.

  • Создайте функцию для управления классами Anchor. Начиная с jQM события страницы теперь заменены событиями pageContainer. Новые события не могут быть привязаны к конкретной странице, поэтому вам нужно искать Якорь внутри активной страницы.

    Обратите внимание, что $.mobile.activePage также устарело и заменено на $.mobile.pageContainer.pagecontainer("getActivePage").

    function resizeBtn() {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    if ($(window).width() <= 480) {
        $("#notext.ui-btn-icon-left", activePage)
            .toggleClass("ui-btn-icon-notext ui-btn-icon-left");
    } else {
        $("#notext.ui-btn-icon-notext", activePage)
            .toggleClass("ui-btn-icon-left ui-btn-icon-notext");
    }
}

  • Функция вызова по событию pagecontainerbeforeshow:

    $(document).on("pagecontainerbeforeshow", resizeBtn);

  • Функция вызова по событию throttledresize:

    $(window).on("throttledresize", resizeBtn);

Примечание. throttledresize лучше, чем resize, так как задерживает запуск события resize из браузера.

Демо

jQuery для мобильных устройств ‹= 1.3

Вам нужно использовать .buttonMarkup(), если вы используете jQuery Mobile 1.3 или ниже.

$(".selector").buttonMarkup({
  iconpos: "notext"
});

  • Функция изменения размера:

    function resizeBtn() {
    if ($(window).width() <= 480) {
        $(".selector").buttonMarkup({
            iconpos: "notext"
        });
    } else {
        $(".selector").buttonMarkup({
            iconpos: "right"
        });
    }
}

  • Функция вызова на pagebeforeshow:

    $(document).on("pagebeforeshow", resizeBtn);

  • Функция вызова на resize:

    $(window).on("resize", resizeBtn);

Демо

person Omar    schedule 12.02.2014
comment
спасибо, я пробую ваш ответ atm. Выглядит неплохо. Итак, выходит jquery1.5? Я только начинаю понимать, что такое 1.4. Спасибо за ответ. - person devsie; 13.02.2014
comment
@devsie Не за что. Я внес небольшое изменение pagecontainerbeforeshow. Я не думаю, что он выйдет в ближайшее время, .buttonMarkup() должен работать нормально, но на всякий случай считай удаленным и придерживайся рабочих функций :) - person Omar; 13.02.2014
comment
Также лучше использовать изменение размера, чем изменение размера с дросселированием? И если делать что-то с class=ui-btn работает в данный момент и это путь вперед, то я буду делать что-то таким образом, а не менять их снова в будущем. - person devsie; 13.02.2014
comment
@devsie throttledresize лучше. вы также можете использовать orientationchange с throttledresize. - person Omar; 13.02.2014