Question

如何从this的宽度更改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>

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

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

什么是 data-role =“标题栏”， data-moreListId ， data-role =“headerbar-more-item”？< / p>

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代码中包含id Varuhus。

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

希望这有帮助！

jquery mobile更改导航栏形式宽度

1 个答案: