【Javascript】シンプルでカスタマイズ可能なスライドパネルtoolslide.js

Javascript

October 8, 2017

toolslide.jsはシンプルでカスタマイズ可能なスライドパネル。jQueryは必要ありません。

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>

Initialization
要素上のtoolslideを呼び出す

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

cssセレクター文字列で初期化する

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

Options

{
  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) {}
  }

MIT

Demo/Download