Question

我对Jquery＆amp; amp; 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＆gt; = 1.4

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

创建一个操作 Anchor 类的函数。自jQM起，页面事件现已替换为pageContainer个事件。新事件无法绑定到特定页面，因此，您需要在活动页面中查找 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 Mobile＆lt; = 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);
```

<强> Demo

如何在JQuery Mobile中删除按钮文本

1 个答案:

jQuery Mobile＆gt; = 1.4

jQuery Mobile＆lt; = 1.3