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>
  • 相关阅读:
    hdu 4786 Fibonacci Tree
    Sae 上传文件到Storage
    Java通过代理server上网
    iOS 利用Socket UDP协议广播机制的实现
    android_handler(三)
    shell 脚本执行日志通用模块
    adt-bundle-linux-x86_64-20131030下新建project提示找不到adb和R.java问题的解决
    【MongoDB】The Access control of mongodb
    Java——设计模式(装饰模式_IO)
    动态顺序表
  • 原文地址:https://www.cnblogs.com/niwotaxuexiba/p/8098954.html
Copyright © 2011-2022 走看看