SuperSlide.jsダウンロードSuperSlide.jsソースコードのダウンロード

SuperSlide.js

ウェブサイトデータ

1.0.0

ダウンロード

superslide.js

次のPWAの軽量で構成可能なスライディングメニューが約束します。たった2k gzipt！

このライブラリは、ネイティブのようなアニメーションパフォーマンスを提供しながら、次のWebアプリケーションに高度に構成可能ですぐに使用できるスライドメニューを提供することを目的としています。これは、BX、請求書、時間追跡、プロジェクト管理PWAの開発中にOSRECテクノロジーによって作成されました。

インストール

 npm install superslide.js

使用法

スクリプトタグでライブラリを参照してください

 < script src =' superslide.js ' > </ script >

基本的なHTMLマークアップを追加します

 < body >
  < div id =' content ' > Content </ div >
  < div id =' menu ' > Menu </ div >
</ body >

スタイルを追加します（何が起こっているのかがわかります！）

 < style >
  body     { padding: 0px; margin: 0px; }
  #menu    { background: #ccc; }
  #content { min-height: 100vh; min-width: 100vw; }
</ style >

メニューを初期化します

 var myMenu = new OSREC . superslide
( {
    slider : document . getElementById ( 'menu' ) ,
    content : document . getElementById ( 'content' ) ,
    animation : 'slideLeft'
} ) ;

// Promise resolves once menu is open
var openPromise = myMenu . open ( ) ;

ここでデモを試してみてください

アニメーション

標準バージョンには、利用可能な4つのアニメーションオプションがあります。

Slideleft	スライダーライト	スライドボトム	スライドトップ

プロバージョンにはさらに多くのメニューアニメーションが含まれています（ @ https://osrec.co.uk/products/superslidejsをチェックしてください）

パラメーター

animation （ string ）：アニメーションライブラリのアニメーション（ slideLeft 、 slideRight 、 slideTop 、 slideBottom ）のいずれか。
duration （ integer ）：スライドアニメーションの秒単位の期間
allowDrag （ boolean ）：タッチイベントを介してメニューを開いた位置または閉じた位置にドラッグします。
slideContent （ boolean ）：メニューと一緒にコンテンツをスライドさせます
allowContentInteraction （ boolean ）：メニューが開いている間にコンテンツをクリックまたはスクロールしていることを許可します
closeOnBlur （ boolean ）：メニューの外側のどこにでもクリックまたはタップしたときにメニューを閉じます
width （ string ）：メニューの幅（垂直エッジに沿って座るメニュー用）。例： '60vw'または '300px'または'80％ '
height （ string ）：メニューの高さ（水平方向のエッジに沿って座るメニューの場合）。例： '50vh'または '300px'または'80％ '
dragThreshold （ integer ）：ユーザーがドラッグを開始できる場所からの端からのピクセル数。例：70。AllowDragオプションで使用します。
openThreshold （ integer ）：メニューが開いた位置にある場合、ピクセルの数は自動的に開く前にドラッグする必要があります。例：30。AlowDragオプションで使用します。
closeThreshold （ integer ）：メニューが閉じた位置にある場合、ピクセルの数は自動的に閉じる前にドラッグする必要があります。例：20。AlowDragオプションで使用します。
beforeOpen （ callback ）：メニューが開き始める前に実行されます
onOpen （ callback ）：メニューが開いた直後に実行されます
beforeClose （ callback ）：メニューが閉じ始める前に実行されます
onClose （ callback ）：メニューが閉じられるとすぐに実行されます

方法

OSREC.superslide.open()メニューを開きます。メニューが開くと解決する約束を返します（つまり、アニメーションが完了します）。
OSREC.superslide.close()メニューを閉じます。メニューが閉じると解決する約束を返します（つまり、アニメーションが完了します）。
OSREC.superslide.toggle()メニューを切り替えます。メニューが切り替えたら解決する約束を返します（つまり、アニメーションが完了します）。
OSREC.superslide.isOpen() trueメニューが開いている場合、閉じた場合はfalse。中間ドラッグの場合の最後の状態。ブールを返します。
OSREC.superslide.ready()メニューが完全に初期化されているかどうかを確認します。完全に初期化されたときに解決する約束を返します。
OSREC.superslide.destroy()メニューを破壊します。これにより、メニューが破壊される前に開いている場合にメニューが閉じられます。 nullを返します