使用EasyUI手動建立Tabs選項卡
如果有學過JaueryEasyUI的人應該知道里面有一個功能可以幫助我們來進行建立選項卡，下面給大家介紹一種手動新增tabs選項卡。這是基於EasyUI基礎上寫的，下面開始介紹實現方法。
1.首先引用檔案
<link href="EasyUI/themes/material/easyui.css" rel="stylesheet" /> <link href="EasyUI/themes/icon.css" rel="stylesheet" />--圖片樣式 <script src="EasyUI/jquery.min.js"></script> <script src="EasyUI/jquery.easyui.min.js"></script> <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>--使用語言
2.根據API上面說的要繫結樹形控制元件，繫結的不是用div而是使用ul.
<ul id="tt" class="easyui-tree"></ul>這裡我們不要輕易改變class裡面的內容，因為這是別人已經寫好的，改變的話有可能實現不了你想要的那種效果。
3.給樹形控制元件繫結節點，這裡使用的是物件陣列進行繫結資料來源。
var json = [{
"id": 1,
"text": "C#",
"children": [{
"id": 11,
"text": "HTML",
"attributes": {
"href":"Html.html"
}
},
{
"id": 12,
"text": "DIV+CSS",
"attributes": {
"href": "CSS.html"
}
}]
},
{
"id": 2,
"text": "PHP",
"attributes": {
"href": "php.html"
}
},
{
"id": 3,
"text": "JAVA",
"attributes": {
"href": "java.html"
}
}]
上面程式碼表示我綁定了3個同級節點節點，C#，PHP，JAVA，在C#，下面又綁定了2個子節點HTML，DIV+CSS，
其中 children: 一個節點陣列聲明瞭若干節點。
attributes: 被新增到節點的自定義屬性。
我在裡面新增一個了連結地址屬性，特別注意的是不要寫錯任何字母，要不然會不顯示的。
你以為這樣就完成了嗎？沒有，我們只是寫好了資料來源並沒有繫結在控制元件上，下面繫結在控制元件上。
$("#tt").tree({
data: json
});，tree表明控制元件型別
為實現效果。
4.下面我要點選每個節點都會找到相應的路徑和對應的內容。
$("#tt").tree({
data: json,
//每個節點對應的的點選事件
onClick: function (node) {
//得到文字值
var title = node.text;
//得到每個節點下面attributes的href路徑
var path = node.attributes.href;
//進行判重，如果不進行判重會出現你多次點選同一個節點會出來很多相同的選項卡
//“exists”是根據title進行判斷的，如果存在次此項就會直接找到此項，如果不存在進行新增選項卡
var isExist = $("#Div1").tabs("exists", title);
if (isExist == false) {
$("#Div1").tabs("add", {
title: title,
href: path,
closable:true//在設定為true的時候，選項卡面板將顯示一個關閉按鈕，在點選的時候會關閉選項卡面板。
});
}
else
{
$("#Div1").tabs("select", title);
}
}
});
5.向Div1裡面填充選項卡
<div id="Div1" class="easyui-tabs" style="width: 500px; height: 250px;" data-options="fit:true">
<div title="首頁" style="padding: 20px; display: none;">
首頁內容
</div>
</div>
data-options="fit:true" 表示充滿div
最終結果。
學習EasuUI比較方便的是按照API上面的教程，那是比較有效率的。
以後還會持續更新關於EasyUI這方面的知識，請隨時關注！！！
另外這裡面有些東西比較說的模糊，可以提出來你的疑問，看到的話會回覆的。最後誰知道是如何在部落格上面上傳視訊？？？？
謝謝！！！。