Quick reference

Considering the following example:

<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>

var tabs = jSuites.tabs(document.getElementById('tabs'), {
    animation: true

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: arrayInitial content of the compontent
allowCreate: booleanShow the create new tab button
allowChangePosition: booleanAllow drag and drop of the headers to change the tab position
animation: booleanAllow the header border bottom animation.
hideHeaders: booleanHide the tab headers if only one tab is present.
padding: numberDefault padding content
position: stringPosition of the headers: top | bottom. Default: top

Data property

The data property define the content of the component, and have the following properties

Property Description
titleHeader title
widthHeader width
iconHeader icon

Available events

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