easyUI中组件的综合使用
easyUI是前端框架之一，也是最为常用的前端框架之一。它里面包含了很多的组件，各个组件之间可以独立使用，也可以结合起来使用。学习easyUI首先要先弄懂easyUI各个组件的作用和使用方法，然后再将各个组件结合起来使用。现在，我们来看看easyUI中各个组件的综合使用吧。
操作方法
（01）新建文档首先双加桌面上的Dreamweaver图标，打开软件。其次在工具的主界面中找到：【文件】--【新建】---【HTML页面】，创建一张HTML页面的文档。
（02）导入4个js文件下载easyUI包并解压，将解压之后的文件夹导入到站点或www文件夹里面。然后在easyUI文件夹中拉出4个js文件，文件如下所示：<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）创建页面布局然后在easyUI手册中复制下layout布局代码到HTML页面的body部位。并去掉east和south面板。代码如下所示：<body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body>
（04）页面的头部North面板去掉title标题，然后在面板中随便写上网站的文字。代码如下所示： <div data-options="region:'north',split:true"style="height:70px;background:#CFC;line-height:70px;font-size:30px;font-family:'微软雅黑';color:red;overflow:hidden;">搜狗</div>
（05）west面板：在west面板中插入折叠面板/可伸缩面板 <div data-options="region:'west',title:'West',split:true" style="width:100px;"> <div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> content1 </div> <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div> </div>
（06）在center面板中插入tabs选项卡，代码如下所示： <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div>
（07）如果电脑上没有安装360浏览器的话，点击Dreamweaver中的地球图标，在下来菜单中找到【编辑浏览器列表】，在首选参数页面，点击浏览器旁边的【+】号，然后在添加浏览器中输入浏览器名称和浏览【浏览器的安装路径】，然后点击确定按钮即可。
特别提示
easyUI组合控件编码代码的话，一般是这么布局的，还可以根据页面的实际需要编辑不同的页面，在实际开发前端的时候，页面要美观点，添加style修饰。在Dreamweaver中可以添加多个浏览器列表。
