jQuery EasyUI 折疊面板accordion的使用實例(分享)

更新時間：2017年12月25日 08:30:03 作者：你我他學習吧

下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1、對折疊面板區(qū)域 div 設置 class=”easyui-accordion”

2、在區(qū)域添加多個 div，每個 div 就是一個面板（每個面板一定要設置 title 屬性）。

3、設置面板屬性 fit 為 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">
    <div data-options="region:'north',title:'你我他學習吧-學習Java的好博客！'" style="height:100px"></div>
    <div data-options="region:'west',title:'菜單導航'" style="width:200px">
      <!--折疊面板-->
      <div class="easyui-accordion" data-options="fit:true">
        <div data-options="title:'基礎菜單'">面板一</div>
        <div data-options="title:'系統(tǒng)菜單'">面板二</div>
      </div>
    </div>
    <div data-options="region:'center',title:'中部區(qū)域'"></div>
    <div data-options="region:'east',title:'東部區(qū)域'" style="width:100px"></div>
    <div data-options="region:'south',title:'南部區(qū)域'" style="height:100px"></div>
  </body>
</html>

以上這篇jQuery EasyUI 折疊面板accordion的使用實例(分享)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

jQuery實現(xiàn)簡易的天天愛消除小游戲
貌似最近騰訊手機游戲天天愛消除挺火的，我也是粉絲之一，最近對javascript一直比較感興趣然后想用js仿造一個，應該不是太難，
2015-10-10
分享jQuery插件的學習筆記
這篇文章主要為大家分享了jQuery插件的學習筆記，感興趣的小伙伴們可以參考一下
2016-01-01
jquery網(wǎng)頁元素拖拽插件效果及實現(xiàn)
效果說明：配合已有css樣式，載入插件后，網(wǎng)頁元素可以隨意在窗口內拖拽，設置了原位置半透明和拖拽半透明的效果選項，可根據(jù)需要選擇。另外，當頁面上有多個可拖拽元素時，可以載入另外一個用于設置z-index的插件，模擬windows窗口點擊置頂效果。
2013-08-08
淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對象的方法
下面小編就為大家?guī)硪黄獪\談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對象的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
jquery實現(xiàn)上下左右滑動的方法
這篇文章主要介紹了jquery實現(xiàn)上下左右滑動的方法,是jQuery特效中非常典型的應用,需要的朋友可以參考下
2015-02-02
jquery select(列表)的操作（取值/賦值）
jquery對<select>的操作比較麻煩，我把常用的收集如下
2011-03-03
JQuery中的常用事件、對象屬性與使用方法分析
這篇文章主要介紹了JQuery中的常用事件、對象屬性與使用方法,結合實例形式分析了jquery事件、對象屬性、方法相關使用技巧,需要的朋友可以參考下
2019-12-12
JavaScript對象之間的轉換 jQuery對象和原聲DOM
jQuery對象和原聲DOM，JavaScript對象之間的轉換，學習jquery的朋友可以參考下。
2011-03-03
jquery插件ajaxupload實現(xiàn)文件上傳操作
這篇文章主要為大家詳細介紹了jquery插件ajaxupload實現(xiàn)文件上傳操作，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery實現(xiàn)的電子時鐘效果完整示例
這篇文章主要介紹了jQuery實現(xiàn)的電子時鐘效果,結合完整實例形式分析了jQuery日期與時間操作技巧與相關函數(shù)使用注意事項,需要的朋友可以參考下
2018-04-04