You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

27 lines
1.6 KiB
JavaScript

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/*
Author : guosheng
QQ : 9169775
Email: cff20@sina.com
Date : 2013-07-25
*/
$.fn.extend({
fxuiTab:function(opt){
//做插件首先是传进来的对象也就是this进行each这样子一个页面上多个区块都可以使用啦
return this.each(function() {
//说说Var的事变量之前肯定是用var的这样子就不会变成全局变量和别的方法冲突了然后最只用一个Var,然后用","分开即可。
var t = $(this),//t就是$(this)因为Jquery里$(this)很多我们可以把这个t选存起来后面好多地方可以用。
o = opt || {}, //如果使用者没有参给o设一个空的对象。
tit = o.tit || t.find('.fxui-tab-tit'), //标签点击的对象。
nav = o.nav || t.find('.fxui-tab-nav'), //内容显示的对象。
evt = o.evt || 'click',//事件可以为click,hover或是mouseover。
eq = o.eq || 0; //初始化的时候可以默认显示第几块。不传值显示第一个。
tit.bind(evt,function(){ //通过bind 传这个evt,事件就可以变动了不一定只是click事件了。
$(this).addClass('curr').siblings(tit).removeClass('curr');//处理标签头加当前的Class样式通过css改变
nav.eq(tit.index($(this))).show().siblings('.fxui-tab-nav').hide();//内容块显示。
}).hover(function(){
$(this).addClass('fxui-tab-hover').siblings(tit).removeClass('fxui-tab-hover'); //标签的tit移上去的时候加一个样式这样子这个标签头可以有默认hover和curr三种状态。
});
evt === 'click' ? tit.eq(eq).click() :tit.eq(eq).mouseover(); //初始化,当前是第几个
})
}
});