Pulse Of The Blogosphere » Create Tabs by Javascript

HOME / Javascript / JS Cơ Bản / Create Tabs by Javascript

Create Tabs by Javascript

Author: admin - Posted: 03/12/21 - Update: 14/12/21

1. index.html

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' />
    <link rel='stylesheet' href='./style.css'>
    <script src='./functions.js'></script>
</head>

<body>
    <div class='container'>
        <div class='tabs' id='tabs-example'>
            <div class='tabs-title'>
                <div class='tabs-prev'>
                    <div><i class='fas fa-chevron-left'></i></div>
                </div>
                <div class='tabs-title-wrapper'>
                    <div class='tabs-title-contents'></div>
                </div>
                <div class='tabs-next'><i class='fas fa-chevron-right'></i></div>
                <div class='tabs-close-all'>Close all tab</i></div>
            </div>
            <div class='tabs-panel'></div>
        </div>
    </div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</div>

<div class='tabs-close-all'>Close all tab</i></div>

</div>

</div>

</body>

</html>

2. style.scss

.container {
	width: 900px;
}

.tabs {
	--primary-color: green;
	--danger-color: red;
	--border-color: #ccc;
	width: 100%;
	border: 1px solid var(--border-color);
	.tabs-title {
		width: 100%;
		display: flex;
		border-bottom: 1px solid var(--border-color);
		.tabs-prev {
			border-right: 1px solid var(--border-color);
			padding: 15px 16px;
			cursor: pointer;
			&:hover {
				color: var(--primary-color);
			}
		}
		.tabs-title-wrapper {
			flex: 1;
			position: relative;
			overflow: hidden;
			.tabs-title-contents {
				top: 0;
				left: 0;
				position: absolute;
				display: flex;
				flex-wrap: nowrap;
				transition: 0.5s;
				.tabs-title-item {
					padding: 15px 16px;
					cursor: pointer;
					border-right: 1px solid var(--border-color);
					display: flex;
					align-items: center;
					&.active {
						color: var(--primary-color);
					}
					.tabs-title-item-label {
                        white-space: nowrap;
						&:hover {
							color: var(--primary-color);
						}
					}
					.tabs-title-item-close {
						padding-left: 16px;
						font-size: 0.8rem;
						&:hover {
							color: var(--danger-color);
						}
					}
				}
			}
		}
		.tabs-next {
			border-left: 1px solid var(--border-color);
			padding: 15px 16px;
			cursor: pointer;
			&:hover {
				color: var(--primary-color);
			}
		}
		.tabs-close-all {
			border-left: 1px solid var(--border-color);
			padding: 15px 16px;
			cursor: pointer;
			&:hover {
				color: var(--primary-color);
			}
		}
	}
	.tabs-panel {
		height: 300px;
		padding: 0.5rem 1rem;
	}
}

.container {

width: 900px;

}

