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>
コードをコピーします コードは次のとおりです:
$('#slider').slideReveal({
トリガー: $("#trigger")
});
//パネルを展開
$('#slider').slideReveal("表示"); //パネルを非表示にする
$('#slider').slideReveal("隠す");
上記は、この記事で共有した内容のすべてです。必要な友達が来て、jQuery に慣れるのに役立つことを願っています。
});
オプション設定
デフォルトでは、パネルは左側からスライドしてメイン ページのコンテンツを右側に「押し出し」、キーボードの「ESC」キーを使用してパネルを閉じることができます。
プロパティ | 説明 | デフォルト値 |
幅 | 整数型、パネル幅。 | 250 |
プッシュ | ブール値、true に設定すると、パネルは展開時にページのメイン コンテンツを片側に「押し出し」ます。 false に設定すると、パネルはページのメイン コンテンツの上に展開されます。 | 本当 |
位置 | 文字列、パネルの展開とスライドの方向を設定します。「左」または「右」に設定できます | 「左」 |
速度 | 整数、パネル拡張速度、単位: ミリ秒。 | 300 |
トリガー | jQuery DOM セレクター、$("#element") など、パネルの表示と非表示をトリガーできるページ要素を設定します | 未定義 |
自動エスケープ | ブール型。キーボードの ESC キーを使用して展開されたパネルを非表示にすることを許可するかどうかを設定します。 | 本当 |
トップ | 整数。パネルとウィンドウの上部の間の距離を設定します。 | 0 |
ショー | パネルが展開されたときに呼び出されるコールバック関数。 | - |
表示 | パネルが展開されたときに呼び出されるコールバック関数。 | - |
非表示 | パネルが非表示になったときに呼び出されるコールバック関数。 | - |
ショー | パネルが非表示になったときに呼び出されるコールバック関数。 | - |
slidereveal.js プラグインは、展開メソッド呼び出しと非表示メソッド呼び出しも提供します。コードは次のとおりです。
コードをコピーします コードは次のとおりです:
//パネルを展開
$('#slider').slideReveal("表示"); //パネルを非表示にする
$('#slider').slideReveal("隠す");
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック
Gmailメールのログイン入り口はどこですか?
7284
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1342
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1206
29



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

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

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

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