最近工作中用到较多的tab栏切换,心头一热写了一个 快速生成tab切换栏的插件:
github地址:
插件名字: 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> |