スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テンプレート講座第十一回 
2006 08 26
Sat 17:55:17

テンプレート講座  Comment 0  Trackback 0  edit.

今回は前回の「一番簡単な折りたたみスクリプト」と同じスクリプトのカスタマイズですが、スクリプト自体はFCafeさんのスクリプトを使用して更なる機能向上の改造例を記事にしましょう。
都合により、テンプレートで使用したままと言う訳にもいかず省略した部分が有りますが基本を理解するには簡単な方が良いでしょう。
まず、下のスクリプトを見て下さい。

<script type="text/javascript">
<!--
function showhide(id){
if(document.getElementById){
if(document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById("sub1").style.display = "none";
document.getElementById("sub2").style.display = "none";

document.getElementById(id).style.display = "block";
}
}
}
//-->
</script>


ちょっとスクリプトをいじった事が無い人には何が書かれているか判りませんが、簡略に説明すると「クリックしてスクリプトを呼び出し受け渡されたID名のスタイル属性display" "なら"none"を設定し直す。"none"なら" "に設定する、それ以外の設定されたID名の属性は全て"none"に変更」と言うスクリプトです。
スタイルシート属性の「display: none"」「表示しない」と言う意味だという事を理解して下さい。
これが設定されたブロック(divでもPでもulでも構いません)にID名を設定してstyle="display: none"を追加する事で、初期状態は「非表示」になる訳です。(ソース上は読み込まれてますが、ブラウザには表示されないという事)
更にこのスクリプトは、項目数を増やす事も可能な為、色々な事に使えます。(ハンバーグでは記事自体に使用しました。)

document.getElementById("sub1").style.display = "none";

これを1セットとして考えsub1の名前が重複しないように増やしていけば良い訳です。(それに準じてクリックする項目も増やします。)

次は、ブロックやパーツを開閉する為のHTMLタグを説明しましょう。
取りあえず、以下のタグを眺めて見て下さい。

<div>
<a href="JavaScript:showhide('sub1')" title="項目1">項目1</a><br />
<a href="JavaScript:showhide('sub2')" title="項目2">項目2</a>
</div>


<div id="sub1" style="display: none" onclick="showhide('sub1')">

ここに項目1で表示する内容を設定します。

</div>

<div id="sub2" style="display: none" onclick="showhide('sub2')">

ここに項目2で表示する内容を設定します。

</div>


ここで重要なのが、スクリプトを呼び出す方法です。

<a href="JavaScript:showhide('sub1')" title="項目1">項目1</a>

とリンク設定されているのが分かりますよね。
この中で「sub1」と言うのが重要な意味を持ちます。
スクリプトにも既に「sub1」が設定されています。
(document.getElementById("sub1").style.display = "none";)

動作を説明すると、「項目1のリンクをクリックした時に、「sub1」と言うID名を持つブロックのスタイルシート属性(display)を調べ" "で有るなら"none"に変更し、"none"で有るなら" "に変更して表示・非表示を切り替える」という事です。

ここまでは、「一番簡単な折りたたみスクリプト」でも説明されてますので分かると思います。

ちょっと違うのは、FCafeさんのこのスクリプトは、いくつかの項目を全て開閉させるのではなく「個別に順次開閉」と言うスクリプトです。
つまりは、「他の項目を開くと開いていた別の項目は閉じる」と言う事で、同じエリアなどに別の項目をクリックすると表示される様な使い方がこのスクリプトの性質です。

今回、このスクリプトを使用し、更に開いた項目(ブロック)をわざわざボタンで閉じるのではなく、開いた項目(ブロック)で閉じよう!と言うカスタマイズです。

上のHTMLタグに《onclick="showhide('sub1')"》と言う見慣れないタグが書かれているのが判りますよね?
実は、これもスクリプトを呼び出す方法の一つです。(詳しくはTAG indexリファレンスサイトを参考にして下さい。)

スクリプトを呼び出し「sub1」と言うID名を渡す事でid="sub1"を付けられたブロックが開閉されると言う仕組みです。
ここでは開いた状態でonclickが使える訳ですから、《閉じる》に限定される事になります。
勿論、onclickを使わずに、<a href="JavaScript:showhide('sub1')" title="閉じる">閉じる</a>と言うリンクを作っても構わない訳です。

色々考えられますが、今回はブロックエリア自体を開閉に使用する方法と言う事で理解して頂ければ幸いです。
まぁ?《onclick》を付けられるブロックが有ればそこをクリックする事で閉じる事が出来ると言う事ですね。

有る程度の知識を持っている方には、あまり参考にならない記事ですが、これから色々スクリプトもいじってみたいと思う方には参考になるかなと出来るだけ分かりやすく記事にしました。

くれぐれもこの記事は、開発者FCafeさんのお陰で色々楽しめる訳ですから、感謝こそすれご迷惑な事だけはしないで下さい。

「自分では作れないが、作れる技術を持っている方が、好意で使用させてくれている」と言う事を決して忘れないように。

ではまた。

ジャンル [ ブログ テーマ [ カスタマイズ ]

Re comments.

Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。