jquery插件解读之tabs
先上代码，符简略关键性说明：
/**
* jQuery EasyUI 1.4.1
*
* Copyright (c) 2009-2014 www.jeasyui.com. All rights reserved.
*
* Licensed under the GPL license: http://www.gnu.org/licenses/gpl.txt
* To use it on other terms please contact us at info@jeasyui.com
*
*/
/**
* tabs - jQuery EasyUI
*
* Dependencies:
* panel
* linkbutton
*
*/
(function($){
...... //你懂，此处省略很多字！
function addTools(container){ //这些都是公共的处理方法，不过仅限内部调用。自己开发时，可以根据需求情况，定义不同的方法。
var opts = $.data(container, 'tabs').options;
var header = $(container).children('div.tabs-header');
if (opts.tools) {
if (typeof opts.tools == 'string'){
$(opts.tools).addClass('tabs-tool').appendTo(header);
$(opts.tools).show();
} else {
header.children('div.tabs-tool').remove();
var tools = $('<div class="tabs-tool"><table cellspacing="0" cellpadding="0" style="height:100%"><tr></tr></table></div>').appendTo(header);
var tr = tools.find('tr');
for(var i=0; i<opts.tools.length; i++){
var td = $('<td></td>').appendTo(tr);
var tool = $('<a href="javascript:void(0);"></a>').appendTo(td);
tool[0].onclick = eval(opts.tools[i].handler || function(){});
tool.linkbutton($.extend({}, opts.tools[i], {
plain: true
}));
}
}
} else {
header.children('div.tabs-tool').remove();
}
}
...... //你懂，此处省略很多字！
$.fn.tabs = function(options, param){
if (typeof options == 'string') { // 这便是api解析器啦~\(≧▽≦)/~，根据参数类型，判断是初始化插件还是调用api。
return $.fn.tabs.methods[options](this, param);
}
options = options || {};
return this.each(function(){
var state = $.data(this, 'tabs');
if (state) {
$.extend(state.options, options);
} else {
$.data(this, 'tabs', {
options: $.extend({},$.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),
tabs: [],
selectHis: []
});
wrapTabs(this);
}
addTools(this);
setProperties(this);
setSize(this);
bindEvents(this);
doFirstSelect(this);
});
};
$.fn.tabs.methods = { //这些是提供给外部使用的api，其实也是只供内部调用，只不过插件根据传入的参数，解析执行不同方法而已。
options: function(jq){
var cc = jq[0];
var opts = $.data(cc, 'tabs').options;
var s = getSelectedTab(cc);
opts.selected = s ? getTabIndex(cc, s) : -1;
return opts;
},
tabs: function(jq){
return $.data(jq[0], 'tabs').tabs;
},
resize: function(jq, param){
return jq.each(function(){
setSize(this, param);
setSelectedSize(this);
});
},
add: function(jq, options){
return jq.each(function(){
addTab(this, options);
});
},
close: function(jq, which){
return jq.each(function(){
closeTab(this, which);
});
},
...... //你懂，此处省略很多字！
};
$.fn.tabs.parseOptions = function(target){
return $.extend({}, $.parser.parseOptions(target, [
'tools','toolPosition','tabPosition',
{fit:'boolean',border:'boolean',plain:'boolean',headerWidth:'number',tabWidth:'number',tabHeight:'number',selected:'number',showHeader:'boolean'}
]));
};
$.fn.tabs.defaults = { // 默认参数设置
width: 'auto',
height: 'auto',
...... //你懂，此处省略很多字！
onUpdate: function(title, index){},
onContextMenu: function(e, title, index){}
};
})(jQuery);
经过上面简单介绍，那我们总结下：
1、插件中的处理方法种类（都是服务核心结构的）
有两种：一是仅供内部实现使用，和我们正常js方法申明一样 function xxx(){ ... ... };
二是作为api供外部调用，一般申明形式为 var metheds = {add:function(container){
//container为jquery对象
return container.each(function(){
// return container.each（）这样写是为了维护链式
... ...
});
},
del:function(container,param){
... ...
},
setSize:function(container,option){
// option一般是 {key1:val1,key2:val2,... ... }
}
... ...
}
为什么如此定义捏？其实也没什么深意，方便下面的核心结构调用呗！
2、插件的核心结构
$.fn.tabs = function(options, param){
if (typeof options == 'string') { // 这便是api解析器啦~\(≧▽≦)/~，根据参数类型，判断是初始化插件还是调用api。
return $.fn.tabs.methods[options](this, param);
}
options = options || {};
return this.each(function(){
var state = $.data(this, 'tabs');
if (state) {
$.extend(state.options, options);
} else {
$.data(this, 'tabs', {
options: $.extend({},$.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),
tabs: [],
selectHis: []
});
wrapTabs(this);
}
addTools(this);
... ...
});
};
