JqueryポップアップレイヤープラグインThickBox_jqueryの使い方-jsチュートリアル-php.cn

JqueryポップアップレイヤープラグインThickBox_jqueryの使い方

WBOY

リリース： 2016-05-16 16:28:07

オリジナル

1840 人が閲覧しました

Thickbox は、ダイアログボックスや Web ページボックスをポップアップしてユーザーエクスペリエンスを向上させる機能を備えた jQuery のプラグインです。その使い方を簡単に紹介します。
免責事項: これは単なる個人的な要約記録です。
準備作業: Thickbox.js、thickbox.css、jquery.js の 3 つのファイルが必要です。これらはオンラインのどこからでもダウンロードできます

具体的な用途:

ステップ 1: Thickbox を使用するページにこれら 3 つのファイルを導入します

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

2 番目のステップ: 一般的には、ラベルとボタンにスタイルを追加するのが簡単です: class=thickbox
tb_init()、tb_show() などの Thickbox 関数呼び出しもあります。以下を参照してください。

いくつかの異なる用途:

1. クリックして画像を表示します:

はい、以上です
2. ボタンまたはリンクをクリックします:

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

非表示のモーダルコンテンツを表示します。

手順: Thickbox を使用するまたはボタンに「#TB_inline?height=300&width=400&」を追加します。 #TB_inline は、thickbox を表示するためのサイズパラメータです。 -up ダイアログボックス。InlineId は表示するラベルまたはコンポーネントに対して、モーダルをモードと非モーダルの間で選択します。もちろん、多くのカスタマイズされたパラメーターを受け入れることもできます。 3. 一般に、プロジェクトでより頻繁に使用されるページは、フォームをロードするページです。たとえば、追加と編集を同じリストページ上で行うことができます。以下に示す:

やり方は同じで、追加したリンクにシックボックススタイルを追加します:

追加

前提として、表示したいページ(add.shtml)を用意し、表示したいサイズを指定する必要があります

編集も同じです。最初に元の情報を抽出し、それからユーザーに変更させます:

同じコード:

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

編集

4. シックボックスを必要とする要素を自分で見つけることができます。スタイルを使用する代わりに、次のような関数を使用できます。

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

$(function() {
tb_init("#PicList a[img]");});

5. Ajax を通じてロードされたページの場合、thickbox スタイルは無効になります。
AJAX が HTML をロードしてページを更新した後、次のコードを実行するだけです:

tb_init('.thickbox');
6. カスタム関数呼び出し:
サムネイルをクリックすると、大きな画像が表示されます。サムネイルの URL には、大きな画像の URL のサフィックスの前に s:

が追加されます。

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

$(function() {
$("#PicList img").click(function() {
tb_show("",this.src.substring(0,this.src.length-5) '.jpg',false);
});});

さらに、他のイベントを使用したい場合は、クリックをシックボックスをトリガーしたいイベントに変更することもできます。

THICKBOX は次のブラウザをサポートしています:
Windows IE 6.0、Windows IE 7、Windows FF 2.0.0.6、Windows Opera 9.0、Macintosh Safari 2.0.4、Macintosh FF 2.0.0.6、Macintosh Opera 9.10... しかし、私の経験によると、IE6 にはまだいくつかの問題があります!