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

Пользователь

от charles.orn , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от ciara , 9 месяцев назад

@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.