orxapi.plugins.tabs

The tabulation plugin library for orxapi.

Getting Started

If you haven't used NodeJs before, be sure to have install the LTS version on your desktop ! Check your version with this command:

node -v
v10.15.1

Installation

npm install orxapi.plugins.tabs --save

dependencies

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

Direct download

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.

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="../bundle/standalone/orxapi.plugins.tabs.min.js"></script>

Min: If you want use other orxapi tools or plugins choose the min bundle and add external api.

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="../bundle/min/api.js"></script>
  <script type="text/javascript" src="../bundle/min/orxapi.plugins.tabs.min.js"></script>
  <script type="text/javascript" src="../bundle/min/orxapi.booking.validation.min.js"></script>
  ...

Package Managers

Plugins Tabs supports npm under the name "orxapi.plugins.tabs".

TypeScript code

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

<!-- CREATE TABS FROM CONTENT -->
<div class="tabs-content">
  <div class="tab-content">
    <h2 class="title-tab">info</h2>
    ...
  </div>
  <div class="tab-content">
    <h2 class="title-tab">description</h2>
    ...
  </div>
  <div class="tab-content">
    <h2 class="title-tab">details</h2>
    ...
  </div>
</div>

<!-- CUSTOM TAB -->
<div id="tabsWrap_1" class="tabs-nav">
  <span class="tab-item">info</span>
  <span class="tab-item">description</span>
  <span class="tab-item">details</span>
</div>
<div class="tabs-content" data-tabs-target-id="tabsWrap_1">
  <div class="tab-content">
    ...
  </div>
  <div class="tab-content">
    ...
  </div>
  <div class="tab-content">
    ...
  </div>
</div>

LESS code

// LOGIC
.tab-content {
  display: none;
  &.selected { display: block; }
}

Methods

TabsManager()

• add Add a new tabs into TabsMap
• remove Remove a specific tabs into TabsMap
• getTabsMap Getting the tabs map
• getOptions Getting the options initialized

Tabs()

• selectTab Change the selected tab
• disabled Get / Set disabled tab
• selected Get the selected tab

See docs for more information

This library was designed to work with ES 5+

TODO

• [x] Add multi instance compatibility
• [x] Add examples
• [ ] Add unit tests
• [ ] Add functional tests
• [ ] Add documentation of the optional parameters
• [ ] Improve the documentation