Maison > Article > interface Web > Expliquer en détail l'utilisation des abdominaux dans EasyUI

Expliquer en détail l'utilisation des abdominaux dans EasyUI

亚连original: 2018-06-15 16:46:352104parcourir

Ci-dessous, je vais partager avec vous un exemple d'utilisation des onglets du panneau d'onglets jQuery EasyUI. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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 le lien hypertexte, cliquez pour ajouter un nouvel onglet

Syntaxe : page object.easyui plug-in (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(&#39;add&#39;,{
   title:&#39;CSDN博客&#39;,
   content:&#39;学IT，你我他学习吧&#39;
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <p data-options="region:&#39;north&#39;,title:&#39;你我他学习吧-学习Java的好博客！&#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">你我他学习吧</a>
  </p>
  <p data-options="title:&#39;系统菜单&#39;">你我他学习吧</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;CSDN博客&#39;,closable:true">学Java后台编程，就来你我他学习吧！</p>
  <p data-options="title:&#39;博客园&#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>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Comment implémenter la transmission de valeurs et la communication dans les composants vue2.0

webpack 4.0.0-beta.0 Nouvelles fonctionnalités de la version (tutoriel détaillé)

Utiliser SpringMVC pour résoudre les requêtes inter-domaines Vue

Le cycle de vie des composants Vue et Route (tutoriel détaillé)

Contrôle des autorisations utilisateur dans Vue2.0

Paiement WeChat via vue.js

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：Problèmes liés à l'optimisation de la vitesse du webpack3 dans vue-cliArticle suivant：Problèmes liés à l'optimisation de la vitesse du webpack3 dans vue-cli

Articles Liés

Voir plus