Tab bar

Developer
Anthony Pothin
Size
3,423 Kb
Views
4,048
  1. Tab bar Previews
  2. Tab bar HTML Codes
  3. Tab bar CSS Codes
  4. Tab bar JS Codes

How do I make an tab bar?

What is a tab bar? How do you make a tab bar? This script and codes were developed by Anthony Pothin on 17 January 2023, Tuesday.

Tab bar Previews
IQ Test

Tab bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tab bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tab_bar">
</div>
<div class="content_wrapper"></div>
<!--https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/499181cb-2131-41f7-bbc8-d860e0212a49.png--> <script src="js/index.js"></script>
</body>
</html>

Tab bar - Script Codes CSS Codes

html, body { width: 100%; height: 100%;
}
body { display: flex; flex-direction: column; justify-content: stretch;
}
.content_wrapper { flex: 1 1 auto;
}
.tab_bar {	padding: 5px 5px 0; flex: 0 0 30px; background-color: grey; display: flex; flex-direction: row; align-items: stretch; color: #555; font-weight: bold;	max-height: 30px;
}
.tab_bar .button_wrapper { border-radius: 15px;	margin-bottom: 5px; flex: 0 0 auto; display:flex; justify-content: stretch; border: 0 solid transparent; overflow: hidden;
}
.tab_bar .button_wrapper .close:after { content: "\00d7"
}
.tab_bar .to_left:after { content: "<";
}
.tab_bar .to_right:after { content: ">";
}
.tab_bar .to_left.fast:after { content: "<<";
}
.tab_bar .to_right.fast:after { content: ">>";
}
.tab_bar .tab_wrapper {	position: relative; flex: 1 1 auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;	overflow: hidden; margin-left: 5px; margin-right: 5px;
}
.tab_bar .tab .text {	flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
}
.tab_bar .tab .close {	display: none;	flex: 0 0 auto;
}
.tab_bar .tab:hover .close {	display: block;
}
.tab_bar .tab .close:hover { color: #C73E4C;
}
.tab_bar .tab .close:after { content: "\00d7";
}
.tab_bar .tab:nth-child(2n) { background-color: #B2B2B2;
}
.tab_bar .tab.active, .tab_bar .tab.active:hover { background-color: #FFF; color: inherit;
}
.tab_bar .tab:hover { background-color: #333; color: #FFF;
}
.tab_bar .tab {	cursor: pointer;	display: flex;	padding: 5px 5px 0 5px;
border-top-left-radius: 15px;
border-top-right-radius: 15px; flex: 1 1 100px; max-width: 50px; background-color: #CFD2D0; min-width: 100px; max-width: 200px;
}

Tab bar - Script Codes JS Codes

