English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Ubicación actual
  2. Página principal
  3. Notas de experiencia
  4. Texto principal

1、Establecer el div del área del panel de pestañas con class="easyui-tabs

2、Agregar varios div al área del panel de pestañas, cada div es una pestaña (cada panel debe establecer un título)

3、Establecer fit del panel en true, ajustar al tamaño del contenedor padre

4、Establecer closable de la pestaña en true, agregar botón de cierre

5、Añadir una nueva pestaña mediante un enlace, hacer clic para agregar

Sintaxis: objeto de página .easyui (nombre del método, parámetros) ;

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>easyui-Uso del panel de pestañas tabs</title>
 <!-- Importar la biblioteca de clases jQuery -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- Importar la biblioteca de clases 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">
  //Ejecutar después de que se cargue la página
  $(function(){
  //Asignar evento de clic al enlace
  $("#nwtxxb").click(function(){
   //Añadir una nueva pestaña
   $("#mytabs").tabs('add',{
   title:'CSDN Blog',
   content:'Aprende IT, aprendiendo juntos, nosotros y ellos'
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <div data-options="region:'north',title:'Aprendiendo juntos, nosotros y ellos'-学习Java的好博客！'" style="height:100px"></div>
 <div data-options="region:'west',title:'navegación de menú'" style="width:200px">
  <!--Panel de plegable-->
  <div class="easyui-accordion" data-options="fit:true">
  <div data-options="title:'menú básico'">
   <a href="javascript:void(0)" rel="external nofollow" id="nwtxxb">Aprende con nosotros y él</a>
  </div>
  <div data-options="title:'menú de sistema'">Aprende con nosotros y él</div>
  </div>
 </div>
 <div data-options="region:'center',title:'región central'">
  <!--Panel de pestañas-->
  <div id="mytabs" class="easyui-tabs" data-options="fit:true">
  <div data-options="title:'CSDN Blog',closable:true">Aprende programación back-end en Java, ven a aprender con nosotros y él!<>/div>
  <div data-options="title:'Blogger',closable:true">Aprende desarrollo frontend, ven a aprender con nosotros y él!<>/div>
  </div>
 </div>
 <div data-options="region:'east',title:'región oriental'" style="width:100px"></div>
 <div data-options="region:'south',title:'región sur'" style="height:100px"></div>
 </body>
</html>

La explicación del uso del ejemplo de pestañas del panel de opciones de jQuery EasyUI que he compartido con todos es todo lo que tengo que decir, espero que les sirva de referencia y que todos apoyen el tutorial de grito.

Tutoriales básicos