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

Question

Я очень новичок в 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
});

Answer 1

jQuery Mobile >= 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 Mobile <= 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);
  

демонстрация