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

toolslide.jsはシンプルでカスタマイズ可能なスライドパネル。jQueryは必要ありません。
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);
{ 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