Vimperatorが使えない人のFirefox3環境

Vimperatorが使えなくなったのでなんとかクイックヒントだけでも実装できないかとGreasemonkeyのスクリプトごりごり書いてみた。
ある程度のところまではできたんだけど結局Hit-a-Hintの方が完成度が高くて使いやすいのでそっちを選択。時間を無駄にしてしまったなー。
これでクイックヒントの機能は問題なくなったんだけど今度は画面のスクロールがメンドクサイ。
矢印キーだとちまちましすぎるし、PageUp&PageDownだと押しにくい。
以前ページスクロールのグリモンスクリプト書いたの思い出して、ブログから引っ張りだしたら無事Firefox3でも動いた。(Vimperator入れてたので使ってなかった)
でもこのスクリプト「スペースキー」でページをスクロールさせるので見事に「Hit-a-Hint」のキーとバッティング。
自分で書いたスクリプトなのでPageDownを「j」、PageUpを「k」に修正して無事解決。
なので今のFirefox3環境は
ページのスクロール:Greasemonkeyの自作スクリプト
クイックヒント:Hit-a-Hint
な感じです。
これで大分マウスに手が伸びることは減った。めでたしめでたし。
自作スクリプトはこれ:gmpage_scroller.user.js
詳細機能は過去記事を参照してください。キーはj&kに変わってます。
たぶん記事を読みやすくするGreasemonkeyのスクリプト

jQuery1.2のチートシート

jQuery1.2のチートシートを見つけたのでメモ。
http://www.gscottolson.com/jquery/jQuery1.2.cheatsheet.v1.0.pdf
http://colorcharge.com/wp-content/uploads/2007/12/jquery12_colorcharge.png
色付きだとやっぱり見やすいね。

jQueryでバブリング(bubbling)のテスト

jQueryでバブリングのテスト
またまたjQueryネタ。
仕事でイベントのバブリングを利用することになりそうだったので調べてみました。
DOMの下層エレメントがイベントを発生すると上位のエレメントまで伝播される。
このことをイベントバブリング(またはバブリング)と言います。
例えば下記の様な構造にそれぞれclickイベントが割り当てられていた場合koのクリックに対してko→oyaの順でイベントが発生します。

<div id=”oya”>
<div id=”ko”></div>
</div>
バブリングを利用する時はそのまま素直に利用すればいいのですが、上位エレメントにイベントを伝えたくない時もあります。
その時はイベントに対してstopPropagationメソッドを発行します。
サンプル作ってみたので試してみたい方はこちら
ソースは以下になっています。
■html

<p>バブリング</p>
<div id=”b3″ class=”box size3″>
<div id=”b2″ class=”box size2″>
<div id=”b1″ class=”box size1″>
</div>
</div>
</div>
<p>バブリング 停止</p>
<div id=”s3″ class=”box size3″>
<div id=”s2″ class=”box size2″>
<div id=”s1″ class=”box size1″>

</div>
</div>
</div>
■JavaScript

$(document).ready(function () {
$(”.box”).click(function (e) {
alert(this.id);
});
$(”#s2″).click(function (e) {
alert(”バブリングを停止します”);
e.stopPropagation();
});
});
もっと詳しく見たい方はサンプルページでソースを直接ご覧下さい。
使い易いのでjQueryを利用していますが、バブリングの考え方はJavaScirptで共通なのでjQueryじゃないと利用できないって事はありません。