ホームページ ウェブフロントエンド jsチュートリアル jQueryで実装したパネルスライドサイド表示効果 slidereveal_jquery

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

May 16, 2016 pm 04:09 PM
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 に慣れるのに役立つことを願っています。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?

jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

徹底した分析: jQuery の長所と短所 徹底した分析: jQuery の長所と短所 Feb 27, 2024 pm 05:18 PM

徹底した分析: jQuery の長所と短所

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

jQuery を使用してすべての a タグのテキスト コンテンツを変更する

jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery における eq の役割と応用シナリオを理解する

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?

See all articles