Esempio di spiegazione dell'uso del pannello scheda tabs di jQuery EasyUI

1、Imposta la classe "easyui-tabs" per il div dell'area del pannello di schede

2、Aggiungi più div all'area del pannello di schede, dove ogni div rappresenta una scheda (ogni pannello deve avere un titolo)

3、Imposta il valore fit per il pannello su true, per adattarsi alle dimensioni del contenitore padre

4、Imposta il valore di closable per le schede su true, aggiungendo un pulsante di chiusura

5、Aggiungi una nuova scheda tramite un collegamento ipertestuale, cliccandoci sopra

Sintassi: oggetto pagina .easyui plugin (nome metodo, parametri) ;

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>uso del pannello di schede easyui-tabs</title>
 <!-- Importa la libreria core di jQuery -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- Importa la libreria easyui -->
 <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">
  //esegui quando la pagina è caricata
  $(function(){
  //associa un evento di click al link
  $("#nwtxxb").click(function(){
   //aggiungi una nuova scheda
   $("#mytabs").tabs('add',{
   title:'Blog di CSDN',
   content:'Studia IT, Io, te, lui - il blog di apprendimento!'
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <div data-options="region:'north',title:'Io, te, lui - il blog di apprendimento Java!'" style="height:100px"></div>
 <div data-options="region:'west',title:'menu di navigazione'" style="width:200px">
  <!-- pannello di pieghevole -->
  <div class="easyui-accordion" data-options="fit:true">
  <div data-options="title:'Menu di base'">
   <a href="javascript:void(0)" rel="external nofollow" id="nwtxxb">Studia con noi</a>
  </div>
  <div data-options="title:'Menu di sistema'">Studia con noi</div>
  </div>
 </div>
 <div data-options="region:'center',title:'Zona centrale'">
  <!--Pannello di schede-->
  <div id="mytabs" class="easyui-tabs" data-options="fit:true">
  <div data-options="title:'CSDN Blog',closable:true">Impara a programmare backend in Java, venite a studiare con noi!</div>
  <div data-options="title:'Blogging Garden',closable:true">Impara a sviluppare front-end, venite a studiare con noi!</div>
  </div>
 </div>
 <div data-options="region:'east',title:'Zona orientale'" style="width:100px"></div>
 <div data-options="region:'south',title:'Zona meridionale'" style="height:100px"></div>
 </body>
</html>

Questa guida dettagliata sull'uso dell'interfaccia tab di jQuery EasyUI è tutto ciò che ho condiviso con voi. Spero che sia utile come riferimento e vi prego di continuare a supportare la guida Yana.

Tutorial di Base