Как создать вкладки в jQuery Mobile?

@charles.orn 

1. Создайте список ul с классом ui-tabs-nav, содержащий элементы li для каждой вкладки. Внутри каждого элемента li создайте a элемент для отображения текста вкладки и ссылки на соответствующее содержимое.

1
2
3
4
5

<ul class="ui-tabs-nav">
  <li><a href="#tab1">Вкладка 1</a></li>
  <li><a href="#tab2">Вкладка 2</a></li>
  <li><a href="#tab3">Вкладка 3</a></li>
</ul>

1. Создайте блоки div с классом ui-tabs-panel, содержащие содержимое каждой вкладки. Добавьте атрибут id к каждому блоку, соответствующему ссылке вкладки.

1
2
3
4
5
6
7
8
9

<div id="tab1" class="ui-tabs-panel">
  Содержимое вкладки 1
</div>
<div id="tab2" class="ui-tabs-panel">
  Содержимое вкладки 2
</div>
<div id="tab3" class="ui-tabs-panel">
  Содержимое вкладки 3
</div>

1. Используйте метод tabs() для инициализации вкладок. Он должен быть привязан к контейнеру, содержащему списки ul и блоки div. Установите опции для настройки внешнего вида и поведения вкладок.

1
2
3
4
5
6
7
8

$(document).ready(function() {
  $('#myTabs').tabs({
    collapsible: true,
    active: false,
    hide: { effect: "slide", duration: 200 },
    show: { effect: "fade", duration: 400 }
  });
});

1. Готово! Ваша страница теперь имеет вкладки, которые можно переключать. Можно дополнительно настроить оформление вкладок с помощью CSS.