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>

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

在我的 jQuery mobile 1.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")这里讨论的方法：JQuery Mobile .page() function 会导致无限循环？

至于您的其他新问题，这些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标签具有idVaruhus。

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

希望这可以帮助！

于 2012-02-13T13:52:34.737 回答