jQuery EasyUI 折叠面板accordion的使用实例(分享)-偶像资源网

1、对折叠面板区域 div 设置 class=”easyui-accordion”

2、在区域添加多个 div，每个 div 就是一个面板（每个面板一定要设置 title 属性）。

3、设置面板属性 fit 为 true，自适应父容器大小

<!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\">
    <div data-options=\"region:\'north\',title:\'你我他学习吧-学习Java的好博客！\'\" style=\"height:100px\"></div>
    <div data-options=\"region:\'west\',title:\'菜单导航\'\" style=\"width:200px\">
      <!--折叠面板-->
      <div class=\"easyui-accordion\" data-options=\"fit:true\">
        <div data-options=\"title:\'基础菜单\'\">面板一</div>
        <div data-options=\"title:\'系统菜单\'\">面板二</div>
      </div>
    </div>
    <div data-options=\"region:\'center\',title:\'中部区域\'\"></div>
    <div data-options=\"region:\'east\',title:\'东部区域\'\" style=\"width:100px\"></div>
    <div data-options=\"region:\'south\',title:\'南部区域\'\" style=\"height:100px\"></div>
  </body>
</html>

以上这篇jQuery EasyUI 折叠面板accordion的使用实例(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

jQuery EasyUI 折叠面板accordion的使用实例(分享)

请登录后发表评论