1、LULU-UI介紹
本系列是學習基于JQuery1.9.0版本的開源UI框架LULU-UI源碼文章。自己的目標是學習一些常用組件的寫法，以便以后不能使用JS庫的時候能自己寫。對于LULU-UI的學習過程是先從單依賴組件來漸進學習，本次記錄的是我們常用的Tab選項卡的源碼學習。點擊 效果展示 和 源碼地址 可以看到Tab選項卡的效果，以及Tab選項卡插件在頁面的使用和Tab源碼。
2、HTML部分
<div id="tabView" class="ui-tab-tabs">
<a href="javascript:" class="ui-tab-tab" data-rel="tabTarget1">選項卡1</a>
<a href="javascript:" class="ui-tab-tab" data-rel="tabTarget2">選項卡2</a>
<a href="javascript:" class="ui-tab-tab checked" data-rel="tabTarget3">選項卡3</a>
</div>
<div class="ui-tab-contents">
<div id="tabTarget1" class="ui-tab-content">內容1</div>
<div id="tabTarget2" class="ui-tab-content">內容2</div>
<div id="tabTarget3" class="ui-tab-content checked">內容3</div>
</div>
html部分不多做介紹了，外面可以包裹一層DIV來控制整體的樣式。需要注意的是
a標簽需要綁定dataTarget屬性，內容部分需要綁定id屬性與a標簽的data-rel屬性做關聯。
2、CSS部分
.ui-tab-tabs {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #d0d0d5;
position: relative; }
.ui-tab-tab {
float: left;
margin-right: 50px;
font-size: 16px;
text-align: center;
color: #4c5161;
overflow: hidden;
cursor: pointer; }
.ui-tab-tab a {
display: block;
color: #4c5161; }
.ui-tab-tab:hover,
.ui-tab-tab:hover a {
color: #00a5e0; }
.ui-tab-tabs .checked,
.ui-tab-tabs .checked a,
.ui-tab-tabs .checked:hover {
line-height: 36px;
padding-top: 2px;
margin-bottom: -1px;
border-bottom: 3px solid;
color: #00a5e0;
cursor: default; }
.ui-tab-line {
display: none;
position: absolute;
bottom: -1px;
left: 0;
width: 0;
border-bottom: 3px solid #00a5e0;
-webkit-transition: all .35s;
transition: all .35s; }
.ui-tab-tabs > .ui-tab-line ~ .ui-tab-tab {
line-height: 40px;
padding-top: 0;
margin-bottom: 0;
border-bottom: 0; }
/* contents */
.ui-tab-contents {
margin-top: 30px; }
.ui-tab-content {
display: none; }
.ui-tab-content.checked {
display: block; }
CSS部分設計簡潔，有助于自己學習的時候按照這種設計CSS的思路來編寫自己的CSS。
3、JS部分：Tab選項卡JS源碼幾個大步驟
靜態變量的定義通用方法的定義插件的定義對傳入方法的參數進行處理初始化索引事件綁定url無刷新標記選項卡地址模擬點擊事件頁面初始化調用一次
下面通過注釋的方式來對Tab選項卡代碼的解讀
/**
* @Tab.js
* @author xunxuzhang
* @version
* Created: 15-06-12
*/
(function (global, factory) {
if (typeof define === 'function' && (define.amd || define.cmd)) {
define(factory);
} else {
global.Tab = factory();
}
}(this, function () {
/**
* 定制級極簡的選項卡
* 選項卡效果本質上就是單選框切換效果
* 因此，狀態類名使用.checked
* @使用示例
* new Tab($('#container > a'), {
* callback: function() {}
* });
* 或者包裝器用法
* $('#container > a').tab({
* callback: function() {}
* });
*/
//靜態變量的定義
var STATE = 'checked';
/*根據傳入的key（key默認是a標簽自定義屬性的data-rel）來獲取屬性的value值(value值對應的是content內容區域的ID)*/
$.fn.eqAttr = function(key) {
key = key || "data-rel";
// 獲得屬性對應的值
var value = $(this).attr(key);
if (!value) return $();
// 當作id來處理
var target = $("#" + value);
if (target.length) return target;
// 否則當作className處理
return $("." + value);
};
// 根據屬性獲得對應的元素，設置為JQuery插件
$.fn.tab = function(options) {
//通過data()方法來判斷是否已經綁定了Tab對象，如果已經綁定就直接返回。防止重復調用。
if (!$(this).data('tab')) {
$(this).data('tab', new Tab($(this), options));
}
};
$.queryString = function(key, value, str) {
// 有則替換，無則加勉
var href = (str || location.href).split('#')[0], root = '', hash = location.hash;
// 查詢數組
var arr_query = href.split('?'), arr_map = [];
if (arr_query.length > 1) {
if (arr_query[1] != '') {
arr_map = $.grep(arr_query[1].split('&'), function(query) {
return query.split('=')[0] != key;
});
}
root = arr_query[0] + '?' + arr_map.join('&') + '&';
root = root.replace('?&', '?');
} else {
root = href + '?';
}
return root + key + '=' + value + hash;
};
/*Tab插件的主要代碼*/
var Tab = function(el, options) {
// 選項卡元素，點擊主體
el = $(el);
// 如果元素沒有，打道回府
if (el.length == 0) return;
// 下面3語句參數獲取
options = options || {};
var defaults = {
//事件類型
eventType: 'click',
//選中選項卡的索引值。默認'auto'表示根據選項卡上的狀態類名，如.checked獲取index值。
index: 'auto',
// 是否通過url無刷新標記選項卡地址。默認true表示選項卡切換時候查詢地址變化。IE10+增強功能。IE9-使用hash標記。
history: true,
//點擊切換的回調。其中，上下文this指點擊元素DOM對象。支持4個參數。分別表示：當前點擊元素選項卡元素，恢復到非選中態的選項卡元素，顯示的面板元素，恢復到非選中態的面板元素。
callback: $.noop
};
//合并參數對象
var params = $.extend({}, defaults, options);
// 很重要的索引，indexTab設置為當前傳入的索引值
var indexTab = params.index;
// 首先，循環對象來獲得索引值，綁定到對應的元素上
el.each(function(index) {
if (typeof indexTab != 'number' && $(this).hasClass(STATE)) {
indexTab = index;
}
$(this).data('index', index);
});
//如果傳入的不是數字，索引值默認為 0
if (typeof indexTab != 'number') {
indexTab = 0;
}
// 獲得選項卡對應的面板元素
// 兩種情況
// 1. 直接切換
// 2. ajax并載入
// 目前先第一種
// 則直接就是頁面元素
// 事件gogogo
el.on(params.eventType, function(event) {
//如果點擊的是當前已經選中的樣式
if ($(this).hasClass(STATE)) {
//如果是代碼方式觸發事件,就執行回調函數 (目的是頁面初始化的時候執行回調函數一次)
if (event.isTrigger) {
//執行傳入的回調函數。
params.callback.call(this, this, $(), $(), $());
}
//直接返回，不再執行后面代碼
return;
}
// 選項卡樣式變變變
// 類名變化
var targetTab = $(this).addClass(STATE),
// 要移除類名的選項卡
resetTab = el.eq(indexTab).removeClass(STATE);
// 面板的變化（添加樣式和移除樣式）
var targetPanel = targetTab.eqAttr().addClass(STATE),
resetPanel = resetTab.eqAttr().removeClass(STATE);
// 重新獲取當前選中的索引
indexTab = targetTab.data('index');
// 執行回調方法
params.callback.call(this, targetTab, resetTab, targetPanel, resetPanel);
//是否通過url無刷新標記選項卡地址
if (/^(:?javas|#)/.test(this.getAttribute('href'))) {
var rel = targetTab.attr('data-rel');
if (params.history && history.replaceState) {
history.replaceState(null, document.title, $.queryString('targetTab', rel));
} else if (params.history) {
location.hash = '#targetTab=' + rel;
}
event.preventDefault();
}
});
//模擬用戶點擊事件，頁面初始化調用一次該方法
$(function() {
el.eq(indexTab).trigger(params.eventType);
});
// 暴露的屬性或方法，供外部調用
this.el = {
tab: el
};
this.params = params;
};
return Tab;
}));
上述就是對JS源碼的解讀部分。源碼難度其實并不大，需要花點時間去學習，通過對源碼的學習，會讓自己編寫插件更有思路，讓自己編程方式更簡潔。
