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のクラスを操作する関数を作成します。現在、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よりも優れています。resizeresize

デモ

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 に答える