タグ別アーカイブ: hasClass

横に固定されるメニュー(2)

前回サイドメニューではさすがにちょっと寂しかったので、
今回はサイドメニューに表示に多少の動きをつけてみたいと思います。

<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 menuMargin = 100;
                var classCnt   = 0;
                $(window).scroll(function () {
                    var nowTop   = 0;
                    var srcTop   = $(this).scrollTop();
                    $('#main_area div').each( function(cnt) {
                        nowTop = $(this).offset().top + $(this).height() - menuMargin;
                        if (srcTop < nowTop) {
                            if (classCnt != (cnt + 1)) {
                                $('div.menu_point').removeClass('active').stop().animate({'margin-left':'80px'}, 'fast', 'swing').css({'background-color':'#cccccc'});
                                classCnt = cnt + 1;
                                $('#menu_' + classCnt).addClass('active').stop().animate({'margin-left':'0'}, 'slow', 'swing').css({'background-color':'#ff9999'});
                            }
                            return false;
                        }
                    });
                });

                $('div#menu_area .menu_point').hover(
                    function () {
                        if ($(this).hasClass('active') == false) {
                            $(this).stop().animate({'margin-left':'0'}, 'fast', 'swing').css({'background-color':'#99ffff'});
                        }
                    },
                    function () {
                        if ($(this).hasClass('active') == false) {
                            $(this).stop().animate({'margin-left':'80px'}, 'fast', 'swing').css({'background-color':'#cccccc'});
                        }
                    }
                );

            });

        --></script>

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

            div#menu_area {
                position         : fixed;
                top              : 0;
                right            : -70px;
                z-index          : 9999;
            }

            div#menu_area .menu_point {
                border           : solid 1px #000000;
                margin           : 5px;
                padding          : 5px;
            }

            div#menu_area div.active {
                background-color : red;
                margin-left      : 0;
            }

            div.disp_area {
                height           : 1000px;
                border           : solid 1px #000000;
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="menu_area">
            <div id="menu_1" class="menu_point"><a href="#point_1">div area 1</a></div>
            <div id="menu_2" class="menu_point"><a href="#point_2">div area 2</a></div>
            <div id="menu_3" class="menu_point"><a href="#point_3">div area 3</a></div>
            <div id="menu_4" class="menu_point"><a href="#point_4">div area 4</a></div>
            <div id="menu_5" class="menu_point"><a href="#point_5">div area 5</a></div>
            <div id="menu_6" class="menu_point"><a href="#point_6">div area 6</a></div>
            <div id="menu_7" class="menu_point"><a href="#point_7">div area 7</a></div>
            <div id="menu_8" class="menu_point"><a href="#point_8">div area 8</a></div>
            <div id="menu_9" class="menu_point"><a href="#point_9">div area 9</a></div>
        </div>
        <div id="main_area">
            <h1>Page area</h1>
            <div id="point_1" class="disp_area"><h2>div area 1</h2></div>
            <div id="point_2" class="disp_area"><h2>div area 2</h2></div>
            <div id="point_3" class="disp_area"><h2>div area 3</h2></div>
            <div id="point_4" class="disp_area"><h2>div area 4</h2></div>
            <div id="point_5" class="disp_area"><h2>div area 5</h2></div>
            <div id="point_6" class="disp_area"><h2>div area 6</h2></div>
            <div id="point_7" class="disp_area"><h2>div area 7</h2></div>
            <div id="point_8" class="disp_area"><h2>div area 8</h2></div>
            <div id="point_9" class="disp_area"><h2>div area 9</h2></div>
        </div>

    </body>
</html>

sample

sample の内容も基本的には前回と変わりません。
違いとして該当の menu 部分に来たときにちょっとした動きをつけてみました。

今回の様に多少でも動きをつける方がやはり見映えは良いですね。
色々な動きの発想が出来るといいんですが難しいですね。

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

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

項目の絞り込みと移動

今回は一覧の絞り込みです。
最近パネルがばらばらに動く処理はよく見かけます。
これも「仕事で出来ればいいなぁ」といった話がありましたので試しに作ってみようと思います。

<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"><!--

            jQuery(function() {

                var valData;
                var valTop;
                var valLeft;

                var countTop  = 0;
                var countLeft = 0;
                
                var maxLeft   = 3;
                var menuHigth = 100;

                $('.button').click(function () {

                    // Get Value
                    countTop  = 0;
                    countLeft = 0;
                    valData = $(this).val();

                    // Loop
                    $('.list_div').each( function() {
                        if ($(this).hasClass(valData)) {
                        
                            // On Target
                            $(this).animate(
                                {
                                    top    : ((100 * countTop) + menuHigth),
                                    left   : (250 * countLeft)
                                }
                            ).show();

                            // Count Format
                            if (countLeft >= maxLeft) {
                                countLeft = 0;
                                countTop  = countTop  + 1;
                            } else {
                                countLeft = countLeft + 1;
                            }

                        } else {
                        
                            // Off Target
                            $(this).animate(
                                {
                                    top    : 50,
                                    left   : 0
                                }
                            ).hide();

                        }
                    });
                });

                $('.list_div').hide();

            });

        --></script>

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

            .list_div {

                position         : absolute;
                
                top              : 50px;
                left             : 0px;
                padding          : 5px;
                width            : 250px;
                height           : 100px;

            }

        --></style>

    </head>

        <div id="button_area">
            <button class="button" value="1">Click Button 1</button>
            <button class="button" value="2">Click Button 2</button>
            <button class="button" value="3">Click Button 3</button>
            <button class="button" value="4">Click Button 4</button>
        </div>

        <div id="list_area">
            <div class="list_div 1 2">
                <img src="./icon_jpeg01.jpg">
            </div>
            <div class="list_div 4">
                <img src="./icon_jpeg02.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg03.jpg">
            </div>
            <div class="list_div 2 3">
                <img src="./icon_jpeg04.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg05.jpg">
            </div>
            <div class="list_div 4">
                <img src="./icon_jpeg06.jpg">
            </div>
            <div class="list_div 1 2">
                <img src="./icon_jpeg07.jpg">
            </div>
            <div class="list_div 3">
                <img src="./icon_jpeg08.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg09.jpg">
            </div>
            <div class="list_div 2 4">
                <img src="./icon_jpeg10.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg11.jpg">
            </div>
            <div class="list_div 3">
                <img src="./icon_jpeg12.jpg">
            </div>
            <div class="list_div 1 2">
                <img src="./icon_jpeg13.jpg">
            </div>
            <div class="list_div 4">
                <img src="./icon_jpeg14.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg15.jpg">
            </div>
            <div class="list_div 2 3">
                <img src="./icon_jpeg16.jpg">
            </div>
            <div class="list_div 1">
                <img src="./icon_jpeg17.jpg">
            </div>
            <div class="list_div 4">
                <img src="./icon_jpeg18.jpg">
            </div>
            <div class="list_div 1 2">
                <img src="./icon_jpeg19.jpg">
            </div>
            <div class="list_div 3">
                <img src="./icon_jpeg20.jpg">
            </div>
            <div class="list_div 1 4">
                <img src="./icon_jpeg21.jpg">
            </div>
            <div class="list_div 2">
                <img src="./icon_jpeg22.jpg">
            </div>
        </div>

    </body>
</html>

sample

spmple を button が 4 個表示されています。
button を click することで特定の要素を表示します。
表示する際には click した button に関連する項目のみ表示します。
また、今回の主題である項目の位置変更が出来るようになりました。

実際には検索用の入力欄を 2 個設置して、入力した範囲の項目を表示させる形となりそうです。
とりあえず検索に関しては、もともと問題ないかなと考えていましたのでこれで何とかなりそうです。
やっぱり動きがあると目を引く分サイトを作るほうも楽しくなりますね。

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

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

タブパネルの初期化

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

<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 人がこの 投稿 は役に立ったと言っています。