toolslide.js

Minimalistic customizable slide panel (without jQuery)

Table of contents

• Quick start
• Usage
• Examples
• Options
• Methods
• Events
• Browser support
• Copyright and license

Quick start

Several quick start options are available:

Download the latest build

Development

• toolslide.js
• toolslide.css

Production

• toolslide.min.js
• toolslide.min.css

Install From Bower

bower install toolslide.js --save

Install From Npm

npm install toolslide.js --save

Done!

Usage

Including files:

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

Required HTML structure

<div id="toolslide">
	<div class="ts-container">
        <div class="ts-nav-container">
			<div class="ts-nav-item" ts-target="first">
			</div>
			<!-- Add more navigation buttons here -->
		</div>
		<div class="ts-content-container">
			<div id="first" class="ts-content-item">
				<div class="example-panel">
					<span>First panel content goes here</span>
				</div>
			</div>
			<!-- Add more content panels here -->
		</div>
	</div>
</div>

Attributes

toolslide.js makes use of html attributes to bind navigation elements to respective content.

Attribute | Description | ----------- | ------------------------------------- | ts-target | Specifies id of a target panel triggered with this navigation item

Initialization

All you need to do is invoke toolslide on an element:

var myToolslide = toolslide(elemment, options);

You can also initialize with css selector string:

var myToolslide = toolslide("#elementId", options);

Examples

There are some example usages that you can look at to get started. They can be found in the examples folder.

• Panel on the left
• Panel on the right
• Panel at the top
• Panel at the bottom

Options

toolslide.js can accept an options object to alter the way it looks and behaves. If no options object is passed default values are used. The structure of an options object is as follows:

{
  position: "left",
  height: "100%",
  width: "300px",
  startOpen: true,
  closeable: true,
  autoclose: false,
  autocloseDelay: 5000,
  clickOutsideToClose: true,
  minClosedSize: 0,
  toggleButton: "",
  embed: false,
  navigationItemWidth: "50px",
  navigationItemHeight: "50px",
  navigationOffsetX: "0px",
  navigationOffsetY: "0px",
  animations: {
    replace: "crossfade 0.5s ease-in-out",
    toggle: "slide 0.5s ease",
  },
  listeners: {
    beforeOpen: function(panel) {},
    afterOpen: function(panel) {},
    berforeClose: function(panel) {},
    afterClose: function(panel) {},
    beforeToggle: function(oldContent, newContent) {}
    afterToggle: function(oldContent, newContent) {}
  }

Here is the explanation of options object:

Option | Type | Description | Examples ---------------------- | --------------- | ----------------------------------------------------------------- | ----------- activePanel | string, Element | Position of the panel on the screen | "#elementId" position | string | Position of the panel on the screen | "top", "bottom", "left", "right" height | string | Panel height | "200px", "20%" width | string | Panel width | "200px", "20%" startOpen | boolean | Open panel after initialization | true, false closeable | boolean | Allow panel to be closed (by clicking active navigation element) | true, false autoclose | boolean | Allow panel to be auto closed (only when mouse cursor is outside) | true, false autocloseDelay | int | Auto close delay in miliseconds | 5000 clickOutsideToClose | boolean | Allow panel to be closed when clicked outside | true, false minClosedSize | int | Minimum panel size when closed | 0 toggleButton | string | Id of an element used as external toggle button | "" embed | boolean | Whether to embed panel within container or overlay it | true, false navigationItemWidth | string, number | Width of the navigation element | "50px", "5%" navigationItemHeight | string, number | Height of the navigation element | "50px", "5%" navigationOffsetX | string, number | Horizontal offset of the navigation elements container | "0px", "5%" navigationOffsetY | string, number | Vertical offset of the navigation elements container | "0px", "5%" animations.replace | string | Animation used when changing active panel | "slide 1s ease", "slidefade 2s ease-in", { type: "crossfade", easing: "ease", speed: ".5s" } animations.toggle | string | Animation used when panel is opened/closed | "slide 0.5s ease", { type: "slide", easing: "ease", speed: "1s" } listeners.beforeOpen | function | Callback fired before panel is opened | function (panel) {...} listeners.afterOpen | function | Callback fired after panel is opened | function (panel) {...} listeners.beforeClose | function | Callback fired before panel is closed | function (panel) {...} listeners.afterClose | function | Callback fired after panel is closed | function (panel) {...} listeners.beforeToggle | function | Callback fired before active content is changed | function (old, new) {...} listeners.afterToggle | function | Callback fired after active content is changed | function (old, new) {...}

Methods

Methods are called on toolslide instances. You shoud save the instances to variable to have further access to it.

void open()

Show the slide panel.

toolslide.open();

void close()

Hide the slide panel.

toolslide.close();

bool isOpen()

Check if panel is opened.

toolslide.isOpen();

bool isActive(target)

Check if target content element is active. Accepts DOM element as well as just the id.

toolslide.isOpen("elementId");

void setActiveById(elementId)

Sets element with specified id as new active item.

toolslide.setActiveById("elementId");

void setActiveByIndex(index)

Sets element at specified index as active item.

toolslide.setActiveByIndex(0);

Events

toolslide.js provides custom events for some of it's actions. Appropriate callbacks can be specified in options.

Event | Description | Arguments ------------- | --------------------------------------- | ------------------ | beforeOpen | Fires before panel is opened. | panelElement afterOpen | Fires after panel is opened. | panelElement beforeClose | Fires before panel is closed. | panelElement afterClose | Fires after panel is closed. | panelElement beforeToggle | Fires before active content is changed. | oldContentElement, newContentElement afterToggle | Fires after active content is changed. | oldContentElement, newContentElement

Copyright and license

Licensed under MIT license.

^ back to top