jQuery EasyUI Layout - ajouter dynamiquement des onglets (onglets)
Les onglets peuvent être ajoutés facilement en utilisant jQuery EasyUI. Vous avez seulement besoin d'appeler la méthode «add» peut être.
Dans ce tutoriel, nous allons utiliser iframe dynamiquement ajouter des onglets pour afficher sur une page. Lorsque vous cliquez sur le bouton Ajouter, un nouvel onglet sera ajouté. Si l'onglet existe déjà, il sera activé.
Étape 1: Créer des onglets
<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 = classe "tt" style = "easyui-onglets" = "width: 400px; height: 250px;">
<Title Div = "Home">
</ Div>
</ Div>
Le code html est très simple, nous avons créé le panneau Onglets avec un onglet appelé de «maison». S'il vous plaît noter que nous ne avons pas besoin d'écrire du code js.
Étape 2: Mettre en œuvre la fonction 'AddTab'
fonction AddTab (titre, url) {
if ($ ( '# tt'). (onglets «existe», titre)) {
$ ( '# Tt') onglets ( 'select', titre) .;
} Else {
contenu var = '<iframe scrolling = "auto" frameborder = src "0" = "' + url + '" style = "width: 100%; hauteur: 100%;"> </ iframe>';
$ ( '# Tt'). Tabs ( 'ajouter', {
Titre: titre,
contenu: contenu,
refermable: true
});
}
}
Nous utilisons la méthode «existe» pour déterminer si l'onglet existe déjà, si elle existe onglet activé. S'il n'y a pas d'appel à la méthode «add» pour ajouter un nouveau panneau à onglets.
