如何在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

如果您使用的是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);
  

• resize:上的调用函数

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

演示