Home >Web Front-end >JS Tutorial >Use of jQuery EasyUI folding panel

Use of jQuery EasyUI folding panel

php中世界最好的语言Original: 2018-03-15 14:20:342395browse

This time I will bring you jQuery the use of EasyUI folding panel, what are the precautions when using jQuery EasyUI folding panel, the following is a practical case, let's take a look.

The editor below 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. Let’s follow the editor to take a look.

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 set the title attribute ).

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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Use of jQuery EasyUI folding panel

Related articles