집 > 기사 > 웹 프론트엔드 > EasyUI에서 아코디언을 사용하는 방법

EasyUI에서 아코디언을 사용하는 방법

亚连원래의: 2018-06-15 17:19:572064검색

아래에서는 참고할만한 가치가 있는 jQuery EasyUI 접이식 패널 아코디언을 사용한 예를 여러분과 공유하겠습니다. 모든 분들께 도움이 되기를 바랍니다.

1. 접는 패널 영역 p에 대해 class="easyui-accordion"을 설정합니다.

2. 영역에 여러 p를 추가합니다. 각 p는 패널입니다(제목 속성은 각 패널에 대해 설정되어야 함).

3. 패널 속성을 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">
    <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>

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

EasyUI에서 아코디언을 사용하는 방법

관련 기사