JQuery Mobile изменить Navibar от ширины

Question

Как изменить navbar в jQuery Mobile с ширины, например this ?

В м. ИКЕА это делают:

<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 Mobile .page () вызывает бесконечный цикл?

Что касается других ваших новых вопросов, эти атрибуты data выглядят как элементы, добавленные каркасом jqm после инициализации страницы.

UPDATE

Если вы пытаетесь определить, когда размер браузера изменился, используйте функцию, подобную этой:

$(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.

Это решение стало возможным благодаря этому другому сообщению: Определить, когда размер окна изменяется с помощью JavaScript?

Надеюсь, это поможет!