The TypeScript tabulation plugin library for orxapi
shell
node -v
v10.15.1
`
Installation
`shell
npm install orxapi.plugins.tabs --save
`
$3
* jQuery
Usage
This library is written in TypeScript, but you can use JavaScript.
#### Warning version 2 vs 1
This is the version 2, the initialization has changed and not compatible with version 1. See below for more detail.
$3
Download the script here and include it (unless you are packaging scripts somehow else):
Standalone: You can use the standalone version into bundle directory. The bundle contains a minimized version of the tabs plugins with a Fuse Box Quantum API.
`html
`
Min: If you want use other orxapi tools or plugins choose the min bundle and add external api.
`html
...
`
$3
Plugins Tabs supports npm under the name "orxapi.plugins.tabs".
TypeScript code
`ts
import * as $ from "jquery";
import { TabsManager } from "orxapi.plugins.tabs";
// Create tabs from content
const createTab = new TabsManager({
createTabsFromContent: true,
selectTab: 2
});
// Select the third tabulation
const tabs_1 = createTab.getTabMap("tabs_1");
const selectTabs_1 = tabs_1.selected;
console.log("default selected tab: ", selectTabs_1);
/// -> default selected tab: 2
// Custom tabs
const customTab = new TabsManager({
createTabsFromContent: false,
tabsClass: "tabs-nav",
tabClass: "tab-item",
});
// Select the third tabulation
const tabsCustom_1 = createTab.getTabMap("tabs_1");
tabsCustom_1.selectTab(3);
`
HTML code
`html
info
...
description
...
details
...
info
description
details
...
...
...
`
LESS code
`less
// LOGIC
.tab-content {
display: none;
&.selected { display: block; }
}
``