Maison > Article > interface Web > Utilisation du panneau pliant jQuery EasyUI
Utilisation du panneau pliant jQuery EasyUI
- php中世界最好的语言original
- 2018-03-15 14:20:342302parcourir
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:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></p> <p data-options="region:'west',title:'菜单导航'" style="width:200px"> <!--折叠面板--> <p class="easyui-accordion" data-options="fit:true"> <p data-options="title:'基础菜单'">面板一</p> <p data-options="title:'系统菜单'">面板二</p> </p> </p> <p data-options="region:'center',title:'中部区域'"></p> <p data-options="region:'east',title:'东部区域'" style="width:100px"></p> <p data-options="region:'south',title:'南部区域'" 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!