How to use accordion in EasyUI-JS Tutorial-php.cn

How to use accordion in EasyUI

亚连

Release： 2018-06-15 17:19:57

Original

2060 people have browsed it

Below I will share with you an example of using jQuery EasyUI folding panel accordion. It has a good reference value and I hope it will be helpful to everyone.

1. Set class="easyui-accordion" for the folding panel area p

2. Add multiple p's to the area, each p is a panel (each panel must be set with a title Attributes).

3. Set the panel attribute fit to true and adapt the size of the parent container

<!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>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement timed hiding dialog box in jQuery

How to implement DIV delay time in JS/jQuery Disappear or display after seconds

Use native js to realize three-level linkage of provinces and municipalities

The above is the detailed content of How to use accordion in EasyUI. For more information, please follow other related articles on the PHP Chinese website!