Utilisation du panneau pliant jQuery EasyUI-js tutoriel-php.cn

Utilisation du panneau pliant jQuery EasyUI

php中世界最好的语言

Libérer： 2018-03-15 14:20:34

original

2387 Les gens l'ont consulté

Cette fois, je vais vous présenter l'utilisation du panneau pliable jQuery EasyUI, et quelles sont les précautions lors de l'utilisation du panneau pliable jQuery EasyUI. Ce qui suit est un cas pratique, prenons. un regard.

L'éditeur suivant partagera avec vous un exemple d'utilisation de l'accordéon à panneau pliant jQuery EasyUI. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour jeter un œil

1. Définissez class="easyui-accordion" pour la zone du panneau pliant p

2 Ajoutez plusieurs p à la zone, chaque p est un panneau. (Chaque panneau doit définir l'attribut titre ).

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>easyui-折叠面板accordion的使用</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">
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></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;">面板一</p>
        <p data-options="title:&#39;系统菜单&#39;">面板二</p>
      </p>
    </p>
    <p data-options="region:&#39;center&#39;,title:&#39;中部区域&#39;"></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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'informations, veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Service client en ligne pratique de type tiroir jQuery

Explication détaillée de l'utilisation du plug-in de visualisation d'images Magnify

jquery fusionne dynamiquement les cellules

C3+jQuery pour créer des effets d'animation et des fonctions de rappel

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!