月別アーカイブ: 2015年5月

readyイベントの実行待機

今回の件はちょっと感動しました。
備忘録的に記録しておきます。

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

            // on hold
            $.holdReady(true);

            // off hold
            function offHold() {
                 $.holdReady(false);
            }

            $(function(){


                $('#disp_area').fadeOut();
            });

        --></script>

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

            div {
                margin           : 10px;
            }

            button {
                margin           : 5px;
            }

            div#area_1 {
                width            : 380px;
                height           : 340px;
                border           : solid 1px #ff0000;
                background-color : #ff0000;
            }
            div#area_2 {
                width            : 340px;
                height           : 320px;
                border           : solid 1px #00ff00;
                background-color : #00ff00;
            }
            div#area_3 {
                width            : 300px;
                height           : 300px;
                border           : solid 1px #0000ff;
                background-color : #0000ff;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="button" onclick="offHold();">click me!</button>
            </div>
            <div id="disp_area">
                <div id="area_1"><div>
                <div id="area_2"><div>
                <div id="area_3"><div>
            </div>

        </div>
    </body>
</html>

sample

sample の中で button を click すると div の表示が消えます。
・・・うん、sample のチョイスが悪かったですね(笑)

実際には div の表示削除は ready イベントによってページ読み込み後、
すぐに実行される形となっています。
ただ、今回通常とちょっと違うのは holdReady の挙動です。

なんと、次の一行を記述するだけで、本来は ready イベントにて
実行される処理を待機させることができるんですね!

$.holdReady(true);

さらに以下の一文で待機を解除させることができるんです。

$.holdReady(true);

