JQuery EasyUI Layout - динамически добавлять вкладки (Tabs)
Вкладки могут быть легко добавлены с помощью JQuery EasyUI. Вам нужно всего лишь вызвать метод "добавить" может быть.
В этом уроке мы будем использовать IFRAME динамически добавлять вкладки для отображения на странице. При нажатии на кнопку Добавить, будет добавлена новая вкладка. Если вкладка уже существует, он будет активирован.
Шаг 1: Создание вкладок
<Div стиль = "краю дна: 10px"> <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')"> Google </a> <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')"> </a> JQuery <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')"> easyui </a> </ Div> <Div ID = класс "тт" = "easyui-вкладки" стиль = "ширина: 400px; высота: 250px;"> <Div название = "Главная"> </ Div> </ Div>
HTML код очень прост, мы создали панель вкладок с вкладки под названием 'Home' 's. Обратите внимание, что нам не нужно писать код JS.
Шаг 2: Реализация функции '' addTab
Функция addTab (название, URL) { если ($ ( '# тт'). (вкладки 'существует', название)) { $ ( '# Tt') вкладки ( 'выберите', название) .; } Else { Содержание переменная = '<IFRAME скроллинг = "Авто" frameborder = "0" SRC = "' + URL + '" стиль = "ширина: 100%; высота: 100%;"> </ IFRAME>'; $ ( '# Tt'). Вкладки ( 'добавить', { Название: название, Содержание: содержание, закрываемый: правда }); } }
Мы используем 'существует' метод для определения того, существует ли уже вкладка, если она существует активирована вкладка. Если нет вызова метода "добавить", чтобы добавить новую вкладку панель.