月別アーカイブ: 2014年1月

Debug に便利な機能

jQuery, ,

最近、色々と jQuery を利用しています。
ですが、今ひとつ Debug の方法が不便ですね。
console もブラウザに依存してしまいます。

特に Tool を導入しているわけではないので文句を云うのも筋違いですが、
もう少し便利にできないかなぁ・・・、ということで幾つか調べてみました。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
         
        <script type="text/javascript"><!--
            $(function() {

                $('input').click(function (e) {
                    debug_data(e);
                    alert(disp_data);
                });

                $('button').click(function (e) {
                    debug_data(e);
                    alert(disp_data);
                });

                // debug data
                var disp_data = '';
                var last_time = '';
                function debug_data(e) {

                    // data clear
                    disp_data = '';

                    // event timestamp
                    if (last_time) {
                        disp_data = disp_data + 'timeStamp : ' + (e.timeStamp - last_time) + '\n';
                    } else {
                        disp_data = disp_data + 'timeStamp : ' + 'Time check start' + '\n';
                    }
                    last_time = e.timeStamp;

                    // event type
                    disp_data = disp_data + 'type : ' + e.type + '\n';

                    // event currentTarget
                    disp_data = disp_data + 'currentTarget Node : ' + e.currentTarget.nodeName + '\n';
                    disp_data = disp_data + 'currentTarget ID : ' + e.currentTarget.id + '\n';

                    return disp_data;

                }

            });
        --></script>
         
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #menu_items {
                width            : 200px;
                margin           : 0 auto;
                padding          : 20px;
            }
        --></style>
         
    </head>
    <body>
        <div id="menu_box">
            <input type="button" id="input box1" value="input box1" /><br />
            <input type="button" id="input box2" value="input box2" /><br />
            <button id="button box1">button box1</button><br />
            <button id="button box2">button box2</button><br /><br />
        </div>
    </body>
</html>

sample

sampleページで 各ボタンを click するとボタンについての情報が表示されます。

■event.timestamp
event が発生した時の timestamp を取得します。
1970/1/1 から ミリ秒単位での経過時間を表示しています。
それにしても中途半端な時期からの表示ですよね・・・

まぁ、値をそのまま表示してもあまり意味はありません。
処理の開始時と終了時の差分をとってから、処理の経過時間を表示する事になりますね。
これで処理のどこで時間がかかるのがわかります。

■event.type
特に複数の event が絡み合っている場合に使用できるかと思います。
複数の event のうち、どの event によって発生するのかを判断できます。

まぁ、簡単な処理の場合は使うことはあまりないですね。

■event.currentTarget
実際に event が発生した Object を取得できます。
Object が本当に予定しているものかの判断に使えます。

target に関して言うと Debug だけではなく選択項目の親や子孫の Object を取得したりと
色々と使い道があるのではないでしょうか。

これで少しは今後の作業が楽になるといいのですが・・・
便利になることを願って使っていきたいですね。

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

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

class の追加,削除について

jQuery, ,

今回は jQuery の処理を確認している時に見つけた toggleClass についてです。

以前にも addClass, removeClass を利用した class の追加,削除の機能を作りました。
実は toggleClass を使えば一つの関数でできるようです。
備忘録として保存しておきます。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
         
        <script type="text/javascript"><!--
            $(function() {
                 
                var menuBox = $('#menu_box');
                $(window).scroll(function () {
                    var winTop = $(this).scrollTop();
                    // メニューの高さを超えた時はメニュー位置を変更
                    menuBox.toggleClass('menu_fixed', (winTop > 0))
                });
                 
            });
        --></script>
         
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #menu_box {
                width            : 100%;
                background-color : #ffffff;
            }
            .menu_fixed {
                position         : fixed;
                top              : 0;
                left             : 0;
                z-index          : 9999;
                 
                filter:alpha(opacity=50);
                -moz-opacity: 0.5;
                opacity: 0.5;
                 
            }
             
            #menu_items {
                width            : 200px;
                margin           : 0 auto;
                padding          : 20px;
            }
             
            .disp_box {
                width            : 100%;
                height           : 300px;
            }
            #disp_box1 {
                background-color : #ffcccc;
            }
            #disp_box2 {
                background-color : #ccffcc;
            }
            #disp_box3 {
                background-color : #ccccff;
            }
            #disp_box4 {
                background-color : #ccffff;
            }
             
        --></style>
         
    </head>
    <body>
         
        <div id="menu_box">
            <div id="menu_items">
                <a href="#disp_box1">Box1</a>
                <a href="#disp_box2">Box2</a>
                <a href="#disp_box3">Box3</a>
                <a href="#disp_box4">Box4</a>
            </div>
        </div>
         
        <div id="disp_box1" class="disp_box">Display Box1 Area</div>
        <div id="disp_box2" class="disp_box">Display Box2 Area</div>
        <div id="disp_box3" class="disp_box">Display Box3 Area</div>
        <div id="disp_box4" class="disp_box">Display Box4 Area</div>
         
    </body>
