jquery mobile改变navibar的宽度

Question

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

在 m.IKEA 中，它是 make：

<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="标题栏更多项目” ？

Answer 1

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

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

.page() 使用 jQM 标记刷新页面。您可能还必须尝试 .trigger("create") 方法，如下所述：JQuery Mobile .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 为瓦鲁胡斯。

此解决方案是通过另一篇文章实现的： Detect when a window is resized using JavaScript ？

希望这有帮助！