明日のドライブ予定ルート！

より大きな地図で 都道24号線への運転ルート を表示

JQueryでのイベントハンドラへのAttach

JQuey1.7から.bind()、.delegate()、.live()が
.on()、.off()
に統合されてます。よく忘れるのでメモ！
<div id="outer"><p id="inner">くりっく！</p></div>
.bind()は
$('#inner').on('click.hoge',function(){});
.delegate()は
$('#outer').on('click.hoge','#inner',function(){});
.live()は
$(document).on('click.hoge','#inner',function(){})
イベント名にドット足すネームスペースと書くことによって
同じイベントに多重アタッチしても目当ての物だけデタッチできますので、ネームスペース付けるといい！
あと外からデータを渡したいときは
$('#outer').on('click.hoge','#inner',{arg:'でーただよー'},function(event){
alert(event.data.arg);
});
として渡せます。
どこにデータが格納されるのかFirebugとかで確認してみてください。
パフォーマンスは
delegate>live>bind
らしい？(未検証)

最後にdelegateを使って多重アタッチしてるときはstopPropagation()でバブリングを停めておくこと！
<a>の時はpreventDefault()でね！
IEはシラネーYO！

var hoge = function(){};
で処理作って.on()で簡単イベント管理！

Javascriptのクロージャーの話

Jqueryを使っていると何でもかんでも変数に関数つっこんで書いておけば色々使い回しが出来て良いのですが、即実行で使い捨てのときなんか「クロージャー」の出番です。
たとえばページを開いたときにDBから各種データを読み込んでボタン作ったりプルダウンボックスするときとか。
何が良いかというと変数を隔離できること？
あとちょっとかっこいい。
var hoge = function (){
alert('piyo');
}
hoge();
とするところを
(function(){
alert('piyo');
})()
とするだけ。

jqueryのdelegate

すっかり放置してましたねorz

久しぶりの更新はJavascriptネタで。

たとえば$.ajaxを使ってJSON形式でデータを受け取った後にforで展開するとかよくあると思いますが、
その時success内でイベントをバインドしないと実行されない。
というは当たり前ですが、実はlive()とdelegate()を使うとそんな事しなくても良いのです。

<div id="homu"></div>
の中に
$('#homu').html('<ul><li class="mado"></li></ul>');
するときに

$('#homu').delegate('.mado','click',function(){
なんとかかんとか
});
としておけば何個あとから.madoを追加してもイベントが自動的にバインドされるんですな。

というのを覚えた時には既にJQuery1.7のリリースで陳腐化していたというorz

bind(),live(),delegate()はon(),off()に統合されるようです。

詳しくは本家ドキュメントなどをどうぞ(´･ω･`)

アドオン版autpagerがメモリリークするの？

なんかアドオン版のautopagerがメモリリークして重いとかいう記事を見てそんなこと起きるんかいな～と実験してみた。
やりかたはgoogleで検索して、firebugのコンソールから
setInterval((function(){window.scrollBy(0,500)}),1000)
を実行。

・・・・・・・・・・

google先生に怒られた・・・

ボックスをランダムでうろうろ動かすjavascript+jquery

自分用メモここまでやった
<script type="text/javascript">
    $(document).ready(function(){
        var setting = {
            'tateidou': 100,
            'yokoidou': 100
        };
        var qbMove = function(){
            var moveDistance = function(hoge){
                return Math.floor(Math.random() * hoge * 2) - hoge;
            }
            var positionX = $('#qbBox').position().left + moveDistance(setting['yokoidou']);
            var positionY = $('#qbBox').position().top + moveDistance(setting['tateidou']);
            if (positionX < 0) {
                positionX = 0;
            }
            else
                if (positionX > $('html').width()) {
                    positionX = $('html').width()
                }
            if (positionY < 0) {
                positionY = 0;
            }
            else
                if (positionY > $('html').height()) {
                    positionY = $('html').height()
                }
            $('#qbBox').animate({
                'left': positionX,
                'top': positionY
            }, {
                duration: 1000,
                easing: 'swing',
                complete: function(){
                    setTimeout(function(){
                        qbMove()
                    }, 2000)
                }
            });
           
        }
        qbMove();
    })
</script>

homuhomuの記事意味がわからないＹＯ！ってつっこまれたので

前々回のエントリーhomuhomuの解説！
えーテキストエリアをクリックして何か文字が入っている状態で別の場所をクリックしてテキストエリアからフォーカスをはずすと何でもほむほむ語に変換してしまうほむほむ語変換機です(´･ω･`)
それだけ・・・