Quick reference
Considering the following example:
<html>
<script src="https://jsuites.net/v3/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/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(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 | bottom. Default: 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 |
