Multifunctional Sliding Drawer Plugin In JavaScript – toolslide.js

Category: Javascript | January 17, 2020
Author:karenpommeroy
Views Total:335 views
Official Page:Go to website
Last Update:January 17, 2020
License:MIT

Preview:

Multifunctional Sliding Drawer Plugin In JavaScript – toolslide.js

Description:

toolslide.js is a multifunctional sliding drawer plugin to create off-canvas navigation, tabbed side drawer panels, and much more.

How to use it:

1. Insert the stylesheet toolslide.css in the header, and the JavaScript toolslide.js at the end of the document.

<link rel="stylesheet" href="./dist/toolslide.css" />
<script src="./dist/toolslide.js"></script>

2. The minimal HTML structure for the drawer panel.

<div id="toolslide">
  <div class="ts-container">
    <div class="ts-nav-container">
      <div class="ts-nav-item" ts-target="first">
        Tab 1
      </div>
      <div class="ts-nav-item" ts-target="second">
        Tab 2
      </div>
      <div class="ts-nav-item" ts-target="third">
        Tab 3
      </div>
    </div>
    <div class="ts-content-container">
      <div id="first" class="ts-content-item">
        <div class="example-panel">
          <h5>Panel configuration:</h5>
          <textarea>Some fancy text here...</textarea>
        </div>
      </div>
      <div id="second" class="ts-content-item">
        <div class="example-panel">
          <span>Second panel content goes here</span>
        </div>
      </div>
      <div id="third" class="ts-content-item">
        <div class="example-panel">
          <span>Third panel content goes here</span>
        </div>
      </div>
    </div>
  </div>
</div>

3. Initialize the plugin and done.

var toolslide = toolslide("#toolslide", {
    // options here
});

4. Config the sliding drawer panel.

var toolslide = toolslide("#toolslide", {

    // 'top', 'right', 'bottom'
    position: "left",

    // panel height
    height: "100%",

    // panel width
    width: "25%",

    // open the panel on init
    startOpen: true,

    // is it closable?
    closeable: true,

    // min window size to close the panel
    minClosedSize: 0,

    // selector of toggle button
    toggleButton: "",

    // embed the panel in a separate container
    embed: false,

    // width/height of navigation itmes
    navigationItemWidth: "50px",
    navigationItemHeight: "50px",

    // auto close after a timeout
    autoclose: false,
    autocloseDelay: 5000,

    // close the panel on click outside
    clickOutsideToClose: true,

    // customize animations here
    animations: {
      replace: "crossfade 0.5s ease-in-out",
      toggle: "slide 0.5s ease",
    }

});

5. API methods.

// open the panel
toolslide.open();

// close the panel
toolslide.close();

// check if the panel is opened
toolslide.isOpen();

// check if target content is active
toolslide.isActive(target);

// set active element
toolslide.setActiveById("elementId");

// set active element by index
toolslide.setActiveByIndex(0);

You Might Be Interested In:


Leave a Reply