移动端插件-快速生成tab插件（纯手写+亲测）

最近工作中用到较多的tab栏切换，心头一热写了一个 快速生成tab切换栏的插件：

github地址：

https://github.com/MrITzhongzi/tool-functions/tree/master/%E5%BF%AB%E9%80%9F%E7%94%9F%E6%88%90tab%E6%A0%8F%E5%B7%A5%E5%85%B7/quickTab

插件名字： quick.tab.js

js文件名字：quick.tab.js

js文件的代码： 

(function (win) {
    //全局对象
    var globalObj = {}
    //默认参数
    var defaultParame = {
        navColor: "#000",
        number: 4,
        tabName: ['标签1','标签2','标签3','标签4'],
        height: "40px",
        lineHeight: "40px",
        fontSize: "14px"
    }
    function QuickTab(requireObj) {
        requireObj = Object.assign(defaultParame,requireObj)


        this.init(requireObj)
    }
    var quickTabProtoType = {
        init: function (requireObj) {
            this.initData(requireObj)
            this.initDom()
            this.setStyle()
            this.bindEvent()
        },


        initData: function (requireObj) {
            globalObj = Object.assign({},requireObj)
            globalObj.navEl  = document.querySelector(requireObj.navEl)
            globalObj.contentEl = document.querySelector(requireObj.contentEl)
            globalObj.conSections = globalObj.contentEl.querySelectorAll("section")
        },


        initDom: function () {
            var tabNumber = globalObj.number
            var tabName = globalObj.tabName
            var container = globalObj.navEl
            var ulEle = document.createElement('ul')
            for(var i = 0;i < tabNumber;i++){
                var li = document.createElement('li')
                li.innerHTML = tabName[i]
                li.setAttribute('index',i)
                ulEle.appendChild(li)
            }


            container.appendChild(ulEle)
        },
        setStyle: function () {
            var that = this
            var container = globalObj.navEl
            var contentBox = globalObj.contentEl
            var ulEle = container.querySelector('ul')
            var lis = container.querySelectorAll('li')
            var sectionEle = contentBox.querySelectorAll('section');
            var ulHeight = globalObj.height


            var containerCss = {
                padding: 0,
                margin: 0,
                display: "flex",
                flexDirection: "column",
                color: globalObj.navColor,
                fontSize: globalObj.fontSize


            }
            var contentBoxCss = {
                flexGrow: 1
            }
            var ulEleCss = {
                padding: 0,
                margin: 0,
                overflow: "hidden",
                listStyle: "none",
                display: "flex",
                textAlign: 'center',
                height: ulHeight,
                lineHeight: ulHeight
            }
            var liEleCss = {
                padding: 0,
                margin: 0,
                flexGrow: 1,
                borderBottom: "2px solid transparent",
                cursor: "pointer"
            }
            var firstLi = {
                "borderBottom": "2px solid red"
            }


            var sectionEleCss = {
                display: "none"
            }


            this.setCss(container,containerCss)
            this.setCss(contentBox,contentBoxCss)
            this.setCss(ulEle,ulEleCss)
            lis.forEach(function (liElement) {
                that.setCss(liElement,liEleCss)
            })
            this.setCss(lis[0],firstLi) //设置第一个li标签特殊样式
            sectionEle.forEach(function (section) {
                that.setCss(section,sectionEleCss)
            })
            this.setCss(sectionEle[0],{display: "block"})


        },
        setCss: function (el, styleObj) {
            for(var key in styleObj){
                el.style[key] = styleObj[key]
            }
        },
        bindEvent: function () {
            var that = this
            var lis = globalObj.navEl.querySelectorAll("li")
            var sections = globalObj.conSections


            lis.forEach(function (li) {
                li.onclick = function () {
                    lis.forEach(function (li) {
                        that.setCss(li,{borderBottom:"2px solid transparent"})
                    })
                    that.setCss(this,{borderBottom: "2px solid red"})
                    var liIndex = this.getAttribute("index")


                    sections.forEach(function (section) {
                        var currentIndex = section.getAttribute('index')
                        that.setCss(section,{display: "none"})
                        if(currentIndex == liIndex){
                            that.setCss(section,{display: "block"})
                        }
                    })
                }
            })
        }
    }


    //设置构造函数的原型
    QuickTab.prototype = quickTabProtoType


    //暴露构造函数
    window.QuickTab = QuickTab
}(window))

使用文档：

插件使用文档：
    1、引入js文件，例如：  <script src="./quick.tab.js"></script>
    2、在页面中建立两个容器标签：
            <div id="app">
                <!--这里玄滩nav-->
            </div>
            <div id="container">
                <!--这里是渲染nav对应的内容-->
                <section index="0" style="flex-grow: 1; display: none;">0</section>
                <section index="1" style="flex-grow: 1; display: none;">1</section>
                <section index="2" style="flex-grow: 1; display: none;">2</section>
                <section index="3" style="flex-grow: 1; display: none;">3</section>
            </div>
    3、新建一个对象： new QuickTab(obj);
        其中  var obj = {
                  navEl: "#app",
                  contentEl: "#container",
                  navColor: "#3878bb",
                  number: 4,
                  fontSize: "16px",
                  tabName: ['桌子1','桌子2','桌子3','桌子4'],
                  height: "100px",
                  lineHeight: "100px",
              }






    参数配置说明：


    navEl  是tab栏的容器，传入id选择器
    contentEl 是每个tab栏对应的内容的容器，传入id选择器
    navColor 是tab栏的字体颜色
    number： 是有几个tab栏
    tabName： 是个数组，每一栏的名字
    fontSize: 控制的是 nav 的字体大小。
    height: 是控制tab栏的高度
    lineHeight: 控制tab栏的行高

实例 测试 html文件：

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=">
<title>Title</title>
<style>
html,body {
height: 100%;
}


</style>
</head>
<body>
<divid="app">
<!--这里玄滩nav-->
</div>
<divid="container">
<!--这里是渲染nav对应的内容-->
<sectionindex="0"style="flex-grow: 1; display: none;">0</section>
<sectionindex="1"style="flex-grow: 1; display: none;">1</section>
<sectionindex="2"style="flex-grow: 1; display: none;">2</section>
<sectionindex="3"style="flex-grow: 1; display: none;">3</section>
</div>
<scriptsrc="./quick.tab.js"></script>
<script>
var obj = {
navEl: "#app",
contentEl: "#container",
navColor: "#3878bb",
number: 4,
fontSize: "16px",
tabName: ['桌子1','桌子2','桌子3','桌子4'],
height: "100px",
lineHeight: "100px",
}
new QuickTab(obj);
</script>
</body>
</html>