1、對折疊面板區域 div 設置 class=”easyui-accordion”
2、在區域添加多個 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:'系統菜單'">面板二</div> </div> </div> <div data-options="region:'center',title:'中部區域'"></div> <div data-options="region:'east',title:'東部區域'" style="width:100px"></div> <div data-options="region:'south',title:'南部區域'" style="height:100px"></div> </body></html>
以上這篇jQuery EasyUI 折疊面板accordion的使用實例(分享)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
