recherche

Maison >interface Web >js tutoriel >Utilisation des onglets dans le panneau d'onglets jQuery EasyUI

Utilisation des onglets dans le panneau d'onglets jQuery EasyUI

php中世界最好的语言
php中世界最好的语言original
2018-03-15 14:16:061969parcourir

Cette fois, je vous présente jQuery Comment utiliser les onglets du panneau d'onglets EasyUI, quelles sont les précautions lors de l'utilisation des onglets du panneau d'onglets jQuery EasyUI, ce qui suit est un guide pratique Dans ce cas, jetons un coup d'œil ensemble. Jetez un œil.

1. Définissez class="easyui-tabs" sur la zone du panneau d'onglets p

2. Ajoutez plusieurs p à la zone du panneau d'onglets, chaque p est un onglet (chaque panneau doit être défini). le titre)

3. Définissez l'ajustement du panneau sur true et adaptez la taille du conteneur parent

4. Définissez l'onglet fermable sur true et ajoutez un bouton de fermeture

. 5 , via hyperlien, cliquez pour ajouter un nouvel onglet

Syntaxe : PageObjetplug-in .easyui (nom de la méthode, paramètres) ;

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>easyui-选项卡面板tabs的使用</title>
 <!-- 导入jquery核心类库 -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- 导入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">
  //页面加载后执行
  $(function(){
  //对链接绑定点击事件
  $("#nwtxxb").click(function(){
   //添加一个新的选项卡
   $("#mytabs").tabs('add',{
   title:'123',
   content:'456，'
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <p data-options="region:&#39;north&#39;,title:&#39;123&#39;" style="height:100px"></p>
 <p data-options="region:&#39;west&#39;,title:&#39;菜单导航&#39;" style="width:200px">
  <!--折叠面板-->
  <p class="easyui-accordion" data-options="fit:true">
  <p data-options="title:&#39;基础菜单&#39;">
   <a href="javascript:void(0)" rel="external nofollow" id="nwtxxb">123</a>
  </p>
  <p data-options="title:&#39;系统菜单&#39;">123</p>
  </p>
 </p>
 <p data-options="region:&#39;center&#39;,title:&#39;中部区域&#39;">
  <!--选项卡面板-->
  <p id="mytabs" class="easyui-tabs" data-options="fit:true">
  <p data-options="title:&#39;123&#39;,closable:true">后台编程</p>
  <p data-options="title:&#39;456&#39;,closable:true">前端开发</p>
  </p>
 </p>
 <p data-options="region:&#39;east&#39;,title:&#39;东部区域&#39;" style="width:100px"></p>
 <p data-options="region:&#39;south&#39;,title:&#39;南部区域&#39;" style="height:100px"></p>
 </body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

jQuery ajoute de nouveaux éléments aux listes dynamiques

Service client en ligne de tiroir jQuery pratique

jquery fusionne dynamiquement les cellules

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery+localStorage implémente une minuterieArticle suivant：jQuery+localStorage implémente une minuterie

Articles Liés

Voir plus