{
if(this[0].tab)
{
return this[0].tab.opentabitem(item,orAdd);
}
return false;
}
$.fn.resizetabpanel =function(w,h)
{
if(this[0].tab)
{
return this[0].tab.resize(w,h);
}
return false;
}
$.fn.setdisabletabitem =function(itemId,disabled)
{
if(this[0].tab)
{
return this[0].tab.setdisabletabitem(itemId,disabled);
}
return false;
}
})(jQuery);
接着我们来一步一步来分析我的实现，开始还是编写jQuery控件的“模板”,关于为什么要这么写，请参考这篇的说明
; (function ($) {
$.fn.tabpanel =function(option){
};
)(jQuery);
接着就是编写默认参数
var dfop ={
items:[], //选项卡数据项 {id,text,classes,disabled,closeable,content,url,cuscall,onactive}
width:500,
height:400,
scrollwidth:100,//如果存在滚动条，点击按钮次每次滚动的距离
autoscroll:true //当选项卡宽度大于容器时自动添加滚动按钮
};
默认参数还是比较简单，我已加上了注释，其中就是item数组的项麻烦些，不过我相信大家通过字面的意思就已经知道大半了，我还是描述一下吧：id 即标示，必须唯一、text显示的文本、classes 特定的样式，如效果中的主页，我加了个图标，就通过此属性实现、disabled 是否禁用、closeable 是否可关闭、
content 和url 和cuscall 三个只要设置其中之一即可，content就是实际的内容html、url标示内容为网页，自动往内容中添加iframe，cuscall则是自定义，即内容显示什么有cuscall执行的结果来决定，可通过此属性来实现异步content内容。
onactive是指当tab项被激活时触发的事件。 是一个接受item内容的函数，详见demo
参数设置完了，通过外部传递的参数来更新默认的参数：
$.extend(dfop, option);
接着就是构建html的部分，这部分比较长，我就不重复贴代码了。
当我们把html构建完成之后，就要给html元素添加事件，包括 选项卡的点击事件，左移按钮，右移按钮的点击事件，选项卡的鼠标hover效果事件等。
function initevents()
{
//reset scoller
resetscoller(); //设置默认是否出现滚动掉
scollerclick(); //滚动条的点击事件，如果存在的话
ulwrap.find(“li:not(.x-tab-edge)”).each(function(e){
inititemevents(this); //给每个选项卡 添加事件
});
}
function inititemevents(liitem)
{
liswaphover.call(liitem); //选项卡的鼠标hover效果
liclick.call(liitem); //选项卡的点击事件
closeitemclick.call(liitem); // 点击关闭按钮的事件
}
至于事件的实现，其实一个个来做，各个击破也就简单了。主要繁琐在控制滚动按钮的出现和禁用等的处理上，其他点击事件等都比较简单。
最后就是公开方法，和为了公开这些方法来编写一些内部方法，这个tabpanel自然还是比较简单易用，同时扩展性。大家可以根据实际的需求做些调整，当然现在的功能应该也满足大部分的要求了。
