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

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 にはまだいくつかの問題があります!