応用 選択表示

ここでつくるもの

ページの内容から必要なものだけを選択して表示し、他のものは隠すような仕組みを作ります。

例えば、ウェブページ制作の小技集を作るときにhtmlタグ関係、css関係、javascript関係とキーワードを設定しておいて、必要なキーワードの部分だけを選択して表示できるようにします。

上部の [htmlタグ] [スタイル] [javascript] をクリックするとわかります。[選択表示にする方法]はこのようなページの作り方を説明した部分のみ、[全部表示]は選択の解除です。

タグのclass指定でキーワードを埋め込む

ページの内容をdivタグで区切りclass属性として内容により、html, css, javascriptなどとキーワードを記述します。

cssの規定ではclass属性にスペースで区切って複数の値を書くことができることになっています。その項目がcssとjavascriptの両方に関係する時は、class="css javascript"と書くことができます。

<div class="html">
<h2>表の作り方</h2>
<p>表を作るときは、まず・・・・・・・</p>
<p>そして・・・・・・・</p>
</div>

<div class="css">
<h2>背景画像の設定のし方</h2>
<p>背景画像を使うときには、まず・・・・・・・</p>
<p>そして・・・・・・・</p>
</div>

<div class="css javascript">
<h2>スクリプトでcssを制御する</h2>
<p>javascriptを使ってstyle指定をすることで、見栄えを変化させられます・・・・・・・</p>
<p>そして・・・・・・・</p>
</div>

<div class="html">
<h2>floatの使い方</h2>
<p>floatとは、レイアウトの仕方を、・・・・・・・</p>
<p>そして・・・・・・・</p>
</div>

・・・・・・・

「スクリプトでcssを制御する」の部分は、class="css javascript" と2つのキーワードが入っていることに注目してください。ここは、[スタイル] でも [javascript] でも表示されます。

選択ボタンをつくる

今回はイベントハンドラは手書きでbodyの中に書いておく。

<p class="btn">
<span onclick="xdisp('html')">htmlタグ</span>
<span onclick="xdisp('css')">スタイル</span>
<span onclick="xdisp('javascript')">javascript</span>
<span onclick="alldisp()">全部表示</span>
</p>

xdisp()やalldosp()は、head部にjavascriptのfunctionとして書かれています。クリックで呼び出されることになります。

class="btn" という属性を持った p要素の中のspan要素には枠線と背景色がついてボタンのような見え方になるようにスタイルシートの設定をしておきます。

p.btn span{
  border:outset #000000 1px;
  background:#eeeeee;
  padding:2px 5px;
  cursor:pointer;
}

ついでに次の指定も加えれば、クリックした時に見え方が変わります。

p.btn span:active{
  border:inset #000000 1px;
  background:#ffeeee;
}

プログラム

head部にかかれているjavascriptです。2つの function があります。

xdisp(x) はclass属性に指定したキーワードがあるものだけを表示し、他を非表示にするものです。

function xdisp(x) {
  var divelements = document.getElementsByTagName("div");
  for(var i=0; divelements.length>i; i++) {
     var classval = divelements[i].getAttribute("class")
     if (classval != null){
        if (classval.indexOf(x,0)>=0){
           divelements[i].style.display = "block";
        }else{
           divelements[i].style.display = "none";
        }
     }
  }
}

イベントハンドラで x にキーワードが代入されて呼ばれます。

まず div 要素の配列をつくり divelements という名前をつけます。

そのすべての 要素について for で繰りかえします。

それぞれのdivにあるclassの値をgetしてclassvalという変数に代入します。

class属性がない場合はnullになります。nullでない時(!=null)だけ作業をします。

★ classval.indexOf(x,0) はclassvalの中に x という変数の中の文字列が含まれているか調べます。

x の次の 0 は文字列検索を開始する場所をclassvalの初めの文字からにします。

indexOf は見つかったら最初の位置を返します。見つからない時は -1 を返します。したがって >=0 は「見つかったら」という意味になります。

★ divelements[i].style.display = "block"; はdivelements[i]を表示をするという指定。

★ divelements[i].style.display = "none"; は表示をしないという指定です。詳しい説明は下に別項目で書きます。

alldisp() は全部を表示するものです。

function alldisp() {
  var divelements = document.getElementsByTagName("div");
  for(var i=0; divelements.length>i; i++) {
     divelements[i].style.display = "block";
  }
}

まず div タグの配列をつくり divelements という名前をつけます。

そのすべての 要素について for で繰りかえします。

★ divelements[i].style.display = "block"; でdivelements[i]を表示をするという指定です。

style.display = "none"

これは次のようにタグにstyle設定をしているものです。

<div style="display:block;">

このスタイルの指定の仕方はお勧めできないのでいままであまり出てきていません。head部のstyleタグに書いてきました。その書き方では次のようになります。

div {
  display:block;
}

また、javascriptでスタイルを変更する時には、class属性を変更することで摘要するスタイルを変更することをお進めしました。ですから、直接javascriptでstyle属性を変更するのもあまり紹介されませんでした。

でも今回はclass属性で表示・非表示を切り替えている関係でclass属性を変更するのはやりたくないのです。

また、javascriptでさまざまな属性を設定するときは、setAttribute("属性名","値") をお勧めしました。

divelements[i].setAttribute("style","display:block;");

ここでこの方法を使わなかったのは、もともとstyle属性を指定していた場合に.setAttributeでは無効にしてしまうからです。

もういちどcssの表示方法の指定を書いておきます。

ブロックとして表示する。
display:block;
表示しない。
display:none;