집 > 기사 > 웹 프론트엔드 > jQuery EasyUI 접이식 패널 사용

jQuery EasyUI 접이식 패널 사용

php中世界最好的语言원래의: 2018-03-15 14:20:342341검색

이번에는 jQuery EasyUI 접이식 패널 사용법을 가져왔는데, jQuery EasyUI 접이식 패널 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

아래 편집자는 jQuery EasyUI 접이식 패널 아코디언을 사용하는 예를 공유할 것입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집기를 따라 살펴보겠습니다

1. 접는 패널 영역 p

에 대해 class="easyui-accordion"을 설정합니다. 영역에 여러 개의 p를 추가합니다. 각 p는 패널입니다(각 패널은 a로 설정되어야 함). 제목 Properties).

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>

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사를 참조하세요. PHP 중국어 웹사이트!