目次
概要 †
ThickBoxはAjaxを使用してリンク先（画像・HTML）をポップアップ表示させるライブラリです。
- 環境情報
OS CentOS 5.3 WebServer Apache 2.2 ライブラリ ThickBox 3.1
設置方法 †
ライブラリの入手 †
配布元サイト（http://jquery.com/demo/thickbox/）へアクセスし、[Download]セクションにあるリンクよりファイルをダウンロードします。
以下のファイルを入手します
| リンク名 | URL |
| thickbox.js | http://jquery.com/demo/thickbox/thickbox-code/thickbox.js |
| thickbox-compressed.js | http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js |
| ThickBox.css | http://jquery.com/demo/thickbox/thickbox-code/thickbox.css |
| loadingAnimation.gif | ttp://jquery.com/demo/thickbox/images/loadingAnimation.gif |
| jQuery JavaScript library | http://jquery.com/src/jquery-latest.js |
ライブラリの配置 †
Webコンテンツの配置ディレクトリにライブラリを配置します。
/js/thickbox配下に配置する例では、以下の様なディレクトリ構成となります。
| ディレクトリ | ファイル | コメント |
| /js/thickbox | thickbox.js | |
| thickbox-compressed.js | ||
| thickbox.css | ||
| jquery.js | jquery-latest.jsをリネームします | |
| /js/thickbox/images | loadingAnimation.gif |
HTMLへの組み込み †
thickboxを使用するHTMLのヘッダに以下の設定を入れます。
太字部分はライブラリを保管しているパスを記述しますので、配置場所が異なる場合は変更します。
| <script type="text/javascript" src="/js/thickbox/jquery.js"></script> |
| <script type="text/javascript" src="/js/thickbox/thickbox.js"></script> |
| <link rel="stylesheet" href="/js/thickbox/thickbox.css" type="text/css" media="all" /> |
HTML内での利用方法 †
HTMLを表示させる †
リンクからHTMLをポップアップさせます。
太字部分に表示させるHTMLを指定します。
| <a href="test.html?keepThis=true&TB_iframe=true&height=250&width=400" class="thickbox" title="comment">リンク</a> |
Last-modified: 2009-12-01 (火) 13:12:40 (5253d)