jquery mobile从宽度更改导航栏

Question

如何在 jQuery Mobile 中更改导航栏的宽度，例如 this？

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

但我不明白它是如何工作的。

在我的 jQuery mobile 1.0.1 中它不起作用...

什么是data-role="headerbar"、data-moreListId、data-role="headerbar-more-item"？

Answer 1

如果您尝试在方向更改时刷新宽度，您可以尝试使用以下命令重新应用 jqm 样式/格式：

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

.page() 使用 jQM 标记刷新页面。您可能还需要尝试这里讨论的.trigger("create") 方法：JQuery Mobile .page() function causes infinite loop?

至于你的其他新问题，那些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 标签具有 Varuhus 的 id。

这个解决方案是通过另一个帖子实现的：Detect when a window is resized using JavaScript ?

希望这会有所帮助！