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

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

2015年5月19日火曜日

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

ラベル: , , , , , ,

イントロダクション

タブコントロールを使用すると、情報を整理するときにとても便利です。

タブコントロールはとても便利！何故便利なのか？
http://upa-pc.blogspot.com/2015/05/tab-control-is-useful.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.ウーパのコンピュータ備忘録



その時作成したタブコントロールでは、タブを切り替えるたびにタブの中身を生成する仕組みでした。
（タブの中身のデータを非表示(CSS の display:none)にしておき、タブコントロールの中にコピーする仕組み）

用途によっては、その方式が都合の良い時があります。
（タブを切り替えるたびに、内容を初期化したい場合など）


しかし、タブを切り替えるたびにコピー処理を実行するのは、処理対象のデータ量によっては処理の負荷がかかる場合があります。また、タブの中身に何らかの手を加えた場合に、タブを切り替えるたびに初期化されるのが望ましくない場合もあります。


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


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.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>



実行結果（プレビュー）


タブ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のペアを生成中...

投稿者
時刻:

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

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

関連記事

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

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

[表示形式]
クイックジャンプ
↑
ページトップ
このブログを検索
人気の投稿
新着情報
ブログ アーカイブ
←前・次→
の投稿