0

jQuery Mobileのナビゲーションバーをこのような幅から変更するにはどうすればよいですか？

m.IKEAでは次のようになります。

<div data-role="header" id="ikea-homeheader" data-backbtn="false">
    <div id="ikea-navbar" data-role="headerbar" data-moreListId="#ikea-more-list">
        <ul>            
            <li class="ikea-navbar-item "><a href="/se/sv/" >Hem</a></li>
            <li class="ikea-navbar-item "><a href="/se/sv/catalog/functional/" >Sortiment</a></li>
            <li class="ikea-navbar-item "><a href="/se/sv/shoppinglist/" rel="nofollow">Inkopslista</a></li>
            <li class="ikea-navbar-item ikea-navbar-item-active"><a href="/se/sv/stores/" >Varuhus</a></li>

            <li class="ui-headerbar-more-item" data-role="headerbar-more-item"><a data-role="popupbutton" data-popup-content="more-item-popup" ><div class="ikea-navbar-more-image"></div></a></li>
        </ul>
    </div>
</div>


<div data-role="popup" id="more-item-popup">
    <ul data-role="listview" data-theme="d" id="ikea-more-list">
    </ul>
    <div data-role="popup-cancel-button">
        <div data-role="button" data-theme="c">Cancel</div>

    </div>
</div>

しかし、それがどのように機能するのか私にはわかりません。

私のjQuerymobile1.0.1では機能しません...

data-role = " headerbar "、data-moreListId、data-role = "headerbar-more-item"とは何ですか？

4

1 に答える 1

0

向きの変更時に幅を更新しようとしている場合は、次のコマンドを使用してjqmスタイリング/フォーマットを再適用してみてください。

$("#your-jqm-page").page();

.page（）は、jQMマークアップでページを更新します。.trigger("create")ここで説明する方法を試す必要がある場合もあります。JQueryMobile.page（）関数は無限ループを引き起こしますか？

他の新しい質問に関しては、これらのdata属性は、ページが初期化された後にjqmフレームワークによって追加された要素のように見えます。

アップデート

ブラウザのサイズが変更されたことを検出しようとしている場合は、次のような関数を使用してください。

$(window).resize(function() {

  // this is whatever size you would like to make the change on, in pixels
  var minimumPreferredSize = 600;

  if ($(window).width() < minimumPreferredSize) {
     $("#Varuhus").html("...");
  }
  else
  {
     $("#Varuhus").html("Varuhus");
  }
});

このソリューションは、aタグidにVaruhusが含まれていることを前提としています。

この解決策は、この他の投稿によって可能になりました：JavaScriptを使用してウィンドウのサイズが変更されたことを検出しますか？

お役に立てれば！

于 2012-02-13T13:52:34.737 に答える