ホームページを作る人のネタ帳


売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ

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


スポンサード リンク

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

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

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

導入方法は以下に。



まずはダウンロード


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

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
***********************************************/


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


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

これでもう完成します。

スタイルの変更


あとは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等を読み込んでいますので、ご自由に変更したり、新規作成したりしてください。



新ブログ:ITクオリティもよろしく。
スポンサード リンク


はてなRSSへ追加 My Yahooへ追加 Livedoorへ追加 Google Readerへ追加

はてなブクマこのエントリーを含むはてなブックマーク livedoorクリップ livedoorクリップ Buzzurlにブックマーク Buzzurlにブックマーク newsing it! del.icio.usでブックマーク
私の他のブログの更新状況
RSS表示パーツ
最近のエントリー
» Photoshopちょいテク『惑星を作ってみよう』+360度パノラマ画像も作れるように
» 最近、ブログを書いている途中に筆が止まる理由がわかった気がする
» ブログエントリ別に見る『注目度10の法則』
» 天才という言葉は、生きている人にいう言葉じゃない気がする
» まるでphotoshop!JavaScriptで実装するクールなカラーピッカー[prototype.js]
» 今後の期待度が高いphotoshopブラシまとめサイト『Quality Brushes for Photoshop』
» FLASHサイト作成インスピレーションの参考になるflashサイト7つ
» あの時、何気なく吸い始めた一本のタバコの値段が900万だと知ったとき
» jQueryサンプル公開後の反省会。みなさんからのアドバイスを5本サンプル化
» [追記]数百件先の画像まで一気に検索してしまうインターフェイスを搭載したfirefoxアドオン
» プロとアマの違いってぶっちゃけたったひとつ
» 一晩で覚えるjQueryの逆引き基礎サンプル7つ
» あなたは大丈夫?知らず知らずのうちに感じている10のパソコンストレス
» よごれた感じのフォトショップチュートリアルとブラシ
» 第2回web開発者インタビュー。マチウケメール便開発者『開発環境はeclipseです!』

ホームページを作る人のネタ帳トップへ

Comment

当ブログのコメントポリシーはこちら

 
管理人にのみ表示する
 

Home

ブログ記事を検索

Google

カテゴリー

月別過去記事

RSSフィード

私のおすすめ書籍

リンク

お問い合わせとか

お問合せ、広告について

名前:
メール:
件名:
本文:

プラグイン

あわせて読みたい

フィードメーター - ホームページを作る人のネタ帳

SPONSORS


このブログについて

当サイトはインターネットでのデザインや、ホームページ作成に関する私Yamadaの個人的勉強をネタとしてご紹介するサイトになっています。 
>> 管理人プロフィール
>> このブログの人気記事
メールでホームページを作る人のネタ帳を購読





私が個人的に作ったり運営しているサイト
■アイデアノート
■WEB9.0 ホットなWEBサービスを
■ブログ支援【e】パレット(超人気)
■どばっと動画検索 イーチューブ
■ブログネタ収集用『BMF』
■PHPプログラムを作る人のメモ帳
■SEO上級者マニュアル

この日記のはてなブックマーク数

最近のエントリー

タグクラウド

最近のトラックバック

最近のコメント