我已经说过,我不喜欢jQuery UI的统一API,所以我想
在这样调用后获取该组件的实例:
$(function(){
var tabs = $(“ div.tabs”)。tabs();
//注意:现在,tabs是组件的实例
window.setTimeout(function(){
tabs.clickTab(2);
},2000年);
});
为此,我修改了插件代码:
(函数($){
功能标签(标签,窗格){
var that = this;
this.tabs =标签;
this.panes =窗格;
this.current = 0;
this.clickTab(0);
this.tabs.click(function(){
that.clickTab(that.tabs.index(this));
});
}
Tabs.prototype = {
clickTab:函数(索引){
this.current =索引;
this.tabs.removeClass(“ current”)。eq(this.current).addClass(“ current”);
this.panes.hide()。eq(this.current).show();
}
};
$ .fn.tabs = function(){
var选项卡= this.children(“ ul”)。find(“ li> a”);
var panes = this.children(“ div”);
返回新的标签页(标签页,窗格);
};
})
请注意,制表符是在自执行功能中定义的,因此它将
对外界隐藏。
我们在原型中公开了clickTab方法。我很好
本文结束了,下面是一些高级主题。
================================================== ==
如何扩展Tabs类?
这可能有点困难,因为它是私有功能。
没关系,只需更改$ .fn.tabs的原型:
(函数($){
功能标签(标签,窗格){
// ...
}
Tabs.prototype = {
// ...
};
$ .fn.tabs = function(){
// ...
};
$ .fn.tabs.prototype = Tabs.prototype;
});
我们可以像这样扩展Tabs类:
$ .fn.tabs.prototype.getLength = function(){
返回this.tabs.length;
};
$(function(){
var tabs = $(“ div.tabs”)。tabs();
alert(tabs.getLength());
});
或者我们可以使用jQuery核心中介绍的方法,这在
我的上一篇文章中进行了介绍。
(函数($){
$ .fn.tabs = function(){
var选项卡= this.children(“ ul”)。find(“ li> a”);
var panes = this.children(“ div”);
返回新的$ .fn.tabs.prototype.init(标签,窗格);
};
$ .fn.tabs.prototype = {
初始化:功能(标签,窗格){
var that = this;
this.tabs =标签;
this.panes =窗格;
this.current = 0;
this.clickTab(0);
this.tabs.click(function(){
that.clickTab(that.tabs.index(this));
});
},
clickTab:函数(索引){
this.current =索引;
this.tabs.removeClass(“ current”)。eq(this.current).addClass(“ current”);
this.panes.hide()。eq(this.current).show();
}
};
$ .fn.tabs.prototype.init.prototype = $ .fn.tabs.prototype;
});
如果您觉得本文的内容对您的学习有所帮助:
关键字:
恒创嘉年华 主机跨年促销 优惠32%现金