|
阅读：5509回复：0
tab插件demo
在网上看了一个对于tab 封装的插件，插件也简单，但封装思想很不错，现分享给大家，可以看看
html 页面 <body>
<div id="my-tab" data='[
{
"tab":"选项卡1",
"page":"页面1"
},
{
"tab":"选项卡2",
"page":"页面2"
},
{
"tab":"选项卡3",
"page":"页面3"
}
]'>
</div>
<!-- 引入模板文件 -->
<script src="tpl.js"></script>
<!-- 引入工具文件-->
<script src="utils.js"></script>
<script src="myTab.js"></script>
<script type="text/javascript">
new MyTab("#my-tab");
</script>
</body>模板文件：tpl.js var tpl = (function () {
function tab(filed) {
switch (filed) {
case 'tab':
return (`<div class="tab-item { { current } } ">{ { tab } } </div>`);
case 'page':
return (`<div class="page-item { { current } } ">{ { page } } </div>`);
default:
break;
}
}
return {
tab:tab
}
})();工具文件：utils.js var tools = (function () {
function tabReplace(tpl,replaceObj) {
return tpl.replace(/\{\{(.*?)\}\}/g,function(node,key){
return replaceObj[key.trim()]
})
}
return {
tabReplace:tabReplace
}
})();插件文件：myTab.js ;(function (doc,tpl,tools) {
function myTab(el) {
this.el = doc.querySelector(el);
this.data = JSON.parse(this.el.getAttribute('data'));
this._index = 0 ; //选中选项卡的索引
this.init(); //初始化
}
myTab.prototype.init = function(){
this._render(); //渲染
this._bindEvent(); //绑定事件
}
myTab.prototype._render = function(){
var tabWrapper = doc.createElement('div');
var pageWrapper = doc.createElement('div');
var oFrag = doc.createDocumentFragment();
tabWrapper.className = 'tab-wrapper';
pageWrapper.className = 'page-wrapper';
this.data.forEach(function (item,index) {
tabWrapper.innerHTML += tools.tabReplace(tpl.tab('tab'),{
tab : item.tab,
current:!index?'current':''
})
// tpl.tab('page') :获取对应的模板
pageWrapper.innerHTML += tools.tabReplace(tpl.tab('page'),{
page : item.page,
current:!index?'current':''
})
})
oFrag.appendChild(tabWrapper);
oFrag.appendChild(pageWrapper);
this.el.appendChild(oFrag);
}
myTab.prototype._bindEvent = function(){
var doms= {
otabItem : doc.querySelectorAll('.tab-item'),
opageItem : doc.querySelectorAll('.page-item')
}
this.el.addEventListener('click',this._handleTabClick.bind(this,doms),false);
}
myTab.prototype._handleTabClick = function(){
var _doms = arguments[0],
tar = arguments[1].target,
className = tar.className.trim();
console.log(arguments)
if(className=='tab-item'){
_doms.otabItem[this._index].className='tab-item';
_doms.opageItem[this._index].className='page-item';
this._index = [].indexOf.call(_doms.otabItem,tar);
console.log(this._index);
tar.className+=' current';
_doms.opageItem[this._index].className+=' current';
}
}
window.MyTab = myTab;
})(document,tpl,tools);对应 B站视频：https://www.bilibili.com/video/BV1Ki4y1M75H |
|
|
公众号
