JqueryポップアップレイヤーThickBoxプラグインの使い方の詳細説明

thickbox について話す人なら誰でも、これが jQuery のプラグインであることを知っていると思います。その機能は、jQuery に触れたばかりの人にとって、ダイアログ ボックスや Web ページをポップアップすることです。 ThickBox についてまだよく知らないので、今日はそれについて話しましょう。JQuery ポップアップ レイヤー ThickBox プラグインの使用方法を詳しく説明します。

準備: Thickbox.js、thickbox.css、jquery.js の 3 つのファイルが必要です。これらはインターネット上のどこからでもダウンロードできます

具体的な用途:

ステップ 1: これら 3 つのファイルをディレクトリに導入しますThickbox ページ

のコードは次のとおりです:

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="thickbox.js"></script>
    <link rel="stylesheet" href="thickbox.css" type="text/css" />

ステップ 2: 一般的に簡単な使用方法は、 タグとボタンにスタイルを追加することです: class=thickbox
Thickbox 関数呼び出しもあります: such tb_init()、tb_show() として;以下を参照してください。

いくつかの異なる用途:

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

<a href="001.jpg" class="thickbox"><img  src="/static/imghwm/default1.png"  data-src="001.jpg"  class="lazy"  / alt="JqueryポップアップレイヤーThickBoxプラグインの使い方の詳細説明" ></a>

OK、それだけです
2. ボタンまたはリンクをクリックします:

コードは次のとおりです:

<input alt="#TB_inline?height=300&width=400&inlineId=p1" title="shawnliu" class="thickbox" type="button" value="Show" />   
   <a href="#TB_inline?height=155&width=300&inlineId=p2&modal=true" class="thickbox">Show hidden modal content.</a>
   
   <p id="p1" style="display:none">
   <P>
     这是一个非模式对话框。
   </P>
   </p>

   <p id="p2" style="display:none">
   <P>
     这是一个模式对话框。
     <p style="TEXT-ALIGN: center"><INPUT id="Login" onclick="tb_remove()" type="submit" value="  Ok  " /></p>
   </P>
   </p>

手順:

同様に、追加リンクにシックボックス スタイルを追加します。

<a href="add.shtml?width=300&height=250" class="thickbox">新增</a>

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

編集も同様で、最初に元の情報を抽出してから、ユーザーに表示させます変更します:

コードは同じです:

コードは次のとおりです:

<a href="edit.shtml?width=300&height=250&nid=item.nid" class="thickbox">编辑</a>

4. Thickbox を使用して自分自身を見つけることができます 要素の場合、スタイルを使用する代わりに、次のような関数を使用できます。 :

コードは次のとおりです:

<p id="PicList"><a href="Pic01.jpg">
<img  src="/static/imghwm/default1.png"  data-src="Pic01s.jpg"  class="lazy"   border="0"/ alt="JqueryポップアップレイヤーThickBoxプラグインの使い方の詳細説明" >
</a><a href="Pic02.jpg">
<img  src="/static/imghwm/default1.png"  data-src="Pic01s.jpg"  class="lazy"   border="0"/ alt="JqueryポップアップレイヤーThickBoxプラグインの使い方の詳細説明" ></a>
</p>
$(function() {tb_init("#PicList a[img]");});

5. ajax を介してロードされたページの場合、thickbox スタイルは無効になります。 解決策:

HTML が AJAX でロードされ、ページに更新されている限り、次のコードを実行します。 :

tb_init('.thickbox');

6.

カスタム関数呼び出し: サムネイルをクリックすると、全体像を表示したい場合、
サムネイルURLは、全体像URLのサフィックスの前にs:

コードを追加するだけです。 :

<p id="PicList">
<img  src="/static/imghwm/default1.png"  data-src="Pic01s.jpg"  class="lazy"   border="0"/ alt="JqueryポップアップレイヤーThickBoxプラグインの使い方の詳細説明" >
<img  src="/static/imghwm/default1.png"  data-src="Pic01s.jpg"  class="lazy"   border="0"/ alt="JqueryポップアップレイヤーThickBoxプラグインの使い方の詳細説明" ></p>
$(function() {$("#PicList img").click(function() {tb_show("",this.src.substring(0,this.src.length-5)+&#39;.jpg&#39;,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 にはまだいくつかの問題があります!

概要:

これを勉強することで、多くの友人が Jquery ポップアップ レイヤー ThickBox プラグインの使用法をよりよく理解できるようになると思います。あなたの取り組みが役立つことを願っています。

関連する推奨事項;

Jquery ThickBox プラグインの使用体験 (非推奨)_jquery

フォームの値を Thickbox に転送する方法

JクエリTHICKBOX ポップアップレイヤープラグイン_jquery

以上がJqueryポップアップレイヤーThickBoxプラグインの使い方の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。