doubleyong
管理员
管理员
  • 最后登录2021-06-18
  • 发帖数1013
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:215回复:0

tab插件demo

楼主#
更多 发布于:2021-05-24 11:24
在网上看了一个对于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
附件名称/大小 下载次数 最后更新
tabDemo.rar (3KB)  0 05-24 11:19
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号