Quick reference

Considering the following example:

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

<div id="tabs"></div>

<script>
var tabs = jSuites.tabs(document.getElementById('tabs'), {
    animation: true,
    data: [
        {
            title: 'Tab 1',
            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.',
        },
        {
            title: 'Tab 2',
            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.',
        },
    ],
});
</script>
</html>

Available Methods

Method Description
tabs.open(number); Open the tab by index starting on zero.
tabs.selectIndex(DOMElement) Open the tab by the header DOM element
tabs.create(string); Create a new tab.
create(String title) => DOMElement
tabs.remove(number); Remote an existing tab.
remove(Number tabIndex) => void
tabs.rename(number, string); Rename existing tab.
rename(Number tabIndex, String newTitle) => void
tabs.getActive() Get the active tab.

Initialiation 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