jQueryで実装したパネルスライドサイド表示効果 slidereveal_jquery

jQuery プラグイン: slidereveal.js を使用します。これは、パネルの左右のスライド アウトと非表示の効果を制御するために使用できます。 プロジェクト アドレス: https://github.com/nnattawat/スライド公開。

使用方法

まず、jquery ライブラリ ファイルと slidereveal.js プラグインをページに読み込みます。

コードをコピーします コードは次のとおりです:

<スクリプト src="jquery.js"></script>
<スクリプト src="jquery.slidereveal.min.js"></script>

次に、カスタマイズされたコンテンツを含む div#slider などのパネル要素を本文に配置し、ボタンや要素などのパネル呼び出しをトリガーする要素を配置します。

コードをコピーします コードは次のとおりです:

<div id="スライダー" クラス="スライダー"> ハローウェバはあなたを歓迎します！
</div>
<button id="trigger" class="trigger">左に展開</button>

最後に、slidereveal.js プラグインを直接呼び出します。コードは次のとおりです。

コードをコピーします コードは次のとおりです:

$('#slider').slideReveal({

トリガー: $("#trigger")
});

オプション設定

デフォルトでは、パネルは左側からスライドしてメイン ページのコンテンツを右側に「押し出し」、キーボードの「ESC」キーを使用してパネルを閉じることができます。

プロパティ	説明	デフォルト値
幅	整数型、パネル幅。	250
プッシュ	ブール値、true に設定すると、パネルは展開時にページのメイン コンテンツを片側に「押し出し」ます。 false に設定すると、パネルはページのメイン コンテンツの上に展開されます。	本当
位置	文字列、パネルの展開とスライドの方向を設定します。「左」または「右」に設定できます	「左」
速度	整数、パネル拡張速度、単位: ミリ秒。	300
トリガー	jQuery DOM セレクター、$("#element") など、パネルの表示と非表示をトリガーできるページ要素を設定します	未定義
自動エスケープ	ブール型。キーボードの ESC キーを使用して展開されたパネルを非表示にすることを許可するかどうかを設定します。	本当
トップ	整数。パネルとウィンドウの上部の間の距離を設定します。	0
ショー	パネルが展開されたときに呼び出されるコールバック関数。	-
表示	パネルが展開されたときに呼び出されるコールバック関数。	-
非表示	パネルが非表示になったときに呼び出されるコールバック関数。	-
ショー	パネルが非表示になったときに呼び出されるコールバック関数。	-

slidereveal.js プラグインは、展開メソッド呼び出しと非表示メソッド呼び出しも提供します。コードは次のとおりです。

コードをコピーします コードは次のとおりです:

//パネルを展開
$('#slider').slideReveal("表示"); //パネルを非表示にする
$('#slider').slideReveal("隠す");

上記は、この記事で共有した内容のすべてです。必要な友達が来て、jQuery に慣れるのに役立つことを願っています。