</html>

sample

sampleページでスクロールしてもヘッダ部にメニュー固定します。
機能としては以前に作成した上部に固定されるメニューと同じです。

いつもは toggle 関係の処理は使用するのを極力避けています。
ですが toggleClass の場合にはいくつか使い方があるようです。
特に今回使用している switch の機能は if と同じようにできるのでよい感じです。
今回 toggleClass にするために変更した部分は以下の通りです。 

var menuBox = $('#menu_box');
$(window).scroll(function () {
    var winTop = $(this).scrollTop();
    if (winTop > 0) {    // メニューの高さを超えた時はメニュー位置を変更
        menuBox.addClass('menu_fixed')
    } else {
        menuBox.removeClass('menu_fixed')
    }
});

　↓

var menuBox = $('#menu_box');
$(window).scroll(function () {
    var winTop = $(this).scrollTop();
    // メニューの高さを超えた時はメニュー位置を変更
    menuBox.toggleClass('menu_fixed', (winTop > 0))
});

通常は toggleClass(classname) とすると、指定した Object に対して Class の追加削除を行います。
しかし、classname の後に条件分を加えることで、true / false の判定を行い、指定 Class の追加削除ができるようです。

他にも、以下の使い方も可能なようです。
■toggleClass(function)
指定した Object に対して function の帰り値となる classname の追加削除を行います。

色々と使い勝手が良さそうです。
今後は使っていきたいですね。

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

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

URLの表示内容を変更する

jQuery

今回も仕事で調べた内容です。

指定した文言を URL バーに表示する方法です。
備忘録として保存しておきたいと思います。

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

                $('button').click( function () {
                    location.hash = '#' + $(this).html();
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div {
                margin  : 10px;
                padding : 10px;
                border  : 1px #000000 solid;
            }
        --></style>
        
    </head>
    <body>

        <h1>URL hash</h1>
        <p>Please URL Check</p>
        <div>

            <p>
                <button class="btn_text1">text1</button>
                <button class="btn_text2">text2</button>
                <button class="btn_text3">text3</button>
                <button class="btn_text4">text4</button>
                <button class="btn_text5">text5</button>
            </p>

        </div>

    </body>
</html>

sample

sampleページでボタンを click したときに URL バーの文言がボタンに沿ったテキストが表示されます。

実際に処理を行うに当たっては特に意味があるわけではないのかなぁ、と思っていました。
あえていうと、「表示をすることで URL の表記をわかりやすくできる程度かな・・・」と

実際に試してみると少し違いました。
URL に hash を追加してみると、ブラウザバックが対応してくれます。
ブラウザのバック機能を制御できるのは面白い使い方ができそうですね。

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

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

指定した親要素の取得

jQuery,

今回は仕事で調べた内容です。
指定した Object に対して親要素となる Object を取得する方法です。

いままで使ったことはありませんでしたが closest は非常に便利でした。
備忘録として保存しておきたいと思います。

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

                $('.btn_div').click( function () {
                    $(this).closest('div').css('border-color', '#ff0000');
                });

                $('.btn_p').click( function () {
                    $(this).closest('p').css('border-color', '#0000ff');
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div ,
            p   {
                margin  : 10px;
                padding : 10px;
                border  : 1px #000000 solid;
            }
        --></style>
        
    </head>
    <body>

        <h1>DIV Area0</h1>
        <div>

            <h2>DIV Area1</h2>
            <div>
                <h3>P Area1</h3>
                <p>
                    <button class="btn_div">div 1</button>
                    <button class="btn_p">p 1</button>
                </p>
            </div>

            <h2>DIV Area2</h2>
            <div>
                <h3>P Area2</h3>
                <p>
                    <button class="btn_div">div 2</button>
                    <button class="btn_p">p 2</button>
                </p>
            </div>

            <h2>DIV Area3</h2>
            <div>
                <h3>P Area3</h3>
                <p>
                    <button class="btn_div">div 3</button>
                    <button class="btn_p">p 3</button>
                </p>
            </div>

        </div>

    </body>
</html>

sample

sampleページでは ボタンを click したときに Object の親要素の border 色が変わります。
各ボタンごとに指定している親要素が選択できていることがご確認いただけるのではないでしょうか。

同じような処理を複数行うにも関わらず、動的に id を設定できないことがあります。
通常は parent や parents で何とかなるんですが、階層的に p や span など複数階層になっている場合など、
直接の親要素ではなく何階層か上位の Object に指定したい場合にはうまく動作しません。

そんな場合に closest は非常に便利です。
自分が指定したフィルタに対応する直近の先祖要素となる Object を指定することができます。
class を指定することもできるようなので、色々とイベント操作にも幅を持たせることができそうです。

ちなみに jQuery 1.3 より追加されていたようです。
まぁ、今となっては使用制限という程でもありません。とくに意識せずに使用してもよさそうですね。

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

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