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.

Initialization

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

var myToolslide = toolslide("#elementId", 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,
  animations: {
    replace: "crossfade 0.5s ease-in-out",
    toggle: "slide 0.5s ease",
  },
  listeners: {
    open: function(panel) {},
    close: function(panel) {},
    toggle: function(oldContent, newContent) {}
  }

Here is the explanation of options object:

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.

Copyright and license

Licensed under MIT license.

^ back to top