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中可以新增多個瀏覽器列表。
