jQuery EasyUI Layout -Динамическое добавление вкладок

Используя jQuery EasyUI, вы можете легко добавлять Tabs. Вам просто нужно вызвать метод 'add'.

В этом руководстве мы будем использовать iframe для динамического добавления Tabs, отображаемых на одной странице. При нажатии кнопки добавления будет добавлена новая вкладка. Если вкладка уже существует, она будет активирована.

Шаг 1: Создание Tabs

    <div style="margin-bottom:10px">
        <a href="../index.html" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
        <a href="../index.html" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
        <a href="../index.html" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
    </div>
    <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
        <div title="Home">
        </div>
    </div>

Этот html-код очень прост. Мы создали Tabs с панелью вкладок с именем 'Home'. Обратите внимание, что нам не нужно писать какой-либо js-код.

Шаг 2: Реализация функции 'addTab'

    function addTab(title, url){
        if ($('#tt').tabs('exists', title)){
            $('#tt').tabs('select', title);
        } else {
            var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
            $('#tt').tabs('add',{
                title:title,
                content:content,
                closable:true
            });
        }
    }

Мы используем метод 'exists', чтобы определить, уже существует ли вкладка. Если она существует, активируйте вкладку. Если она не существует, вызовите метод 'add', чтобы добавить новую панель вкладки.

Скачать примеры jQuery EasyUI

jeasyui-layout-tabs2.zip