Das jQuery EasyUI-Layout fügt tabs_jquery dynamisch hinzu

Bevor ich das Folgende lese, möchte ich Ihnen eine kurze Einführung in das Wissen rund um Easyui geben.

easyui ist eine Sammlung von Benutzeroberflächen-Plug-ins basierend auf jQuery. ddd

easyui bietet die notwendige Funktionalität zum Erstellen moderner, interaktiver JavaScript-Anwendungen.

Mit easyui müssen Sie nicht viel Code schreiben. Sie müssen nur einige einfache HTML-Tags schreiben, um die Benutzeroberfläche zu definieren.

easyui ist ein vollständiges Framework, das HTML5-Webseiten perfekt unterstützt.

easyui spart Zeit und Umfang bei Ihrer Webentwicklung.

easyui ist sehr einfach, aber leistungsstark.

Tabs können einfach mit jQuery EasyUI hinzugefügt werden. Sie müssen nur die Methode „add“ aufrufen.

In diesem Tutorial verwenden wir Iframes, um Tabs, die auf einer Seite angezeigt werden, dynamisch hinzuzufügen. Wenn Sie auf die Schaltfläche „Hinzufügen“ klicken, wird eine neue Registerkarte hinzugefügt. Wenn die Registerkarte bereits vorhanden ist, wird sie aktiviert.

Schritt 1: Tabs erstellen

 <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>

Dieser HTML-Code ist sehr einfach, wir erstellen Tabs mit einem Tab-Panel namens „Home“. Bitte beachten Sie, dass wir keinen JS-Code schreiben müssen.

Schritt 2: Implementieren Sie die Funktion „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
  });
 }
 }

Wir verwenden die Methode „exists“, um festzustellen, ob die Registerkarte bereits vorhanden ist, und aktivieren die Registerkarte, wenn sie bereits vorhanden ist. Wenn es nicht vorhanden ist, rufen Sie die Methode „add“ auf, um ein neues Registerkartenfeld hinzuzufügen.

Okay, dieses Tutorial endet hier. Ich hoffe, es wird für alle hilfreich sein.