JavaScript Tabs

jSuites.tabs 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(string);	Create a new tab. `create(String title) => DOMElement`
remove(number);	Remote an existing tab. `remove(Number tabIndex) => void`
rename(number, string);	Rename existing tab. `rename(Number tabIndex, String newTitle) => void`
getActive()	Get the active tab.

Initialization properties

Property	Description
data: array	Initial content of the compontent
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 define the content of the component, and have the following properties

Property	Description
title	Header title
width	Header width
icon	Header icon
content	Content

Available events

Method	Description
onclick	Onclick event `onclick(DOMElement element, Object instance, Number tabIndex, DOMElement header, DOMElement content) => void`
onload	When the remote content is loaded and the component is ready. `onload(DOMElement element, Object instance) => void`
onchange	Method executed when the input is focused. `onchange(DOMElement element, Object instance, Number tabIndex, DOMElement header, DOMElement content) => void`
onbeforecreate	Before create a new tab. `onbeforecreate(DOMElement element) => void`
oncreate	When a new tab is created. `oncreate(DOMElement element, DOMElement content) => void`
ondelete	Method executed the DOM element is ready. `ondelete(DOMElement element, Number tabIndex) => void`
onchangeposition	When a tab change position `onchangeposition(DOMElement headersContainer, Number tabIndexFrom, Number tabIndexTo, DOMElement header, DOMElement destination, event) => void`

Examples

Basic Example

The following example creates tabs based on an existing HTML structure.

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" 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 = jSuites.tabs(document.getElementById('tabs'), {
    animation: true,
    allowCreate: true,
    allowChangePosition: true,
    padding: '10px',
});
</script>
</html>

import { Tabs } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'


function App() {
    const tabs = useRef(null);

    return (
        <div className="App">
            <Tabs ref={tabs} allowCreate={true} allowChangePosition={true} padding={'10px'} animation={true}>
                <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>
            </Tabs>
        </div>
    );
}

export default App;

<template>
    <Tabs ref="tabs" :allowCreate="true" :allowChangePosition="true" padding="10px" :animation="true">
        <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>
    </Tabs>
</template>

<script>
import { Tabs } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Tabs
    },
}
</script>

Tabs with Icons

Add icons to the headers of your tabs component.

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<div id='tabs1' style='width: 90vw; max-width:400px; text-align:justify'></div>

<script>
jSuites.tabs(document.getElementById('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.',
            width: '100px',
        }
    ],
    padding: '10px',
});
</script>
</html>

import { Tabs } from "jsuites/react";
import { useRef } from "react";
import "jsuites/dist/jsuites.css"

function App() {
    const tab = useRef(null);

    return (
        <div>
            <Tabs
                ref={tab}
                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.",
                        width: "100px",
                    }
                ]}
                padding={"10px"}
            />
        </div>
    );
}

export default App;

<template>
    <Tabs ref="tab" :animation="true" :data="data" padding="10px" />
</template>

<script>
import { Tabs } from "jsuites/vue"
import "jsuites/dist/jsuites.css"


export default {
    name: "App",
    components: { Tabs },
    data() {
        return {
            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.",
                    width: "100px",
                }
            ]
        }
    }
}
</script>

Edit this page on GitHub