封装tab栏切换功能
// 第一种封装:
// btns 点击某个选项
// cons 对应的显示内容
// active 点击后的样式
function table(btns, cons, active) {
$(btns).click(function () {
$(this).addClass(active).siblings().removeClass(active);
$(cons).eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
});
}
//调用传参
table()
// 第二种封装:
function table(options) {
options = Object.assign({
btns: '',
cons: '',
active: ''
}, options);
$(options.btns).click(function () {
$(this).addClass(options.active).siblings().removeClass(options.active);
$(options.cons).eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
});
}
//调用传参 对象形式
table({ })
//第三种:面向对象jq插件开发
$.fn.tab = function (opt) {
//ES6 class
class Tab {
constructor(data) { //属性
this.defaults = {
active: '.active'
};
//替补方案:
$.extend(this.defaults, data);
}
init() {
//查找节点,绑定事件
this.btns = $(this.defaults.btns);
this.cons = $(this.defaults.cons);
let that = this.defaults;
let cons = this.cons;
$(this.btns).click(function () {
$(this).addClass(that.active).siblings().removeClass(that.active);
$(cons).eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
});
}
}
let t = new Tab(opt);//创建一个实例
t.init();
}
//使用插件
$('#box').tab({
btns: '#box input',
cons: '#box .conbox',
active: 'active'
});
//第四种:狗哥的逼格封装
//封装一个选择卡切换功能
//参数:对象的形式 options
// 参数1:tab 参数2:con
// 参数3:tab_active =>(tab的活跃的类) tab_def(tab默认带有的类,要么为"")
// 参数4:con_active =>(con的活跃的类) con_def(tab默认带有的类,要么为"")
function tab(options) {
//设置默认的配置参数
options = Object.assign({
tab: "",
con: "",
tab_active: "",
tab_def: "",
con_active: "",
con_def: ""
}, options)
var sel_tab = $(options.tab);
var sel_con = $(options.con);
sel_tab.each((i, item) => {
$(item).on("click", function () {
sel_tab.each((i, item) => {
item.className = options.tab_def;
// console.log(options.con_def, sel_con[i]);
sel_con[i].className = options.con_def;
})
item.className = options.tab_active;
sel_con[i].className = options.con_active
})
})
}
//调用模板
// tab({
// tab: ".makeUp-con-tab-item",
// con: ".makeUp-con-con-box",
// tab_active: "makeUp-con-tab-item active",
// tab_def: "makeUp-con-tab-item",
// con_active: "makeUp-con-con-box conActive",
// con_def: "makeUp-con-con-box"
// })
继续封装中。。。。。