タグ別アーカイブ: next

タブパネルの初期化

今回はタブパネルを作成した場合のタブ表示についてです。
通常のタブ表示であれば結構簡単なのですが、全てのタブを非選択状態にするのは少し面倒です。
最初はパネルを表示しないタブについて、初期化する方法を試してみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var checkFlg;
                $('.tab').click(function() {

                    // Select Check
                    checkFlg = false;
                    if ( $(this).hasClass('selected') ) {
                        checkFlg = true;
                    }

                    // All Hide
                    $('.panel').hide();
                    $('.tab').removeClass('selected');

                    // Select Show
                    if (checkFlg == false) {
                        $(this).next().show();
                        $(this).addClass('selected');
                    }

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #disp_area .area{
                float            : left;
                margin           : 20px;
            }

            #disp_area .panel{
                display          : none;
            }

            .selected {
                color            : #0000ff;
                background-color : #ff0000;
            }

        --></style>


    </head>
    <body>

        <div id="disp_area">

            <div class="area">
                <span class="tab">TabName1 </span>
                <div class="panel">Panel Data 1.<br />Panel Data 1.<br />Panel Data 1.<br />Panel Data 1.<br />Panel Data 1.</div>
            </div>
            <div class="area">
                <span class="tab">TabName2 </span>
                <div class="panel">Panel Data 2.<br />Panel Data 2.<br />Panel Data 2.<br />Panel Data 2.<br />Panel Data 2.</div>
            </div>
            <div class="area">
                <span class="tab">TabName3 </span>
                <div class="panel">Panel Data 3.<br />Panel Data 3.<br />Panel Data 3.<br />Panel Data 3.<br />Panel Data 3.</div>
            </div>
            <div class="area">
                <span class="tab">TabName4 </span>
                <div class="panel">Panel Data 4.<br />Panel Data 4.<br />Panel Data 4.<br />Panel Data 4.<br />Panel Data 4.</div>
            </div>

        </div>

    </body>
</html>

sample

spmple では最初の段階ではパネルは表示されていません。
タブをクリックすることで、選択したタブの内容を表示しています。
選択中のタブを再度クリックした場合は、全てのパネルが表示されない状態になります。

すでに選択済みのタブかどうかが分かればいいだけなのですが、地味にめんどくさい処理です。
今度からはこの方法を使用していければいいなぁと思いますね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 0 人がこの 投稿 は役に立ったと言っています。

前後のオブジェクトを操作する。

今回は Object を Click した時などに、前後の Object を操作する方法です。

たとえば、複数の名称と説明文が存在するときに、click した項目のみの説明文を表示することができます。
とりあえず、やって見ましょう。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('dt').click( function () {
                    $('dd').slideUp('normal');
                    if ($(this).next().is(':hidden')) {
                        $(this).next().slideDown('normal');
                    } else {
                        $(this).next().slideUp('normal');
                    }
                });
                $('dd').slideUp(0);

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            dl, dd, dt {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <dl>

                <dt>Sample01 Click!</dt>
                <dd>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                    <p>sample01 text. sample01 text. sample01 text. sample01 text. sample01 text.</p>
                </dd>

                <dt>Sample02 Click!</dt>
                <dd>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                    <p>sample02 text. sample02 text. sample02 text. sample02 text. sample02 text.</p>
                </dd>

                <dt>Sample03 Click!</dt>
                <dd>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                    <p>sample03 text. sample03 text. sample03 text. sample03 text. sample03 text.</p>
                </dd>

                <dt>Sample04 Click!</dt>
                <dd>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                    <p>sample04 text. sample04 text. sample04 text. sample04 text. sample04 text.</p>
                </dd>

                <dt>Sample05 Click!</dt>
                <dd>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                    <p>sample05 text. sample05 text. sample05 text. sample05 text. sample05 text.</p>
                </dd>

            </dl>

        </div>

    </body>
</html>

sample

sampleページでは タイトルを click したときに説明文の領域が表示されるようになりました。

今回は next() を利用しています。
next() は指定した Object の直後の Object を操作しています。
直前の Object を指定する場合には prev() を使用することで可能です。

この 2つを利用すると 直前,直後の Object を操作することができるため、色々と便利になります。
今回の様に説明文を別に表示するだけでも使い勝手はいいのではないでしょうか。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。