如何使用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是免费的，因此两者各有优缺点。