内容を『あとで』読み込むから動作が軽いAjaxタブの導入方法

上のようなタブインターフェイスをAjaxで実現するサンプルのご紹介です。

サイトを開いたときに全てを読み込まず、タブをクリックしたときに別に用意したhtmlファイルを読み込み表示します。

注意点はUTF-8環境でなければ使えません。

導入方法は以下に。

まずはダウンロード

Ajax Tabs Content script
上のリンク先のサイトへ行き、画面中央の赤丸で囲ったものをダウンロードします。
上のサイトでは、サンプルもありますので試してみてください。

demo.htmを開き編集

ダウンロードしたものを解凍すると『ajaxtabscontent』というフォルダがありますので、その中にある『demo.htm』を編集します。

ここで補足説明しておきますが、このスクリプトはフリーで使えます。
もちろんどこかにリンクを貼らなければならないと言う条件もありません。
個人、商用問わず使う事が可能です。ですが、スクリプトを呼び出すファイル（ここではdemo.htmをさしますが、以下の文を消してはなりません。

これはスクリプト内に記述されているので、サイトに表示される内容ではありません。

/***********************************************
* Ajax Tabs Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

これを消してしまうと著作権を侵害しますのでご注意ください。


さて、編集の続きですが、以下の文を自分用にカスタマイズします。


これでもう完成します。

スタイルの変更

あとはajaxtabs.cssを開き、スタイルを変更できます。

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

ここで、『color: #2d2b2b;』が文字の色です。

タブの画像をオリジナルのものにして、文字を白くしたければ#FFFFFFに直せば白い文字になります。

.contentstyle{
border: 1px solid gray;
width: 450px;
margin-bottom: 1em; padding: 10px;
}

ここでは横幅なんかを変更できます。

タブのイメージは
・shade.gif
・shadeactive.gif
です。

横幅5px縦幅45pxですから、同じ形の、同じファイル名で作れば簡単にカスタマイズ可能です。

表示される内容

内容はexternal3.htm等を読み込んでいますので、ご自由に変更したり、新規作成したりしてください。