2

我对 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
});
4

1 回答 1

2

jQuery 移动 >= 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来自浏览器的触发事件要好。

演示

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);

演示

于 2014-02-12T23:05:17.363 回答