如何使用easyUI創建摺疊面板

Accordion摺疊面板也叫可伸縮面板、手風琴選單等等，透過名字我們可以大體知道它的作用，在很多網站中都有設定這個摺疊面板的，可以透過jQuery代碼來編寫，也可以使用easyUI代碼編寫，現在我們以easyUI代碼編寫的形式來看看怎麼在文檔中創建出一個摺疊面板。由於easyUI是前端框架，所以我們直接用Dreamweaver軟件來編寫代碼即可。

操作方法

（01）創建檔案鼠標雙擊桌面上的Dreamweaver圖標，開啟軟件，點擊選單欄中的【檔案】--【新建】--【HTML】類型，創建一個HTML文檔。

（02）在head頭部引入4個js檔案，檔案的路徑如下，首先要匯入easyUI檔案夾到站點中，然後在站點中找到檔案拉到head頭部，不可直接複製。<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/"/><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/>

（03）在body裏面編寫accordion代碼<div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="珠穆朗瑪峯" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> 珠穆朗瑪峯珠穆朗瑪峯珠穆朗瑪峯珠穆朗瑪峯珠穆朗瑪峯珠穆朗瑪峯珠穆朗瑪峯 </div> <div title="喜馬拉雅山" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> 喜馬拉雅山喜馬拉雅山喜馬拉雅山喜馬拉雅山喜馬拉雅山喜馬拉雅山喜馬拉雅山 </div> <div title="塔里木盆地"> 塔里木盆地塔里木盆地塔里木盆地塔里木盆地塔里木盆地塔里木盆地塔里木盆地 </div> </div>

（04）啓動wampserver服務器預覽代碼之前，要先啓動wampserver服務器。雙擊桌面上的wampserver圖標，當桌面右下角的w形圖標由紅變黃最後變綠時，說明wampserver服務器已經啓動了。

（05）在瀏覽器中預覽點擊Dreamweaver中的【地球形狀圖標】，在下拉列表框中選擇【預覽在360se】表示在360瀏覽器中預覽。

（06）效果在瀏覽器中可以看到效果，摺疊面板如下圖所示。點擊摺疊面板的標題可以檢視對應的面板內容。

（07）代碼解析現在我們對可伸縮面板的相關面板進行解析下：（1） class="easyui-accordion" :說明代碼是摺疊面板，class表示的是一個類；（2）style="width:300px;height:200px;"定義摺疊面板的大小，寬度和高度，可以不定義，但是一般要定義下大小，大小可以根據具體的網頁而定；（3）title="珠穆朗瑪峯" 表示的是一個面板的標題；（4）iconCls:'icon-save'表示的頭部圖標，圖標可變；