从宽度更改jquery移动导航栏

Question

如何将jQuery移动中的导航条从这这样的宽度中更改

在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手机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移动.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标记具有Varuhus的id。

这个解决方案是由另一个帖子：使用JavaScript检测窗口何时调整大小？实现的。

希望这能有所帮助！