テストサンプルの表示

トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ レイアウト枠(レイヤー)をボタンで表示/非表示にする

CSSサンプル」や「DHTMLサンプル」で、レイアウト枠(レイヤー)を説明いたしました。

今回、 「表示/非表示」を行うにはスタイル属性「visibility」を使用します。
詳しくは、「HTMLの解説」−「14.スタイル属性」をご参照下さい。

また、「CSSサンプル(カスケーディングスタイルシート)」−「画像を好きな位置に表示する(レイアウト枠(レイヤー))」や「文字を好きな位置に表示する(レイアウト枠(レイヤー))」、「画像の重ね合わせ」、
DHTMLサンプル」−「オンマウスで画像の表示非表示1」、「オンマウスで画像の表示非表示2」 なども参考にして下さい。

今回のサンプルは、ボタンを押すたびレイアウト枠(レイヤー)の「表示/非表示」を切替えます。
(表示→非表示→表示→非表示→..)
このような処理のことを「フリップフロップ」といいます。
フリップフロップとは、公園などにある「シーソー」のことで、「ぎっこん、ばったん」と片方ずつ交互にスイッチが入るものや、2つの状態が交互に反転するようなものの事を総称して言います。

◆ 実行サンプル


略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 解    説 】

まず、文字列を記述したレイアウト枠(レイヤー)を用意します。
上記で説明したとおり、スタイル属性に「position:absolute」「top」「left」を指定します。
今回はレイアウト枠(レイヤー)が1つなので「z-index」は使用しません。
ただ、文字データだけだと「表示/非表示」が解かりにくいので、背景に色を付けています。

また、今回は「name」属性を使わず、「id」属性でレイアウト枠(レイヤー)の名前を特定します。
このサンプルでは「id="div1"」としました。

<div id="div1" style="position:absolute; top:500px; left:20px; width:80px; height:40px; z-index:1;background-color: #ffccff;">テストサンプルの表示</div>

※「z-index」はレイアウト枠(レイヤー)同士が重なった時の表示順序で、数字が大きくなるほど、より上に表示されます。

次に、「表示/非表示」を切り替えるボタンを配置したフォームをひとつ用意します。
このフォームに名前は必要ありません。

<form>
<input type="button" value="レイアウト枠(レイヤー)の表示/非表示を交互に切り替える" onclick="div_flip()">
</form>


ボタンが押された時の処理は「DHTMLサンプル」で説明した「onclick=""」を使用し、その処理はJavascript「div_flip()」というサブルーチンで処理させるように指定しておきます。

「id」属性を使用して名前を特定する場合は、「document.all['(id属性の名前)']」という記述方法か「window.(id属性の名前)」を使います。
今回は「window.(id属性の名前)」を使ってみました。

上記の方法は、Internet Explorerでは使用できますが、それ以外のブラウザでは動作いたしません。
いろいろ調べましたところ、「getElementById()」を使用することにより可能だということがわかりました。

現在のレイアウト枠(レイヤー)の表示状態はスタイル属性の「visibility」で取得できますから、レイアウト枠(レイヤー)「div1」の表示状態は「document.getElementById(divnam).style.visibility」で取得できます。
そして その状態を「vflg」という変数にセットするのは次のように記述できます。
vflg = document.getElementById(divnam).style.visibility;

また、上記のレイアウト枠(レイヤー)をJavascript非表示にする場合は次のように指定します。
document.getElementById(divnam).style.visibility = 'hidden';

また、同様にJavascript表示したい場合「visible」をセットするか、次のように指定を解除します。
document.getElementById(divnam).style.visibility = 'visible';

レイアウト枠(レイヤー)の状態を反転させるためには「if文」を使います。
表示中の状態には状態フラグが何もセットされてない場合と、「visible」がセットされている場合の2通りありますから、非表示中の「hidden」でチェックした方が簡単です。

したがって「if文」の条件は「vflg == 'hidden'」となり、それ以外は「else文」を使って次のように記述します。
if (vflg == 'hidden'){ document.getElementById(divnam).style.visibility = 'visible'; }else{ document.getElementById(divnam).style.visibility = 'hidden'; }
これらを記述した「div_flip()」のサブルーチンは次のようになります。
function div_flip() { divnam = "div1"; vflg = document.getElementById(divnam).style.visibility; if (vflg == 'hidden'){ document.getElementById(divnam).style.visibility = 'visible'; }else{ document.getElementById(divnam).style.visibility = 'hidden'; } }

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「divehideb.js」というファイル名で保存します。

function div_flip() { divnam = "div1"; vflg = document.getElementById(divnam).style.visibility; if (vflg == 'hidden'){ document.getElementById(divnam).style.visibility = 'visible'; }else{ document.getElementById(divnam).style.visibility = 'hidden'; } }


次に、HEAD句内Javascriptの呼び出しを次のように記述します。

<script type="text/javascript" src="divhideb.js"></script>

テキストを記述した次のようなレイアウト枠(レイヤー)をbodyタグの直後ぐらいに記述します。

<div id="div1" style="position:absolute; top:500px; left:20px; width:80px; height:40px; z-index:1;background-color: #ffccff;">テストサンプルの表示</div>

最後にレイアウト枠(レイヤー)を「表示/非表示」するためのボタンを次のように記述します。

<input type="button" value="レイアウト枠(レイヤー)の表示/非表示を交互に切り替える" onclick="div_flip()" onclick="div_flip()">


page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom