Maison > Article > interface Web > Utilisation du panneau pliant jQuery EasyUI

Utilisation du panneau pliant jQuery EasyUI

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

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>

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!

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：Utilisation des onglets dans le panneau d'onglets jQuery EasyUIArticle suivant：Utilisation des onglets dans le panneau d'onglets jQuery EasyUI

Articles Liés

Voir plus