Beispiel zur Erklärung der Verwendung von jQuery EasyUI Tab-Panel

1、Setze die Klasse des div in der Tab-Panel-Oberfläche auf class="easyui-tabs”

2、Füge mehrere div zur Tab-Panel-Oberfläche hinzu, jeder div ist ein Tab (jedes Panel muss ein Title haben)

3、Setze das Fit der Panels auf true, passe die Größe an den übergeordneten Container an

4、Setze das Closable der Tabs auf true, füge Schließknöpfe hinzu

5、Durch einen Hyperlink angeklickt, neuen Tab hinzufügen

Syntax: Seitenobjekt .easyui-Plugin (Methodennamen, Parameter) ;

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>easyui-Verwendung von Tabs in der Tab-Panel-Oberfläche</title>
 <!-- Importiere die jQuery-Kernbibliothek -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- Importiere die easyui-Bibliothek -->
 <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
 <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
 <script type="text/javascript">
  //Wird ausgeführt, wenn die Seite geladen wird
  $(function(){
  //Klicke auf das Link-Bindungsereignis
  $("#nwtxxb").click(function(){
   //Füge einen neuen Tab hinzu
   $("#mytabs").tabs('add',{
   title:'CSDN-Blog',
   content:'Lerne IT, lerne mit uns, der und der'
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <div data-options="region:'north',title:'Lerne mit uns, der und der'-ein großartiges Blog, um Java zu lernen!" style="height:100px"></div>
 <div data-options="region:'west',title:'Menü-Navigation'" style="width:200px">
  <!--Faltbare Oberfläche-->
  <div class="easyui-accordion" data-options="fit:true">
  <div data-options="title:'Basis-Menü'">
   <a href="javascript:void(0)" rel="external nofollow" id="nwtxxb">Lerne bei uns!</a>
  </div>
  <div data-options="title:'System-Menü'">Lerne bei uns!</div>
  </div>
 </div>
 <div data-options="region:'center',title:'Mittlerer Bereich'">
  <!--Tab-Panel-->
  <div id="mytabs" class="easyui-tabs" data-options="fit:true">
  <div data-options="title:'CSDN-Blog',closable:true">Lerne Java-Backend-Programmierung, komme und lerne bei uns!</div>
  <div data-options="title:'Bokeyuan',closable:true">Vorbereitung auf die Frontend-Entwicklung, komme und lerne bei uns!</div>
  </div>
 </div>
 <div data-options="region:'east',title:'Ostlicher Bereich'" style="width:100px"></div>
 <div data-options="region:'south',title:'Südlicher Bereich'" style="height:100px"></div>
 </body>
</html>

Diese Erklärung des Verwenden von jQuery EasyUI Tabs Panel Tabs ist das gesamte Inhalt, das der Redakteur allen zur Verfügung gestellt hat. Ich hoffe, es kann allen eine Referenz sein und hoffe, dass alle die Unterstützung für das Lautrutorial spenden.

Grundlegende Anleitung

Dir könnte auch gefallen