if (typeof TabBar === 'undefined') {	var TabBar = function(tabBarNode) {	this.node = tabBarNode;	this.pixel = null;	this.pixelSum = null;	this.scrollProcess = null;	this.scrollFrequence = 10;	this.scrollDuration = 400;	var button_wrapper = document.createElement('div');	button_wrapper.classList.add('button_wrapper');	this.node.appendChild(button_wrapper);	var button = document.createElement('button');	button.classList.add('to_left');	button.classList.add('fast');	button_wrapper.appendChild(button);	button = document.createElement('button');	button.classList.add('to_left');	button_wrapper.appendChild(button);	this.tabWrapperNode = document.createElement('div');	this.tabWrapperNode.classList.add('tab_wrapper');	this.node.appendChild(this.tabWrapperNode);	button_wrapper = document.createElement('div');	button_wrapper.classList.add('button_wrapper');	this.node.appendChild(button_wrapper);	button = document.createElement('button');	button.classList.add('to_right');	button_wrapper.appendChild(button);	button = document.createElement('button');	button.classList.add('to_right');	button.classList.add('fast');	button_wrapper.appendChild(button);	button_wrapper = document.createElement('div');	button_wrapper.classList.add('button_wrapper');	this.node.appendChild(button_wrapper);	button = document.createElement('button');	button.classList.add('close');	button_wrapper.appendChild(button);	this.node.querySelector('.to_left:not(.fast)').addEventListener('click', this.scroll.bind(this), false);	this.node.querySelector('.to_right:not(.fast)').addEventListener('click', this.scroll.bind(this), false);	this.node.querySelector('.to_left.fast').addEventListener('click', this.scroll.bind(this), false);	this.node.querySelector('.to_right.fast').addEventListener('click', this.scroll.bind(this), false);	this.node.querySelector('.close').addEventListener('click', this.deleteAllTab.bind(this), false);	};	TabBar.prototype = {	scroll : function(event) {	if (this.process) {	return;	}	//this.node.querySelectorAll('.tab')[20].scrollIntoView(true);	this.pixel = this.node.querySelector('.tab').offsetWidth;	if (event.currentTarget.classList.contains('fast')) {	this.scrollDuration = 400;	this.pixel = Math.floor(this.node.querySelector('.tab_wrapper').offsetWidth / this.pixel) * this.pixel - this.pixel;	} else {	this.scrollDuration = 120;	}	if (event.currentTarget.classList.contains('to_left')) {	this.pixel = -this.pixel;	}	this.movement = Math.round(this.pixel / (this.scrollDuration / this.scrollFrequence));	this.pixelSum = 0;	this.process = window.setInterval(this.smoothScroll.bind(this), this.scrollFrequence)	window.setTimeout(this.stopSmoothScroll.bind(this), this.scrollDuration + 1);	},	smoothScroll : function() {	this.node.querySelector('.tab_wrapper').scrollLeft += this.movement;	this.pixelSum += this.movement;	},	stopSmoothScroll : function() {	clearInterval(this.process);	this.node.querySelector('.tab_wrapper').scrollLeft += (this.pixel - this.pixelSum);	this.pixel = null;	this.pixelSum = null;	this.movement = null;	this.process = null;	},	addTab : function(tabObject) {	this.tabWrapperNode.appendChild(tabObject.getNode());	},	deleteAllTab : function() {	var tabList = this.tabWrapperNode.querySelectorAll('.tab');	for (var i=0, iMax=tabList.length; i<iMax; i++) {	tabList.item(i).tabObject.onDelete();	}	}	}
} else {	console.error('"TabBar" class already exists !');
}
if (typeof Tab === 'undefined') {	var Tab = function(name, data, clickCallback, deleteCallback) {	this.data = data;	this.clickCallback = clickCallback;	this.deleteCallback = deleteCallback;	this.node = document.createElement('span');	this.node.tabObject = this;	this.node.onclick = this.onClick.bind(this);	this.node.classList.add('tab');	var text = document.createElement('span');	text.classList.add('text');	text.textContent = name;	this.node.appendChild(text);	var button = document.createElement('span');	button.classList.add('close');	this.node.appendChild(button);	button.onclick = this.onDelete.bind(this);	};	Tab.prototype = {	onClick : function() {	var nodeList = this.node.parentNode.querySelectorAll('.active');	for (var i=0, iMax=nodeList.length; i<iMax; i++) {	nodeList.item(i).classList.remove('active');	}	this.node.classList.add('active');	this.clickCallback(this.data, this);	},	onDelete : function(event) {	if (event instanceof Event) {	event.stopPropagation();	}	this.node.tabObject = null;	this.node.parentNode.removeChild(this.node);	this.node = null;	this.deleteCallback(this.data);	},	getNode : function() {	return this.node;	}	};
} else {	console.error('"Tab" class already exists !');
}
var clickCallback = function(data, instance) { document.querySelector('.content_wrapper').textContent = data;
}
var deleteCallback = function(data) { console.log('suppression',data);
}
var myTab = new TabBar(document.querySelector('.tab_bar'));
for (var i=0, iMax=40; i<iMax; i++) { myTab.addTab(new Tab(i, i, clickCallback, deleteCallback));
}
Tab bar - Script Codes
Tab bar - Script Codes
Home Page Home
Developer Anthony Pothin
Username Thorien
Uploaded January 17, 2023
Rating 3
Size 3,423 Kb
Views 4,048
Do you need developer help for Tab bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Pothin (Thorien) Script Codes
Name
Custom list picker
Demo component
Magic table
Flexible accordion
Form - select
A Pen by Anthony Pothin
Resizable flexible box
Custom scrollbar
Test moment.js
Multipart data parsing
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!