タグ別アーカイブ: show

jQuery 3 の show / hide

前回 jQuery 3 の話をしましたが、その際に show / hide の例を挙げました。
今回は実際にどのように変化があるのかを試したいと思います。

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

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#show').click( function() {
                    $('#disp_area1').show();
                    $('#disp_area2').removeClass('disp_hide');
                });
                $('#hide').click( function() {
                    $('#disp_area1').hide();
                    $('#disp_area2').addClass('disp_hide');
                });

            });


        --></script>

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

            div {
                margin           : 10px;
            }

            .disp_area {
                width            : 300px;
                height           : 300px;
                float            : left;
            }

            #disp_area1 {
                width            : 250px;
                height           : 250px;
                background-color : #ff0000;
                display          : none;
            }

            #disp_area2 {
                width            : 250px;
                height           : 250px;
                background-color : #0000ff;
            }

            .disp_hide {
                display          : none;
            }

        --></style>

    </head>
    <body>
        <div id="button_area">
            <button id="show">Show</button>
            <button id="hide">Hide</button>
        </div>
        <div id="main_area">
            <div class="disp_area">
                <h1>Ver. Old</h1>
                <div id="disp_area1">Sample Text</div>
            </div>
            <div class="disp_area">
                <h1>Ver. 3</h1>
                <div id="disp_area2" class="disp_hide">Sample Text</div>
            </div>
        </div>

    </body>
</html>

sample

sample の「show」「hide」を click すると表示されている領域が表示され・・・ますね。
・・・表示されますね。想定していた動きと異なります。
どうも sample が良くないようですね(笑)

jQuery 3 では以下の動きにあ変わるようです。
 「show」 display の style を削除するのみ
 「hide」 display に style=”none” を追加するのみ

そのため、show / hide を含み、fadeIn, sadeOut, slideDown, slideUp の処理が
正常に動かなくなることがあるそうです。

そのため、jQuery 3 を使用して初期を非表示をする場合には addClass, removeClass
にて表示を切り替える必要があるようです。

とりあえずは既存のものでなければとくには問題がないのでしょうか(笑)
う~ん、正直よくわかりませんが、取り立てて恐れる必要はないようですね。
今後は jQuery 3 も選定の範囲に入れてもよさそうですね。

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

PHP/Ajax での認証機能

今回は簡単な認証機能用のフォーム作成です。
実際の認証処理は PHP で行うのですが、PHP で認証した後に内容を出力し
ajax で内容の入れ替えを行います。
まぁ、主となる部分が PHP で行う形なので、本ブログで扱う内容として
「適切なのかな・・・。」とは思いますが(笑)

<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(){

                $('#exeCheck').click( function () {
                    $.ajax({
                        type     : 'POST',
                        dataType : 'text',
                        url      : 'sample_110.txt',
                        data     : {
                                     id : $('#checkID').val(),
                                     pw : $('#checkPW').val()
                                   }
                    }).done(function(data) {
                        // ajax ok
                        $("#input_area").hide();
                        $("#disp_area").html(data).show();
                    }).fail(function(data) {
                        // ajax error
                        $("#disp_area").html('once more, please');
                    });
                });

            });

        --></script>

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

            #div {
                margin           : 20px;
            }
            
            #disp_area{
                display          : none;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="input_area">
                ID : <br />
                <input type="text" id="checkID" name="id"><br />
                PASSWORD : <br />
                <input type="password" id="checkPW" name="password"><br />
                <input type="button" id="exeCheck" name="submit" value="Submit">
            </div>
            <div id="disp_area">
            </div>
        </div>

    </body>
</html>

sample

sample では入力欄が2つあります。
ここで適正なID・PASSを入力してPHP 側での処理を行います。
本sample ではPHPを設定していないので何を入力しても正常となりますが(笑)

今回は WordPress にて特定のページだけ認証をしたいとの要望があったため
試験的に試してみました、この Blog では余り相応しくなかったかもしれませんね。

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

時間差で表示する文字列


2014/11/22 追記
時間差で表示する文字列(2)に jQuery 版を掲載しました。
jQuery を使う場合は新しく投稿した方を見てください。

今回は時間差での表示処理についてです。
正直な話、あまり jQuery は使いません(笑)
とある仕事で「使うかも・・・」との打診を受けたのですが、別の表示をする様に変わりました。
必要は無くなりましたが、今後の事を考えて作ってみます。

<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() {
                $('#obj01').hide(0);
                $('#obj02').hide(0);
                $('#obj03').hide(0);
                $('#obj04').hide(0);
            });

            function dispObject(id) {
                id.show('slow');
            }
            setTimeout("dispObject($('#obj01'))", 1000);
            setTimeout("dispObject($('#obj02'))", 2000);
            setTimeout("dispObject($('#obj03'))", 4000);
            setTimeout("dispObject($('#obj04'))", 5000);


        --></script>

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

            div {
                margin      : 50px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

            <div id="obj01">
                <p>Massage Line 01</p>
            </div>
            <div id="obj02">
                <p>Massage Line 02</p>
            </div>
            <div id="obj03">
                <p>Massage Line 03</p>
            </div>
            <div id="obj04">
                <p>Massage Line 04</p>
            </div>

        </div>

    </body>
</html>

sample

spmple では時間がを置いて四行の文字列が表示されるます。
指定する数字で表示する間隔を変更することができます。
別に画像なども表示する事が出来るため用途は色々広がります。

・・・機能としてはありふれた機能なんですがデザイナーさんが考えると夢が広がる内容ですね。
毎度のことながら私自身の美的センスの無さにはうんざりです・・・

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