如何使用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'表示的頭部圖標，圖標可變；

特別提示

摺疊面板又稱為可伸縮面板，不止easyUI代碼可以編寫出可伸縮面板，還可以通過使用jQuery代碼來編寫，但是用easyUI比較簡單，而jQuery是免費的，因此兩者各有優缺點。