При необходимости вывода большого объема информации, но без необходимости ее полного отображения бывает полезным разделять ее на вкладки. Также вкладки можно использовать и для решения других задач, но об этом чуть позже.
В библиотеке jQuery UI имеется виджет tabs. Использовать его достаточно просто. Но если возникнет необходимость в создании вкладок динамически, то здесь становится все не очень радостно. А все потому что в заявлении от разработчиков указывается следующее: As of jQuery UI 1.9 the add remove methods have been deprecated and in jQuery UI 1.10 they have been removed. Чем руководствовались разработчики в данной ситуации при принятия этого решения абсолютно не ясно. Необходимость в динамическом создании вкладок возникла в следствии того, что нужен был элемент интерфейса с возможностью создания вкладок меню для праздничного мероприятия.
Здесь наверно можно было бы все оставить и перейти к разработке своего виджета, но вряд ли это окупилось бы по времени. Поэтому было принято решение о реализации данной возможности не зависимой от виджета tabs. Т.е. непосредственно сам виджет решено было не модифицировать, чтобы в дальнейшем не быть привязанным к разным версиям jQuery UI.
Для использования в голову документа добавьте следующие стили и скрипты:
<link href="css/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/tabs.js"></script>
В секцию body добавьте следующий код:
<div class="nav-bar"></div>
Изначальный внешний вид виджета:
Внешний вид виджета с созданными вкладками:
Код по расширения возможностей виджета tabs находится в модуле tabs.js.
Скачать вы можете здесь.
Динамические вкладки на jQuery UI tabs
При необходимости вывода большого объема информации, но без необходимости ее полного отображения бывает полезным разделять ее на вкладки. Также вкладки можно использовать и для решения других задач, но об этом чуть позже.
В библиотеке jQuery UI имеется виджет tabs. Использовать его достаточно просто. Но если возникнет необходимость в создании вкладок динамически, то здесь становится все не очень радостно. А все потому что в заявлении от разработчиков указывается следующее: As of jQuery UI 1.9 the add remove methods have been deprecated and in jQuery UI 1.10 they have been removed. Чем руководствовались разработчики в данной ситуации при принятия этого решения абсолютно не ясно. Необходимость в динамическом создании вкладок возникла в следствии того, что нужен был элемент интерфейса с возможностью создания вкладок меню для праздничного мероприятия.
Здесь наверно можно было бы все оставить и перейти к разработке своего виджета, но вряд ли это окупилось бы по времени. Поэтому было принято решение о реализации данной возможности не зависимой от виджета tabs. Т.е. непосредственно сам виджет решено было не модифицировать, чтобы в дальнейшем не быть привязанным к разным версиям jQuery UI.
Для использования в голову документа добавьте следующие стили и скрипты:
В секцию body добавьте следующий код:
Изначальный внешний вид виджета:
Внешний вид виджета с созданными вкладками:
Код по расширения возможностей виджета tabs находится в модуле tabs.js.
Скачать вы можете здесь.