たとえば何かの処理で解除後のみ、ready の処理を実行することができます。
何かの処理は load などでも対応できますので、外部 js を作成した場合も、
特定の js を読み込んだときのみ実行することができます。
googleMap とかの外部スクリプトを読み込みするときなど、微妙な読み込み
を気にすることなく動作をさせることができそうです。

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

                $('#exec_o_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').css({'background-color' : '#ff0000'});
                });
                $('#exec_e_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').css({'background-color' : '#00ff00'});
                });

                $('#exec_odd').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').addBack().css({'background-color' : '#ff0000'});
                });
                $('#exec_even').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').addBack().css({'background-color' : '#00ff00'});
                });

                $('#exec_class-a').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.a').addBack().css({'background-color' : '#0000ff'});
                });
                $('#exec_class-b').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.b').addBack().css({'background-color' : '#ff00ff'});
                });
                $('#exec_class-c').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.c').addBack().css({'background-color' : '#ffff00'});
                });

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            button {
                margin           : 5px;
            }

            div.disp_area {
                width            : 500px;
                border           : solid 1px #000000;
            }

            div.target_div {
                width            : 50%;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="exec_o_only">click me! change odd only</button>
                <button id="exec_e_only">click me! change even only</button>
                <br />
                <button id="exec_odd">click me! change odd add parent</button>
                <button id="exec_even">click me! change even add parent</button>
            </div>
            <div id="disp_area" class="disp_area">
                <div class='target_div odd '>Target Div  1</div>
                <div class='target_div even'>Target Div  2</div>
                <div class='target_div odd '>Target Div  3</div>
                <div class='target_div even'>Target Div  4</div>
                <div class='target_div odd '>Target Div  5</div>
                <div class='target_div even'>Target Div  6</div>
                <div class='target_div odd '>Target Div  7</div>
                <div class='target_div even'>Target Div  8</div>
                <div class='target_div odd '>Target Div  9</div>
                <div class='target_div even'>Target Div 10</div>
            </div>

            <div id="button_area2">
                <button id="exec_class-a">click me! change class-a</button>
                <button id="exec_class-b">click me! change class-b</button>
                <button id="exec_class-c">click me! change class-c</button>
            </div>
            <div id="disp_area2" class="disp_area">
                <div class='target_div a'>Target Div  1</div>
                <div class='target_div b'>Target Div  2</div>
                <div class='target_div c'>Target Div  3</div>
                <div class='target_div b'>Target Div  4</div>
                <div class='target_div a'>Target Div  5</div>
                <div class='target_div b'>Target Div  6</div>
                <div class='target_div a'>Target Div  7</div>
                <div class='target_div a'>Target Div  8</div>
                <div class='target_div c'>Target Div  9</div>
                <div class='target_div b'>Target Div 10</div>
            </div>

        </div>
    </body>
</html>

sample

sample の動作自体は前回と変わりません。
変更内容は andSelf が addBack に変わったところです。

「andSelf 万歳!!!」ぐらいのノリで喜んでいたのですが、とある方より
「andSelf は Ver1.8 以降は非推奨ですよ」とのご指摘を頂きました。
ご指導は非常に非常にありがたいですね。

とりあえず、andSelf の代替手段を探してみましたが、addBack での対応が可能なようです。
残念ながらこの間知ったばかりの機能なら、非推奨は避けたいですからね・・・
非推奨はいつから削除されるかわかりませんし(笑)

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

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

直前の選択オブジェクトと現在の選択オブジェクト


直前の選択オブジェクトと現在の選択オブジェクト(訂正版)に訂正版を掲載しました。
andSelf は Ver.1.8 以降は非推奨とのことです。
今後は addBack をご使用ください。

Object の階層が深いと何時も苦労していたんですが、今までの苦労が嘘のようです。

親子階層のObject に対して 親階層を変更して 子階層の一部のみ find で検索して
其々に同じ変更を行うと云った処理です。

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

                $('#exec_o_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').css({'background-color' : '#ff0000'});
                });
                $('#exec_e_only').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').css({'background-color' : '#00ff00'});
                });

                $('#exec_odd').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.odd').andSelf().css({'background-color' : '#ff0000'});
                });
                $('#exec_even').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area').find('.even').andSelf().css({'background-color' : '#00ff00'});
                });

                $('#exec_class-a').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.a').andSelf().css({'background-color' : '#0000ff'});
                });
                $('#exec_class-b').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.b').andSelf().css({'background-color' : '#ff00ff'});
                });
                $('#exec_class-c').click( function(){
                    $('div').css({'background-color' : '#ffffff'});
                    $('#disp_area2').find('.c').andSelf().css({'background-color' : '#ffff00'});
                });

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            button {
                margin           : 5px;
            }

            div.disp_area {
                width            : 500px;
                border           : solid 1px #000000;
            }

            div.target_div {
                width            : 50%;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="exec_o_only">click me! change odd only</button>
                <button id="exec_e_only">click me! change even only</button>
                <br />
                <button id="exec_odd">click me! change odd add parent</button>
                <button id="exec_even">click me! change even add parent</button>
            </div>
            <div id="disp_area" class="disp_area">
                <div class='target_div odd '>Target Div  1</div>
                <div class='target_div even'>Target Div  2</div>
                <div class='target_div odd '>Target Div  3</div>
                <div class='target_div even'>Target Div  4</div>
                <div class='target_div odd '>Target Div  5</div>
                <div class='target_div even'>Target Div  6</div>
                <div class='target_div odd '>Target Div  7</div>
                <div class='target_div even'>Target Div  8</div>
                <div class='target_div odd '>Target Div  9</div>
                <div class='target_div even'>Target Div 10</div>
            </div>

            <div id="button_area2">
                <button id="exec_class-a">click me! change class-a</button>
                <button id="exec_class-b">click me! change class-b</button>
                <button id="exec_class-c">click me! change class-c</button>
            </div>
            <div id="disp_area2" class="disp_area">
                <div class='target_div a'>Target Div  1</div>
                <div class='target_div b'>Target Div  2</div>
                <div class='target_div c'>Target Div  3</div>
                <div class='target_div b'>Target Div  4</div>
                <div class='target_div a'>Target Div  5</div>
                <div class='target_div b'>Target Div  6</div>
                <div class='target_div a'>Target Div  7</div>
                <div class='target_div a'>Target Div  8</div>
                <div class='target_div c'>Target Div  9</div>
                <div class='target_div b'>Target Div 10</div>
            </div>

        </div>
    </body>
</html>

sample

sample の其々の button を click すると親階層と指定した子階層のに対しての
背景色を変更してみました。

実際には業務で使用してみないと正直わかりませんが、私としては非常に便利です。

今までは其々に行う変更内容を親子で別けて其々に指定していました。
そのせいで修正の際にどちらかのみを修正してお客様に怒られる・・・

皆さんはそんな経験は無いでしょうか。
今後は極力使っていきたいと思います。

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 flgErr = false;
                $('#exec1').click( function(){
                    try {
                        if (flgErr == true) {
                            throw new Error('Test Error Message');
                        }
                    } catch (errObj) {
                        alert('Error : ' + errObj.message);
                    }
                });

                $('#exec2').click( function(){
                    if (flgErr != true) {
                        flgErr = true;
                    } else {
                        flgErr = false;
                    }
                    $('#target_div').text('Error Flg : ' + flgErr);
                });
                $('#exec2').trigger('click');

            });

        --></script>

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

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="exec1">error check!</button>
                <button id="exec2">error status change</button>
            </div>

            <div id="disp_area">
                <div id="target_div"></div>
            </div>

        </div>
    </body>
