jQuery EasyUI Diseño -Agregar dinámicamente pestañas (Tabs)

Con jQuery EasyUI se pueden agregar pestañas fácilmente. Solo necesita llamar al método 'add'.

En este tutorial, usaremos iframes para agregar dinámicamente pestañas que se muestran en una página. Al hacer clic en el botón agregar, se añadirá una nueva pestaña. Si la pestaña ya existe, se activará.

Paso 1: Crear pestañas (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>

Este código HTML es muy sencillo; creamos pestañas con un panel de pestaña llamado 'Home'. Tenga en cuenta que no necesitamos escribir ningún código JS.

Paso 2: Implementar la función '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
            });
        }
    }

Usamos el método 'exists' para comprobar si la pestaña ya existe; si existe, se activa. Si no existe, llamamos al método 'add' para añadir un nuevo panel de pestaña.

Descargar ejemplos de jQuery EasyUI

jeasyui-layout-tabs2.zip