ES6学习-封装tab选项卡

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.box {
				border: 1px solid #333;
				box-sizing: border-box;
				overflow: hidden;
			}
			
			.box>ul>li {
				border: 1px solid #333;
				font-size: 20px;
				color: black;
			}
			
			.box>ol {
				border: 1px solid #333;
			}
			
			.box>ol>li {
				line-height: 260px;
				text-align: center;
				font-size: 50px;
				color: black;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ol>
		</div>
	</body>
	<script type="text/javascript">
		class Tabs {
			constructor(ele, options = {}, callback = () => {}) {
				if(options === null) {
					options = {}
				}
				//this.ele = document.querySelectorAll(ele);
				this.ele = document.querySelector(ele);
				this.btnsBox = this.ele.querySelector("ul");
				this.tabsBox = this.ele.querySelector("ol");
				this.btns = this.ele.querySelectorAll("ul>li");
				this.tabs = this.ele.querySelectorAll("ol>li");
				this.default = {
					tabBoxWidth: options.tabBoxWidth || '600px',
					tabBoxHeight: options.tabBoxHeight || '300px',
					tabHeight: options.tabHeight || '40px',
					currentTabIndex: options.currentTabIndex || 0,
					tabBtnActiveStyle: options.tabBtnActiveStyle || {
						backgroundColor: 'skyblue'

					},
					tabBtnUnActiveStyle: options.tabBtnUnActiveStyle || {
						backgroundColor: "orange"
					}
				}
				this.currentIndex = this.default.currentTabIndex;
				this.callback = callback;
				this.initStyle();
				this.initEvents();
			}

			initStyle() {
				// 整个选项卡的宽高
				this.ele.style.width = this.default.tabBoxWidth;
				this.ele.style.height = this.default.tabBoxHeight;

				// 选项卡按钮宽高和基础样式
				this.btnsBox.style.width = this.default.tabBoxWidth;
				this.btnsBox.style.height = this.default.tabHeight;
				this.btnsBox.style.display = 'flex';
				this.btnsBox.style.justifyContent = 'flex-start';
				this.btnsBox.style.alignItems = 'center';
				if(this.btns.length) {
					const btnWidth = parseInt(parseInt(this.btnsBox.style.width) / this.btns.length);
					this.btns.forEach((item, index) => {
						item.style.width = btnWidth + 'px';
						item.style.height = this.btnsBox.style.height;
						item.style.lineHeight = this.btnsBox.style.height;
						item.style.textAlign = 'center';
						item.style.cursor = 'pointer';
						if(index == this.default.currentTabIndex) {
							for(let keys in this.default.tabBtnActiveStyle) {
								item.style[keys] = this.default.tabBtnActiveStyle[keys];
							}
						} else {
							for(let keys in this.default.tabBtnUnActiveStyle) {
								item.style[keys] = this.default.tabBtnUnActiveStyle[keys];
							}
						}
					});
				}

				// 卡片宽高和 基础样式
				this.tabsBox.style.width = this.default.tabBoxWidth;
				this.tabsBox.style.height = (
					parseInt(this.default.tabBoxHeight) - parseInt(this.default.tabHeight)
				) + 'px';
				this.tabsBox.style.position = 'relative';
				this.tabs.forEach((item, index) => {
					item.style.position = 'absolute';
					item.style.width = this.tabsBox.style.width;
					item.style.height = this.tabsBox.style.height;
					item.style.top = 0;
					item.style.left = 0;
					if(index == this.default.currentTabIndex) {
						item.style.display = 'block';
					} else {
						item.style.display = 'none';
					}
				});

			}

			initEvents() {
				this.btns.forEach((item, index) => {
					item.addEventListener('click', () => {
						this.btns.forEach((k, i) => {
							for(let keys in this.default.tabBtnUnActiveStyle) {
								this.btns[i].style[keys] = this.default.tabBtnUnActiveStyle[keys];
							}
						});
						this.tabs.forEach((k, i) => {
							this.tabs[i].style.display = 'none';
						});
						for(let keys in this.default.tabBtnActiveStyle) {
							this.btns[index].style[keys] = this.default.tabBtnActiveStyle[keys];
						}
						this.tabs[index].style.display = 'block';
						this.currentIndex = index;
						this.callback(this.currentIndex);
					});
				});
			}

		}
		let tab = new Tabs(".box", null, function(index) {
			console.log(index);
		});
		console.log(tab);
	</script>

</html>
ES6学习-封装tab选项卡

猜你喜欢
