日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年5月19日火曜日

HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式

ラベル: , , , , , ,

イントロダクション

前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、下にタブがあるタブコントロールを作成してみました。

HTML/CSS/JavaScriptでタブコントロールを作ってみた(下タブ) - display:none方式
http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-bottom.html


今回は、左にタブがあるタブコントロールを作成してみました。


HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式 : コード


スタイルシート(CSS)

以下のスタイルシートを、<head> 内などに埋め込みます。

<style type="text/css">

/* タブコントロールのヘッダのスタイル */
.tabControl-header
{
    width:100px;
    float:left;
}

/* タブコントロールのヘッダの項目のスタイル */
.tabControl-header-item
{
    border-style:solid;
    border-width:1px;
    background-color:#cccccc;
    
    padding:0px 16px 0px 16px;
    
    display:block;
}

/* タブコントロールのヘッダの項目のスタイル（選択時） */
.tabControl-header-item-selected
{
    border-style:solid;
    border-width:1px;
    background-color:#ffffcc;
    
    padding:0px 16px 0px 16px;
    
    display:block;
}

/* タブコントロールの要素のスタイル */
.tabControl-item
{
    border-style:solid;
    border-width:1px;
    
    padding:10px;
    margin-left:100px;
}

</style>


スタイルシートは、下タブの場合と異なり、左側にタブが表示できるようにスタイルを指定しています。

デフォルトで、左タブの幅は 100px; に設定しています。
タブの見出しが長くなる場合には、より大きなサイズを以下の部分に指定します。

  • .tabControl-header の width
  • .tabControl-item の margin-left


タブコントロールのデータのテンプレート

タブコントロールで表示したいデータ(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.insertBefore(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 は、上タブのものと同じです。


実行結果（プレビュー）


タブ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.ウーパのコンピュータ備忘録

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:下
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.ウーパのコンピュータ備忘録

HTMLとJavaScriptでタブコントロールを作ってみた-タブ:右
http://upa-pc.blogspot.com/2014/05/html-tabControl-right.html
Dr.ウーパのコンピュータ備忘録



関連する記事を、"ラベル"から探すことができます！

ラベル: , , , , , ,

この情報を、他の人にも伝える

シェアすることで、他の人がこの情報を見つけやすくなります！

このページのタイトルとURLのペアを取得:
ページとURLのペアを生成中...

投稿者
時刻:

コメントを投稿　（ここをクリックしてコメント投稿フォームを表示）

コメント投稿機能について

関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...