Home  >  Article  >  Web Front-end  >  jQuery EasyUI operation folding panel accordion detailed steps

jQuery EasyUI operation folding panel accordion detailed steps

php中世界最好的语言
php中世界最好的语言Original
2018-04-19 14:03:342262browse

This time I will bring you jQuery Detailed steps for EasyUI operation folding panel accordion, what are the precautions for jQuery EasyUI operation folding panel accordion, the following is a practical case, let's take a look take a look.

1. Set class="easyui-accordion"

to the folding panel area p 2. Add multiple p in 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!

Recommended reading:

Detailed explanation of the use of jquery.picsign component

Detailed explanation of the steps for adding values ​​to sub-elements with jQuery

The above is the detailed content of jQuery EasyUI operation folding panel accordion detailed steps. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn