jQuery EasyUI Layout - aggiungere dinamicamente schede (Tabs)
Le schede possono essere aggiunte facilmente utilizzando jQuery EasyUI. Hai solo bisogno di chiamare il metodo 'Add' può essere.
In questo tutorial, useremo iframe dinamicamente aggiungere schede per visualizzare in una pagina. Quando si fa clic sul pulsante Aggiungi, verrà aggiunta una nuova scheda. Se la scheda è già presente, sarà attivato.
Passo 1: Creare Tabs
<Div style = "margin-bottom: 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/')"> jquery </a> <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')"> easyui </a> </ Div> <Div id = "tt" class = stile "easyui-tabs" = "width: 400px; height: 250px;"> <Div title = "Home"> </ Div> </ Div>
Il codice HTML è molto semplice, abbiamo creato il pannello schede con una scheda denominata 'casa' di. Si prega di notare che non abbiamo bisogno di scrivere alcun codice js.
Fase 2: Implementare la funzione 'addTab'
Funzione addTab (titolo, url) { if ($ ( '# tt'). schede ( 'esiste', titolo)) { $ ( '# Tt') schede ( 'selezionare', titolo) .; } Else { contenuti var = '<iframe scrolling = frameborder "auto" = "0" src = "' + url + '" style = "width: 100%; height: 100%;"> </ iframe>'; $ ( '# Tt'). Tabs ( 'Add', { Titolo: titolo, contenuti: i contenuti, richiudibile: true }); } }
Usiamo il metodo 'esiste' per determinare se la scheda già esiste, se esiste scheda attivata. Se non vi è alcuna chiamata al metodo 'Add' per aggiungere un nuovo pannello a schede.