イントロダクション
前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、上にタブがあるタブコントロールを作成してみました。HTML/CSS/JavaScriptでタブコントロールを作ってみた(上タブ) - display:none方式
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-top.html
今回は、下にタブがあるタブコントロールを作成してみました。
HTML/CSS/JavaScriptでタブコントロールを作ってみた(下タブ) - display:none方式 : コード
スタイルシート(CSS)
以下のスタイルシートを、<head> 内などに埋め込みます。<style type="text/css">
/* タブコントロールのヘッダの項目のスタイル */
.tabControl-header-item
{
border-style:solid;
border-width:1px;
background-color:#cccccc;
padding:0px 16px 0px 16px;
}
/* タブコントロールのヘッダの項目のスタイル（選択時） */
.tabControl-header-item-selected
{
border-style:solid;
border-width:1px;
background-color:#ffffcc;
padding:0px 16px 0px 16px;
}
/* タブコントロールの要素のスタイル */
.tabControl-item
{
border-style:solid;
border-width:1px;
padding:10px;
}
</style>
スタイルシートは、上タブの場合と同様です。
タブコントロールのデータのテンプレート
タブコントロールで表示したいデータ(HTML等)を埋め込むためのテンプレートの HTML です。
<div class="tabControl" id="tabControl1"> <!-- タブ1 --> <div class="tabControl-item" title="タブ1"> タブ1のデータです。<br /> <br /> <br /> </div> <!-- タブ2 --> <div class="tabControl-item" title="タブ2"> タブ2のデータです。<br /> <br /> <br /> </div> <!-- タブ3 --> <div class="tabControl-item" title="タブ3"> タブ3のデータです。<br /> <br /> <br /> </div> </div>
ここでは、テンプレートとして、3 つのタブのデータを用意してあります。
埋め込みたいデータに応じて、コードを書き換えます。
以下の部分が、一つのタブを表現するために必要な部分です。
<!-- タブ1 -->
<div class="tabControl-item" title="タブ1">
・・・省略・・・
</div>
div タグの title 属性の値として、タブの見出しを指定します。
div タグ内に、タブの中身を記述します。
必要なタブの数に応じて、1 つのタブを構成するデータを増減します。
1 ページ内に複数のタブコントロールを配置する場合には、
<div class="tabControl" id="tabControl1">
の id 属性の値を重複しない値に書き換えてください。
例）tabControl2, tabControl3, ...
タブコントロールのデータのテンプレートは、上タブの場合と同様です。
JavaScript
以下の JavaScript コードを「タブコントロールのデータ」の下に配置します(body タグ内)。<!--
タブコントロールの共通処理
initTabControl を呼び出す前に、一度のみ記述します
-->
<script type="text/javascript">
<!--
/*
タブコントロールの初期化
id_tabControl : タブコントロールの id
*/
function initTabControl(id_tabControl) {
var obj_tabControl = document.getElementById(id_tabControl);
var obj_tabHeader = document.createElement("div"); // タブのヘッダー
obj_tabHeader.setAttribute("class", "tabControl-header");
// タブのヘッダを生成
var tabHeaderItemCount = 0;
for (var i = 0; i < obj_tabControl.childNodes.length; i++) {
if (tabControl_isItem(obj_tabControl.childNodes[i])) {
// タブのヘッダの要素を作成
obj_tabHeader.appendChild(
createTabHeaderItem(obj_tabControl,
tabHeaderItemCount,
obj_tabControl.childNodes[i].title));
tabHeaderItemCount++;
}
}
// タブコントロールのヘッダを表示
obj_tabControl.appendChild(obj_tabHeader, obj_tabControl.childNodes[0]);
// デフォルトの選択状態を適用
tabControl_changeTab(obj_tabControl, 0);
/*
タブのヘッダの要素を作成する
obj_tabControl : タブコントロール
tabNumber : タブ番号
title : タブのタイトル
戻り値：
タブのヘッダの要素
*/
function createTabHeaderItem(obj_tabControl, tabNumber, title) {
var obj_tabHeader_item = document.createElement("span");
var obj_tabHeader_item_link = document.createElement("a");
obj_tabHeader_item_link.setAttribute("href", "javascript:void(0)");
obj_tabHeader_item_link.onclick = (function (obj, select) {
return function () {
tabControl_changeTab(obj, select);
};
})(obj_tabControl, tabNumber);
obj_tabHeader_item_link.appendChild(document.createTextNode(title));
obj_tabHeader_item.appendChild(obj_tabHeader_item_link);
return obj_tabHeader_item;
}
}
/*
アクティブなタブを選択
obj_tabControl : タブコントロール
tabNumber : 選択するタブの番号( 0 から )
*/
function tabControl_changeTab(obj_tabControl, tabNumber) {
var tabHeaderItemCount = 0;
for (var i = 0; i < obj_tabControl.childNodes.length; i++) {
if (tabControl_isItem(obj_tabControl.childNodes[i])) {
// タブのコンテンツの表示状態を変更
if (tabNumber == tabHeaderItemCount) {
obj_tabControl.childNodes[i].style.display = "block";
} else {
obj_tabControl.childNodes[i].style.display = "none";
}
tabHeaderItemCount++;
} else if (tabControl_isHeader(obj_tabControl.childNodes[i])) {
// ヘッダの選択状態を変更
var obj_tabControl_header_items = obj_tabControl.childNodes[i].childNodes;
for (var j = 0; j < obj_tabControl_header_items.length; j++) {
obj_tabControl_header_items[j].setAttribute("class",
j == tabNumber ? "tabControl-header-item-selected" : "tabControl-header-item");
}
}
}
}
/*
タブコントロールの要素かどうかをチェックする
obj : タブコントロールの要素かどうかをチェックする対象のオブジェクト
戻り値：
タブコントロールの要素の場合、true
それ以外、false
*/
function tabControl_isItem(obj) {
if (obj.tagName) {
if (obj.tagName.toLowerCase() == "div") {
var className = obj.getAttribute("class");
if (className) {
if (className == "tabControl-item") {
return true;
}
}
}
}
return false;
}
/*
タブコントロールのヘッダかどうかをチェックする
obj : タブコントロールのヘッダかどうかをチェックする対象のオブジェクト
戻り値：
タブコントロールのヘッダの場合、true
それ以外、false
*/
function tabControl_isHeader(obj) {
if (obj.tagName) {
if (obj.tagName.toLowerCase() == "div") {
var className = obj.getAttribute("class");
if (className) {
if (className == "tabControl-header") {
return true;
}
}
}
}
return false;
}
//-->
</script>
<!--
タブコントロールの個別処理
-->
<script type="text/javascript">
<!--
// タブコントロールの初期化を実行
initTabControl("tabControl1");
//-->
</script>
JavaScript は、上タブのものと１か所異なります。
以下の部分です。
// タブコントロールのヘッダを表示
obj_tabControl.appendChild(obj_tabHeader, obj_tabControl.childNodes[0]);
上タブの場合には、insertBefore によって、要素の先頭に挿入していましたが、下タブの場合には、appendChild によって、要素の最後に挿入しています。
実行結果（プレビュー）
タブ1のデータです。
タブ2のデータです。
タブ3のデータです。
JavaScript が動かない環境ではどうなるか？
何らかの理由により JavaScript が動かない、または無効に設定されている環境があります。そのような環境では、次のように、タブの中身が全て表示されるような形になります。
タブ1のデータです。
タブ2のデータです。
タブ3のデータです。
これは、JavaScript が動かない環境でも、最低限情報を表示できるようにするための配慮です。
HTML/CSS/JavaScriptでタブコントロールを作ってみた- display:none方式 シリーズ
上タブhttp://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-top.html
下タブ
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-bottom.html
左タブ
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-left.html
右タブ
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-right.html
HTMLとJavaScriptでタブコントロールを作ってみた シリーズ
HTMLとJavaScriptでタブコントロールを作ってみた-タブ:上
http://upa-pc.blogspot.com/2014/05/html-tabControl-top.html
Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2014/05/html-tabControl-top.html
Dr.ウーパのコンピュータ備忘録
HTMLとJavaScriptでタブコントロールを作ってみた-タブ:下
http://upa-pc.blogspot.com/2014/05/html-tabControl-bottom.html
Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2014/05/html-tabControl-bottom.html
Dr.ウーパのコンピュータ備忘録
HTMLとJavaScriptでタブコントロールを作ってみた-タブ:左
http://upa-pc.blogspot.com/2014/05/html-tabControl-left.html
Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2014/05/html-tabControl-left.html
Dr.ウーパのコンピュータ備忘録
HTMLとJavaScriptでタブコントロールを作ってみた-タブ:右
http://upa-pc.blogspot.com/2014/05/html-tabControl-right.html
Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2014/05/html-tabControl-right.html
Dr.ウーパのコンピュータ備忘録
コメントを投稿
コメント投稿機能について