zoukankan      html  css  js  c++  java
  • jQuery EasyUI 折叠面板accordion的使用实例

    1、对折叠面板区域 div 设置 class=”easyui-accordion” 
    2、在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性)。 
    3、设置面板属性 fit 为 true,自适应父容器大小

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>easyui-折叠面板accordion的使用</title>
     6         <!-- 导入jquery核心类库 -->
     7         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
     8         <!-- 导入easyui类库 -->
     9         <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    10         <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    11         <link rel="stylesheet" type="text/css" href="../css/default.css">
    12         <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    13     </head>
    14     <body class="easyui-layout">
    15         <div data-options="region:'north',title:'你我他学习吧-学习Java的好博客!'" style="height:100px"></div>
    16         <div data-options="region:'west',title:'菜单导航'" style="200px">
    17             <!--折叠面板-->
    18             <div class="easyui-accordion" data-options="fit:true">
    19                 <div data-options="title:'基础菜单'">面板一</div>
    20                 <div data-options="title:'系统菜单'">面板二</div>
    21             </div>
    22         </div>
    23         <div data-options="region:'center',title:'中部区域'"></div>
    24         <div data-options="region:'east',title:'东部区域'" style="100px"></div>
    25         <div data-options="region:'south',title:'南部区域'" style="height:100px"></div>
    26     </body>
    27 </html>
  • 相关阅读:
    css实现自适应正方形
    遇到稍微复杂的场景发现css功力不足
    聊聊缓存
    git学习笔记
    font-size:0的作用
    移动端高清屏适配方案
    react生命周期
    javascript写定时器
    js判断字符串是否以某个字符串开头和js分解字符串
    json.parse()和json.stringify()
  • 原文地址:https://www.cnblogs.com/niwotaxuexiba/p/8098954.html
Copyright © 2011-2022 走看看