Back to the plugin

Quick reference

Considering the following example:

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

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

<script>
var tabs = jSuites.tabs(document.getElementById('tabs'), {
    animation: true
});
</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(title: string) => DOMElement
tabs.remove(number);Remote an existing tab.
remove(tabIndex) => void
tabs.rename(number, string);Rename existing tab.
rename(tabIndex, newTitle) => void


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


Available events

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