為了復習鞏固jQuery的插件開發、HTML和CSS方面的知識，做了一個簡單的tab選項卡插件，簡單記錄一下開發、使用的過程，以備日后使用。
一、插件效果
tab選項卡插件常用的功能均已實現，包括：動態添加選項卡、關閉選項卡、選中指定選項卡、判斷選項卡是否選中、判斷選項卡是否存在等。
效果如下：
二、插件內部HTML元素結構
<div id="main"> <div class="tab"> <ul class="tab-header clearfix"> <li target="tab4" class="tab-header-item tab-header-selected"> 管理員修改 <span class="close"></span> </li> <li target="tab3" class="tab-header-item"> 管理員添加 <span class="close"></span> </li> </ul> <div class="tab-content" style="height: 342px;"> <div id="tab4" class="tab-content-item"> <!-- 面板內容 --> </div> <div id="tab3" class="tab-content-item hide"> <!-- 面板內容 --> </div> </div> </div> </div>
div.tab用於展示一個tab選項卡。
ul.tab-header用於擺放tab標簽，一個li元素就是一個tab標簽，li的target屬性是tab選項卡的唯一標識，關閉、選中、判斷是否選中、判斷是否存在都是使用這個屬性作為參數的，如果li元素添加了tab-header-selected樣式，代表此選項卡被選中，li中的span.close為關閉按鈕，點擊時會關閉選項卡。
div.tab-content用於擺放tab選項卡面板，里面的每一個div元素代表一個選項卡面板，面板的id屬性和tab標簽的target屬性值一致。如果div元素添加了hide樣式，這個面板不會顯示。
三、主要元素樣式
/* tab樣式 */
.tab { height: 100%; margin: 0; border: 1px solid #dddddd; }
/* tab標簽部分 */
.tab .tab-header { height: 30px; padding: 5px 0 0 2px; font-size: 12px; line-height: 30px; background-color: #f6f6f6; border-bottom: 1px solid #dddddd; }
.tab .tab-header-item { position: relative; float: left; margin: 0 2px; padding: 0 20px 0 10px; border: 1px solid #dddddd; border-bottom: none; border-radius: 7px 7px 0 0; cursor: pointer; }
/* 標簽選中樣式 */
.tab .tab-header-item.tab-header-selected { background: #ffffff; }
/* 關閉按鈕樣式 */
.tab .tab-header-item .close { display: inline-block; position: absolute; top: 8px; right: 0; width: 16px; height: 16px; background: url(../img/tabs_icons.png) no-repeat -34px center; opacity: 0.5; }
.tab .tab-header-item .close:hover { opacity: 1; }
/* 內容面板樣式 */
.tab .tab-content { overflow-y: auto; padding: 10px 10px; border-bottom: 2px solid transparent; }
.tab .tab-content .tab-content-item { height: 100%; }
.tab .tab-content .tab-content-item.hide { display: none; }
四、主要功能函數
1、添加tab選項卡函數
/** * 添加tab選項卡 * @param {Object} $tab * @param {Object} param {"title": "", "id": "", "content": ""} */ function addTab($tab, param) { if (isExists($tab, param["id"])) { // 如果選項卡已經存在，則調用selectTab函數將其選中 selectTab($tab, param["id"]); } else{ // 如果選項卡不存在，則先創建再將其選中 // 去掉選項卡標簽的選中樣式 $tab.children("ul").children().removeClass("tab-header-selected"); // 創建選項卡標簽 $newHeaderItem = $("<li></li>"); $newHeaderItem .text(param["title"]) .attr("target", param["id"]) .addClass("tab-header-item").addClass("tab-header-selected") .append($("<span class=\"close\"></span>")).appendTo($tab.children("ul")); // 隱藏所有選項卡面板 $tab.children("div").children().addClass("hide"); // 創建新的選項卡面板 $newContentItem = $("<div></div>"); $newContentItem .html(param["content"]) .attr("id", param["id"]) .addClass("tab-content-item")//.addClass("hide") .appendTo($tab.children("div")); } }
2、從遠程url獲取數據添加tab選項卡函數
/** * 添加tab選項卡和面板，再從遠程url獲取數據填充到面板中 * @param {Object} $tab * @param {Object} param {"title": "", "id": "", "url": "", "method": ""} */ function addRemoteTab($tab, param) { // 添加選項卡 addTab($tab, {"title": param["title"], "id": param["id"], "content": ""}); // 獲取數據，然后填充到新添加的面板 $.ajax({ type: param["method"] || "post", dataType: "html", url: param["url"], cache: false, success: function(data) { // 填充數據到面板 $tab.find("#" + param["id"]).html(data); } }); }
3、關閉指定tab選項卡
/** * 刪除tab選項卡 * @param {Object} $tab * @param {Object} tabId */ function removeTab($tab, tabId) { // 獲取待刪除選項卡標簽 var headerItem = $tab.children("ul").children("li[target="+ tabId +"]"); // 獲取該選項卡是否被選中 var selected = headerItem.hasClass("tab-header-selected"); // 獲取前一個選項卡 var prevItem = headerItem.prev(); // 如果沒有前一個，則獲取后一個 if (!prevItem[0]) { prevItem = headerItem.next(); } // 刪除選項卡標簽 headerItem.remove(); // 刪除選項卡面板 $tab.children("div").children("#" + tabId).remove(); // 如果待刪除選項卡已經被選中且有相鄰標簽，則將相鄰選項卡選中 if (selected && prevItem) { // 標簽樣式 prevItem.addClass("tab-header-selected"); // 面板樣式 $tab.children("div") .children("#" + prevItem.attr("target")).removeClass("hide"); } }
4、選中指定tab選項卡
/** * 選中指定tab標簽 * @param {Object} $tab * @param {Object} tabId */ function selectTab($tab, tabId) { // 調整選項卡標簽樣式 $tab .find("li[target=" + tabId + "]").addClass("tab-header-selected") .siblings().removeClass("tab-header-selected"); // 調整選項卡面板樣式 $tab .children("div") .children("#" + tabId).removeClass("hide") .siblings().addClass("hide"); }
5、判斷指定tab選項卡是否選中
/** * 判斷是否選中指定tab標簽 * @param {Object} $tab * @param {Object} tabId */ function isSelected($tab, tabId) { return $tab.find("li[target=" + tabId + "]").hasClass("tab-header-selected"); }
6、判斷指定tab選項卡是否存在
/** * 判斷指定tab標簽是否存在 * @param {Object} $tab * @param {Object} tabId */ function isExists($tab, tabId) { return $tab.find("li[target=" + tabId + "]")[0] != undefined; }
五、插件初始化函數
(function($) { /** * 初始化tab總高度、內容面板高度 * @param {Object} $tab */ function initContentHeight($tab) { $tab.css("height", ($tab.parent().height() - 2) + "px") .find(".tab-content").css("height", ($tab.parent().height() - 58) + "px"); //.children().css("height", ($tab.parent().height() - 56) + "px"); } /** * 初始化tab選項卡、面板樣式 * @param {Object} $tab */ function initTab($tab) { $tab .children("ul").addClass("tab-header")//.addClass("clearfix") .children("li").addClass("tab-header-item").append($("<span class=\"close\"></span>")) .eq(0).addClass("tab-header-selected"); $tab .children("div").addClass("tab-content") .children("div").addClass("tab-content-item").addClass("hide") .eq(0).removeClass("hide"); } /** * 初始化選項卡點擊事件、關閉按鈕點擊事件 * @param {Object} $tab */ function initEvents($tab) { $tab // 選項卡點擊事件 .delegate(".tab-header-item", "click", function(){ var selected = $(this).hasClass("tab-header-selected"); if (!selected) { // 如果這個選項卡沒有選中，就調用selectTab函數進行選中 selectTab($tab, $(this).attr("target")); } }) // 關閉按鈕點擊事件 .delegate(".close", "click", function() { // 獲取需要關閉的tab標簽的tabId var tabId = $(this).parent().attr("target"); // 調用removeTab函數關閉指定標簽 removeTab($tab, tabId); }); } $.fn.tab = function(options, param) { // 保存對象 var tab = $(this); if (typeof options == 'string') { switch(options){ case 'addTab': return addTab(tab, param); case 'addRemoteTab': return addRemoteTab(tab, param); case 'removeTab': return removeTab(tab, param); case 'selectTab': return selectTab(tab, param); case 'isSelected': return isSelected(tab, param); case 'isExists': return isExists(tab, param); } } options = options || {}; return this.each(function() { // 初始化tab選項卡、面板樣式 initTab(tab); // 初始化tab總高度、內容面板高度 initContentHeight(tab); // 初始化選項卡點擊事件、關閉按鈕點擊事件 initEvents(tab); }); }; })(jQuery);
六、demo頁面代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" > <title>jQuery插件開發學習</title> <!-- jquery庫 --> <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js" ></script> <!-- tab庫 --> <script type="text/javascript" src="js/tab.js" ></script> <!-- tab樣式文件 --> <link rel="stylesheet" href="css/tab.css" /> <!-- accordion庫 --> <script type="text/javascript" src="js/accordion.js" ></script> <!-- accordion樣式文件 --> <link rel="stylesheet" href="css/accordion.css" /> <script> $(function() { $(".tab").tab(); $(".accordion").accordion(); }); </script> <!-- demo頁面樣式 --> <link rel="stylesheet" href="css/demo.css" /> </head> <body> <div id="main"> <div id="left"> <!-- accordioon組件 --> <ul class="accordion"> <li accordion-id="menu1" class="active">插件使用</li> <li> <ul> <li><a href="javascript:;" onclick="$('.tab').tab('addRemoteTab', {'title': 'tab插件', 'id': 'tab1', 'url': 'http://127.0.0.1:8020/UI/doc/tab_doc.html', 'method': 'get'});">選項卡插件</a></li> <li><a href="javascript:;" onclick="$('.tab').tab('addRemoteTab', {'title': 'accordion插件', 'id': 'tab2', 'url': 'http://127.0.0.1:8020/UI/doc/accordion_doc.html', 'method': 'get'});">手風琴插件</a></li> </ul> </li> <li accordion-id="menu2">管理員管理</li> <li> <ul> <li><a href="javascript:;" onclick="$('.tab').tab('addRemoteTab', {'title': '管理員查看', 'id': 'tab3', 'url': 'http://127.0.0.1:8020/UI/ajax/admin_list.html', 'method': 'get'});">管理員查看</a></li> <li><a href="javascript:;" onclick="$('.tab').tab('addTab', {'title': '管理員添加', 'id': 'tab4', 'content': '<p>管理員添加Content</p>'});">管理員添加</a></li> <li><a href="javascript:;" onclick="$('.tab').tab('addTab', {'title': '管理員修改', 'id': 'tab5', 'content': '<p>管理員修改Content</p>'});">管理員修改</a></li> </ul> </li> <li accordion-id="menu3">用戶管理</li> <li> <ul> <li><a href="javascript:;">用戶查看</a></li> <li><a href="javascript:;">用戶添加</a></li> <li><a href="javascript:;">用戶修改</a></li> </ul> </li> <li accordion-id="menu4">系統管理</li> <li> <ul> <li><a href="javascript:;">黑名單</a></li> <li><a href="javascript:;">角色管理</a></li> </ul> </li> </ul> <!-- accordioon組件 END --> </div> <div id="right"> <!-- tab組件 --> <div class="tab""> <ul></ul> <div></div> </div> <!-- tab組件 END --> </div> </div> </body> </html>
七、右鍵關閉標簽功能
使用jQuery開發tab選項卡插件（可以右鍵關閉多個標簽）
八、代碼下載
https://github.com/xuguofeng/jq-ui