如何使用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程式碼，否則將無法實現選項卡的切換功能。