La mise en page jQuery EasyUI ajoute dynamiquement tabs_jquery

Avant de lire ce qui suit, permettez-moi de vous donner une brève introduction aux connaissances liées à easyui.

easyui est une collection de plug-ins d'interface utilisateur basés sur jQuery. ddd

easyui fournit les fonctionnalités nécessaires pour créer des applications JavaScript modernes et interactives.

En utilisant easyui, vous n'avez pas besoin d'écrire beaucoup de code. Il vous suffit d'écrire quelques balises HTML simples pour définir l'interface utilisateur.

easyui est un framework complet qui supporte parfaitement les pages web HTML5.

easyui fait gagner du temps et de l'ampleur à votre développement web.

easyui est très simple mais puissant.

Des onglets peuvent être facilement ajoutés à l'aide de jQuery EasyUI. Il vous suffit d'appeler la méthode 'add'.

Dans ce tutoriel, nous utiliserons des iframes pour ajouter dynamiquement des onglets qui apparaissent 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="tt" class="easyui-tabs" style="width:400px;height:250px;">
 <div title="Home">
 </div>
 </div>

Ce code html est très simple, nous créons des onglets avec un panneau d'onglets nommé 'Accueil'. Veuillez noter que nous n'avons pas besoin d'écrire de code js.

Étape 2 : Implémenter la fonction '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
  });
 }
 }

Nous utilisons la méthode 'exists' pour déterminer si l'onglet existe déjà, et activons l'onglet s'il existe déjà. S'il n'existe pas, appelez la méthode 'add' pour ajouter un nouveau panneau d'onglets.

D'accord, ce tutoriel se termine ici. J'espère qu'il sera utile à tout le monde.