09:43 7/6/26 JavaScript Tabs
menu
Documentation keyboard_arrow_right Javascript tabs
JavaScript Tabs
[Link] is a JavaScript plugin for creating tabbed content areas within web pages. It's
lightweight and responsive, ensuring it works well across all devices. This plugin is handy for
developers looking to organize content in a clean, user-friendly manner.
Responsive Design: Automatically adjusts to fit any screen size.
Lightweight: Minimal impact on load times.
Event Handling: Supports custom events for enhanced interaction.
Drag and Drop: Allows users to reorder tabs easily.
API Methods: Offers functions to control tabs programmatically.
Remote Content: Can load content from external sources into tabs.
Dynamic Tab Management: Facilitates adding, removing, and navigating between tabs.
Documentation
Available Methods
Method Description
open(number); Open the tab by index starting on zero.
selectIndex(DOMElement) Open the tab by the header DOM element
Create a new tab.
create(string);
create(String title) => DOMElement
Remote an existing tab.
remove(number);
remove(Number tabIndex) => void
[Link] 1/8
09:43 7/6/26 JavaScript Tabs
Method Description
Rename existing tab.
rename(number, string);
rename(Number tabIndex, String newTitle) => void
getActive() Get the active tab.
Initialization properties
Property Description
data: array Initial content of the component
allowCreate: boolean Show the create new tab button
allowChangePosition: boolean Allow drag and drop of the headers to change the tab position
animation: boolean Allow the header border bottom animation.
hideHeaders: boolean Hide the tab headers if only one tab is present.
padding: number Default padding content
position: string Position of the headers: top
Data property
The data property defines the content of the component and has the following properties
Property Description
title Header title
width Header width
icon Header icon
content Content
Available events
[Link] 2/8
09:43 7/6/26 JavaScript Tabs
Method Description
Onclick event
onclick onclick(DOMElement element, Object instance, Number tabIndex, DOMElement
header, DOMElement content) => void
When the remote content is loaded and the component is ready.
onload
onload(DOMElement element, Object instance) => void
Method executed when the input is focused.
onchange onchange(DOMElement element, Object instance, Number tabIndex,
DOMElement header, DOMElement content) => void
Before create a new tab.
onbeforecreate
onbeforecreate(DOMElement element) => void
When a new tab is created.
oncreate
oncreate(DOMElement element, DOMElement content) => void
Method executed the DOM element is ready.
ondelete
ondelete(DOMElement element, Number tabIndex) => void
When a tab change position
onchangeposition(DOMElement headersContainer, Number tabIndexFrom,
onchangeposition
Number tabIndexTo, DOMElement header, DOMElement destination, event) =>
void
Examples
Basic Example
The following example creates tabs based on an existing HTML structure.
Tab 1 Tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet ornare
dolor, tincidunt posuere ante. Sed sed lacinia lorem. In gravida tempus erat vel
auctor.
[Link] 3/8
09:43 7/6/26 JavaScript Tabs
[Link] 4/8
09:43 7/6/26 JavaScript Tabs
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id='tabs' style='max-width: 800px;'>
<div>
<div>Tab 1</div>
<div>Tab 2</div>
</div>
<div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam sit amet
ornare dolor, tincidunt posuere ante. Sed sed lacinia lorem.
In gravida
tempus erat vel auctor.
</div>
<div>
Praesent non pellentesque nunc. Nam imperdiet odio ut enim
molestie elementum.
Proin aliquet, eros in aliquet condimentum, diam quam mollis
sem, ullamcorper
dapibus diam lorem at eros. Duis at ligula at sem elementum
cursus. Curabitur
cursus quis sapien sit amet vestibulum.
</div>
</div>
</div>
<script>
var tabs = [Link]([Link]('tabs'), {
animation: true,
allowCreate: true,
allowChangePosition: true,
padding: '10px',
});
[Link] 5/8
09:43 7/6/26 JavaScript Tabs
</script>
</html>
Tabs with Icons
Add icons to the headers of your tabs component.
settings_brightness opacity
Brightness Opacity
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam sit amet ornare dolor,
tincidunt posuere ante. Sed sed lacinia lorem. In
gravida tempus erat vel auctor. Quisque pharetra,
metus nec congue rutrum, ligula nibh euismod
nisl, at semper tortor magna a velit. Sed ut elit
hendrerit, mollis velit ac, maximus justo. Aliquam
erat volutpat. Duis quis dolor ultricies, laoreet
dolor a, lacinia enim. Aliquam convallis sit amet
urna vitae vestibulum.
[Link] 6/8
09:43 7/6/26 JavaScript Tabs
<html>
<script src="[Link]
<link rel="stylesheet" href="[Link]
type="text/css" />
<div id='tabs1' style='width: 90vw; max-width:400px; text-align:justify'>
</div>
<script>
[Link]([Link]('tabs1'), {
animation: true,
data: [
{
icon: 'settings_brightness',
title: 'Brightness',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nullam sit amet ornare dolor, tincidunt posuere ante. Sed sed
lacinia lorem. In gravida tempus erat vel auctor. Quisque pharetra,
metus nec congue rutrum, ligula nibh euismod nisl, at semper tortor
magna a velit. Sed ut elit hendrerit, mollis velit ac, maximus justo.
Aliquam erat volutpat. Duis quis dolor ultricies, laoreet dolor a,
lacinia enim. Aliquam convallis sit amet urna vitae vestibulum.',
width: '100px',
},
{
icon: 'opacity',
title: 'Opacity',
content: 'Praesent non pellentesque nunc. Nam imperdiet odio
ut enim molestie elementum. Proin aliquet, eros in aliquet condimentum,
diam quam mollis sem, ullamcorper dapibus diam lorem at eros. Duis at
ligula at sem elementum cursus. Curabitur cursus quis sapien sit amet
vestibulum. Proin quis mattis elit. Ut laoreet lorem ac elit scelerisque
efficitur. Praesent quis nunc quis eros bibendum lacinia. Suspendisse
mattis scelerisque tellus at venenatis. Duis lobortis dui laoreet,
faucibus sapien vel, pharetra lorem. Ut id libero quis arcu congue
pulvinar. Donec felis nibh, imperdiet eget erat ac, pretium egestas
eros.',
[Link] 7/8
09:43 7/6/26 JavaScript Tabs
width: '100px',
}
],
padding: '10px',
});
</script>
</html>
Related Tools
LemonadeJS Tabs - Reactive tabs component with framework integration
[Link] 8/8