Maison > Article > interface Web > Étapes détaillées de l'accordéon du panneau pliant pour l'opération jQuery EasyUI

Étapes détaillées de l'accordéon du panneau pliant pour l'opération jQuery EasyUI

php中世界最好的语言original: 2018-04-19 14:03:342255parcourir

Cette fois, je vais vous apporter les étapes détaillées de jQuery EasyUI faisant fonctionner l'accordéon à panneau pliant, quelles sont les précautions pour jQuery EasyUI faisant fonctionner l'accordéon à panneau pliant, ce qui suit est un cas pratique , jetons un coup d'œil ensemble Jetez un œil.

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

2. Ajoutez plusieurs p dans 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 des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation du composant jquery.picsign

Explication détaillée des étapes d'ajout affectations aux éléments enfants avec jQuery

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!

php jquery easyui class

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：Comment jQuery EasyUI exploite les onglets du panneau d'ongletsArticle suivant：Comment jQuery EasyUI exploite les onglets du panneau d'onglets

Articles Liés

Voir plus