如何使用easyUI創建選項卡

選項卡是指在一個窗口中可以顯示多個頁面，每個頁面有不同的內容，由這樣一個個頁面組成的就是選項卡。不僅jQuery代碼可以創建出選項卡工具，easyUI也可以，而且代碼更加簡單易懂，現在我們來使用easyUI代碼創建選項卡。

操作方法

（01）新建文檔雙擊桌面上的Dreamweaver圖標，打開軟件，然後在菜單欄中點擊【文件】--【新建】--【HTML】，新建一張HTML頁面。

（02）重命名新建的文檔系統會給出默認的名稱，但是為了見名知意，我們通常是自己命名，快捷鍵ctrl+s，會彈出一個保存窗口，文件名輸入tabs，保存類型為All Document類型，然後點擊保存按鈕即可。

（03）導入4個js文件首先要將【easyUI文件夾】複製粘貼到站點中，然後在easyUI文件夾中找到4個js文件拉到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/"/>

（04）選項卡代碼然後在body裏面編寫如下的選項卡代碼：<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>

（05）啟動wampserver服務器然後雙擊桌面上的wampserver圖標，啟動wampserver服務器，當圖標變成綠色説明啟動完成。

（06）預覽效果點擊Dreamweaver的地球圖標，選擇【在360se瀏覽】即可以在360瀏覽器中預覽效果。

（07）在瀏覽器中的效果如下圖所示，要記得刪除代碼中的display:none，否則選項卡將不能切換。

（08）代碼解析（1）class="easyui-tabs"説明是tabs選項卡，class是類；（2）style="width:500px;height:250px;"選項卡的高度和寬度，可以調節與刪除；（3）data-options="closable:true"説明選項卡是可關閉的；（3）iconCls:'icon-reload'選項卡的頭部圖標；

特別提示

如果是咋手冊中複製的代碼，要記得刪掉display：none代碼，否則將無法實現選項卡的切換功能。