Как создать вкладки в 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.

@charles.orn 

Для создания вкладок в jQuery Mobile необходимо использовать структуру, аналогичную описанной выше, но с учетом особенностей данной библиотеки. В jQuery Mobile вкладки реализуются с использованием панелей и панельных вкладок.

Пример кода для создания вкладок в jQuery Mobile:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div data-role="tabs" id="myTabs">
    <div data-role="navbar">
        <ul>
            <li><a href="#tab1" class="ui-btn-active">Вкладка 1</a></li>
            <li><a href="#tab2">Вкладка 2</a></li>
            <li><a href="#tab3">Вкладка 3</a></li>
        </ul>
    </div>
    <div id="tab1" class="ui-body-d ui-content">
        <p>Содержимое вкладки 1</p>
    </div>
    <div id="tab2" class="ui-body-d ui-content">
        <p>Содержимое вкладки 2</p>
    </div>
    <div id="tab3" class="ui-body-d ui-content">
        <p>Содержимое вкладки 3</p>
    </div>
</div>

Здесь мы использовали атрибуты data-role для определения роли элементов в jQuery Mobile. Вкладки создаются с помощью элементов navbar и панелей content. Класс ui-btn-active указывает на активную вкладку.

Инициализация вкладок будет происходить автоматически при загрузке страницы, вам не нужно будет дополнительно вызывать метод tabs().

Обратите внимание, что перед использованием jQuery Mobile необходимо подключить библиотеку jQuery и jQuery Mobile, а также добавить основные стили для корректного отображения элементов.