.tabs {

--primary-color: green;

--danger-color: red;

--border-color: #ccc;

width: 100%;

border: 1px solid var(--border-color);

.tabs-title {

width: 100%;

display: flex;

border-bottom: 1px solid var(--border-color);

.tabs-prev {

border-right: 1px solid var(--border-color);

padding: 15px 16px;

cursor: pointer;

&:hover {

color: var(--primary-color);

}

.tabs-title-wrapper {

flex: 1;

position: relative;

overflow: hidden;

.tabs-title-contents {

top: 0;

left: 0;

position: absolute;

display: flex;

flex-wrap: nowrap;

transition: 0.5s;

.tabs-title-item {

padding: 15px 16px;

cursor: pointer;

border-right: 1px solid var(--border-color);

display: flex;

align-items: center;

&.active {

color: var(--primary-color);

}

.tabs-title-item-label {

white-space: nowrap;

&:hover {

color: var(--primary-color);

}

.tabs-title-item-close {

padding-left: 16px;

font-size: 0.8rem;

&:hover {

color: var(--danger-color);

}

.tabs-next {

border-left: 1px solid var(--border-color);

padding: 15px 16px;

cursor: pointer;

&:hover {

color: var(--primary-color);

}

.tabs-close-all {

border-left: 1px solid var(--border-color);

padding: 15px 16px;

cursor: pointer;

&:hover {

color: var(--primary-color);

}

.tabs-panel {

height: 300px;

padding: 0.5rem 1rem;

}

3. functions.js

const dataTabsExample = [
	{
		key: 'i1',
		label: 'item 1',
		content: '<div>This is item 1</div>',
	},
	{
		key: 'i2',
		label: 'item 2',
		content: '<div>This is item 2</div>',
	},
	{
		key: 'i3',
		label: 'item 3',
		content: '<div>This is item 3</div>',
	},
	{
		key: 'i4',
		label: 'item 4',
		content: '<div></div>This is item 4</div>',
	},
	{
		key: 'i5',
		label: 'item 5',
		content: '<div>This is item 5</div>',
	},
	{
		key: 'i6',
		label: 'item 6',
		content: '<div>This is item 6</div>',
	},
	{
		key: 'i7',
		label: 'item 7',
		content: '<div>This is item 7</div>',
	},
	{
		key: 'i8',
		label: 'item 8',
		content: '<div>This is item 8</div>',
	},
	{
		key: 'i9',
		label: 'item 9',
		content: '<div>This is item 9</div>',
	},
	{
		key: 'i10',
		label: 'item 10',
		content: '<div>This is item 10</div>',
	},
	{
		key: 'i11',
		label: 'item 11',
		content: '<div>This is item 11</div>',
	},
	{
		key: 'i12',
		label: 'item 12',
		content: '<div>This is item 12</div>',
	},
]

class TabsElement {
	constructor(tabsElement, data) {
		this.tabsElement = tabsElement
		this.tabsTitleContent = this.tabsElement.querySelector('.tabs-title-contents')
		this.tabsPanel = this.tabsElement.querySelector('.tabs-panel')

		this.currentPagesTab = 0
		this.initial(data)
		this.listenEvent()
	}

	initial(data) {
		const that = this
		data.forEach(item => that.add(item))
	}
	listenEvent() {
		const that = this
		this.tabsElement.addEventListener('click', e => {
			if (e.target.classList.contains('tabs-title-item-label')) {
				const key = e.target.closest('.tabs-title-item').dataset.tabsKey
				that.active(key)
			}
			if (e.target.closest('.tabs-title-item-close')) {
				const key = e.target.closest('.tabs-title-item').dataset.tabsKey
				that.remove(key)
			}
			if (e.target.classList.contains('tabs-close-all')) {
				that.tabsTitleContent.innerHTML = ''
				that.tabsPanel.innerHTML = ''
			}
			if (e.target.closest('.tabs-prev')) {
				if (that.currentPagesTab <= 0) return
				that.currentPagesTab--
				that.movePositionPageTabs(that.currentPagesTab)
			}
			if (e.target.closest('.tabs-next')) {
				if (that.currentPagesTab >= that.tabsCreatePage().length - 1) return
				that.currentPagesTab++
				that.movePositionPageTabs(that.currentPagesTab)
			}
		})
	}
	tabsCreatePage() {
		const wrapperWidth = this.tabsElement.querySelector('.tabs-title-wrapper').offsetWidth
		const listPoint = []
		const listTabsTitle = this.tabsElement.querySelectorAll('.tabs-title-item')

		let tempPlusWidth = 0,
			onWidth = 0,
			pageStart = 0

		for (let index = 0; index < listTabsTitle.length; index++) {
			let itemWidth = listTabsTitle[index].offsetWidth

			tempPlusWidth += itemWidth
			onWidth += itemWidth

			if (tempPlusWidth > wrapperWidth) {
				listPoint.push({
					pageStart,
					pageEnd: index - 1,
					onWidth: onWidth - itemWidth,
				})
				pageStart = index
				tempPlusWidth = itemWidth
			}
			if (index === listTabsTitle.length - 1) {
				listPoint.push({
					pageStart,
					pageEnd: index,
					onWidth,
				})
			}
		}
		return listPoint
	}
	movePositionPageTabs(indexPage) {
		const wrapperWidth = this.tabsElement.querySelector('.tabs-title-wrapper').offsetWidth
		if (indexPage == 0) {
			this.tabsTitleContent.style.left = '0px'
		}
		if (indexPage != 0) {
			this.tabsTitleContent.style.left =
				wrapperWidth - this.tabsCreatePage()[indexPage].onWidth + 'px'
		}
	}
	add({ key, label, content }) {
		this.tabsTitleContent.innerHTML += `<div class=&quot;tabs-title-item&quot; data-tabs-key=&quot;${key}&quot;>
                <div class=&quot;tabs-title-item-label&quot;>${label}</div>
                <div class=&quot;tabs-title-item-close&quot;><i class=&quot;fas fa-times&quot;></i></div>
            </div>`
		this.tabsPanel.innerHTML += `<div class=&quot;tabs-panel-item&quot; data-tabs-key=&quot;${key}&quot;>${content}</div>`
	}
	active(key) {
		const listTitleItem = this.tabsElement.querySelectorAll('.tabs-title-item')
		for (let i = 0; i < listTitleItem.length; i++) {
			listTitleItem[i].classList.remove('active')
		}
		const listPanelItem = this.tabsElement.querySelectorAll('.tabs-panel-item')
		for (let i = 0; i < listPanelItem.length; i++) {
			listPanelItem[i].style.display = 'none'
		}
		this.tabsElement
			.querySelector(`div.tabs-title-item[data-tabs-key='${key}']`)
			.classList.add('active')
		this.tabsElement.querySelector(
			`div.tabs-panel-item[data-tabs-key='${key}']`,
		).style.display = ''
	}
	remove(key) {
		this.tabsElement.querySelector(`.tabs-panel-item[data-tabs-key='${key}']`).remove()
		this.tabsElement.querySelector(`.tabs-title-item[data-tabs-key='${key}']`).remove()
	}
}

window.addEventListener('load', () => {
	new TabsElement(document.getElementById('tabs-example'), dataTabsExample)
})

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

const dataTabsExample = [

{

key: 'i1',

label: 'item 1',

content: '<div>This is item 1</div>',

{

key: 'i2',

label: 'item 2',

content: '<div>This is item 2</div>',

{

key: 'i3',

label: 'item 3',

content: '<div>This is item 3</div>',

{

key: 'i4',

label: 'item 4',

content: '<div></div>This is item 4</div>',

{

key: 'i5',

label: 'item 5',

content: '<div>This is item 5</div>',

{

key: 'i6',

label: 'item 6',

content: '<div>This is item 6</div>',

{

key: 'i7',

label: 'item 7',

content: '<div>This is item 7</div>',

{

key: 'i8',

label: 'item 8',

content: '<div>This is item 8</div>',

{

key: 'i9',

label: 'item 9',

content: '<div>This is item 9</div>',

{

key: 'i10',

label: 'item 10',

content: '<div>This is item 10</div>',

{

key: 'i11',

label: 'item 11',

content: '<div>This is item 11</div>',

{

key: 'i12',

label: 'item 12',

content: '<div>This is item 12</div>',

]

class TabsElement {

constructor(tabsElement, data) {

this.tabsElement = tabsElement

this.tabsTitleContent = this.tabsElement.querySelector('.tabs-title-contents')

this.tabsPanel = this.tabsElement.querySelector('.tabs-panel')

this.currentPagesTab = 0

this.initial(data)

this.listenEvent()

}

initial(data) {

const that = this

data.forEach(item => that.add(item))

}

listenEvent() {

const that = this

this.tabsElement.addEventListener('click', e => {

if (e.target.classList.contains('tabs-title-item-label')) {

const key = e.target.closest('.tabs-title-item').dataset.tabsKey

that.active(key)

}

if (e.target.closest('.tabs-title-item-close')) {

const key = e.target.closest('.tabs-title-item').dataset.tabsKey

that.remove(key)

}

if (e.target.classList.contains('tabs-close-all')) {

that.tabsTitleContent.innerHTML = ''

that.tabsPanel.innerHTML = ''

}

if (e.target.closest('.tabs-prev')) {

if (that.currentPagesTab <= 0) return

that.currentPagesTab--

that.movePositionPageTabs(that.currentPagesTab)

}

if (e.target.closest('.tabs-next')) {

if (that.currentPagesTab >= that.tabsCreatePage().length - 1) return

that.currentPagesTab++

that.movePositionPageTabs(that.currentPagesTab)

}

})

}

tabsCreatePage() {

const wrapperWidth = this.tabsElement.querySelector('.tabs-title-wrapper').offsetWidth

const listPoint = []

const listTabsTitle = this.tabsElement.querySelectorAll('.tabs-title-item')

let tempPlusWidth = 0,

onWidth = 0,

pageStart = 0

for (let index = 0; index < listTabsTitle.length; index++) {

let itemWidth = listTabsTitle[index].offsetWidth

tempPlusWidth += itemWidth

onWidth += itemWidth

if (tempPlusWidth > wrapperWidth) {

listPoint.push({

pageStart,

pageEnd: index - 1,

onWidth: onWidth - itemWidth,

})

pageStart = index

tempPlusWidth = itemWidth

}

if (index === listTabsTitle.length - 1) {

listPoint.push({

pageStart,

pageEnd: index,

onWidth,

})

}

return listPoint

}

movePositionPageTabs(indexPage) {

const wrapperWidth = this.tabsElement.querySelector('.tabs-title-wrapper').offsetWidth

if (indexPage == 0) {

this.tabsTitleContent.style.left = '0px'

}

if (indexPage != 0) {

this.tabsTitleContent.style.left =

wrapperWidth - this.tabsCreatePage()[indexPage].onWidth + 'px'

}

add({ key, label, content }) {

this.tabsTitleContent.innerHTML += `<div class="tabs-title-item" data-tabs-key="${key}">

<div class="tabs-title-item-label">${label}</div>

</div>`

this.tabsPanel.innerHTML += `<div class="tabs-panel-item" data-tabs-key="${key}">${content}</div>`

}

active(key) {

const listTitleItem = this.tabsElement.querySelectorAll('.tabs-title-item')

for (let i = 0; i < listTitleItem.length; i++) {

listTitleItem[i].classList.remove('active')

}

const listPanelItem = this.tabsElement.querySelectorAll('.tabs-panel-item')

for (let i = 0; i < listPanelItem.length; i++) {

listPanelItem[i].style.display = 'none'

}

this.tabsElement

.querySelector(`div.tabs-title-item[data-tabs-key='${key}']`)

.classList.add('active')

this.tabsElement.querySelector(

`div.tabs-panel-item[data-tabs-key='${key}']`,

).style.display = ''

}

remove(key) {

this.tabsElement.querySelector(`.tabs-panel-item[data-tabs-key='${key}']`).remove()

this.tabsElement.querySelector(`.tabs-title-item[data-tabs-key='${key}']`).remove()

}

window.addEventListener('load', () => {

new TabsElement(document.getElementById('tabs-example'), dataTabsExample)

})

1. index.html

2. style.scss

3. functions.js

JS Cơ Bản

Argument, This, Bind, Apply, Call và HOF trong Javascript