</html>

sample

sample の「error check!」button を click すると error があった時の処理を行います。
今回は error の有る場合と無い場合を「error status change」button で切り替えて
確認しています。
 # 適当なエラー発生が思い付かなかったのでテスト用の error を投げました。

error が発生すると処理が止まってしまう事が良くあります。
色々な箇所で error が発生しそうな場所に埋め込んでおけば安心ですね。

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

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

アニメーションの同時実行

今回も備忘録的な内容です。
当blog でも animate の同時実行は何度か利用しているのかとも思います。
ただ、今回は同時実行をする際に、終了の時間を変更して欲しいとのことでした。
とりあえずやってみます。

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

                $('#exeMove1').click( function(){
                    $('#target_div').stop().css({top: 0, left: 0})
                    .animate(
                        {
                            top      : 300 + 'px',
                            left     : 300 + 'px'
                        },
                        3000,
                        'linear'
                    )
                });
                
                $('#exeMove2').click( function(){
                    $('#target_div').stop().css({top: 0, left: 0})
                    .animate(
                        {
                            top      : 300 + 'px'
                        },
                        {
                            duration : 3000,
                            easing   : 'linear',
                            queue    : false
                        }
                    )
                    .animate(
                        {
                            left     : 300 + 'px'
                        },
                        {
                            duration : 1500,
                            easing   : 'linear',
                            complete : function(){ $('#target_div').animate({left : 0 + 'px'}, {duration: 1500, easing: 'linear'}) },
                            queue    : false
                        }
                    );
                });

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            div#disp_area {
                position         : relative;
            }

            div#target_div {
                position         : absolute;
                width            : 50px;
                height           : 50px;
                background-color : #ffff00;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="exeMove1">click me! 1</button>
                <button id="exeMove2">click me! 2</button>
            </div>

            <div id="disp_area">
                <div id="target_div"></div>
            </div>

        </div>
    </body>
</html>

sample

sample 「click me! 1」を click すると黄色の div が右下に移動します。
まぁ、上に動く動きと、右に動く動作を同時に行っている形ですね。
但し、この場合それぞれの動きに対して時間を設定することができません。

sample 「click me! 2」を click すると黄色の div が右下に移動し、
その後、左下に移動します。
今回は下に動きの半分の時間で右へ行く動作を指定し、残りの時間で
左に移動させています。

上下の動きと左右の動きで実行時間を変えることができました。
この方法だと同時に違う object に動きをつけることも出来ます。

取り急ぎ今までは一つの object を動かすことが多かったため
余り気にしていなかったのですが、今後は色々な動作をさせる
ことが出来ますね。

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

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