jquery-mobile - 如何在 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 移动 >= 1.4

.buttonMarkup() 以及 data-role="button" 已弃用，并将在 1.5 中删除。相反，应该手动将类添加到 Anchor 标记。

• 创建一个函数来操作Anchor的类。从 jQM 开始，页面事件 现在已替换为 pageContainer 事件。新事件无法绑定(bind)到特定页面，因此，您需要在事件页面中查找 anchor 。

  请注意，$.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 事件。

Demo

---

jQuery 移动 <= 1.3

如果您使用的是 jQuery Mobile 1.3 或更低版本，则需要使用 .buttonMarkup()。

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

• 调整大小功能:

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

• 在pagebeforeshow上调用函数:

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

• 调用调整大小函数:

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

Demo