1 , tab类 -> 配置参数 -> 对象 -> Prototype
2 , ;$(function(){
<!--定义类-->
let Tab = function(tab){
let _this = this ;
this.tab = tab ; <!--保存单个组件-->
<!--配置默认参数-->
this.config = {
"type":"click", //事件类型
"effect":"fade", //事件效果
"invoke":1, //是否显示
"autoTime":false //是否启动自动切换
} ;
<!--如果默认参数存在,则扩展掉默认参数-->
if(this.getConfig()){
$.extend(this.config , this.getConfig()) ;
}
} ;
Tab.prototype = {
<!--存放方法-->
} ;
<!--初始化-->
Tab.init = function(tabs){
let _this = this ;
tabs.each(function () {
new _this($(this)) ;
})
} ;
<!--封装成jq方法-->
$.fn.extend({
tab:function () {
return this.each(function () {
new Tab($(this)) ;
})
}
}) ;
window.Tab = Tab ;
})(jQuery)
3 , html部分
<div class="js-tab tab" data-config = '{
"type":"1",
"effect":"fade",
"invoke":3,
"autoTime":1000
}'>
<ul class="ul-nav">
<li class="active"><a href="javascript:;">新闻</a></li>
<li><a href="javascript:;">娱乐</a></li>
<li><a href="javascript:;">电影</a></li>
<li><a href="javascript:;">科技</a></li>
</ul>
<div class="content-wrap">
<div class="content-item current"><img src="img/3.jpg"></div>
<div class="content-item"><img src="img/4.jpg"></div>
<div class="content-item"><img src="img/5.jpg"></div>
<div class="content-item"><img src="img/6.jpg"></div>
</div>
</div>
4 , 调用
$('.js-tab').tab() ;
JQ插件(Tab)
最新推荐文章于 2024-07-29 18:19:14 发布