チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル
スポンサード リンク
※ 追記 livedoor Readerのものにより近づけたサンプルはこちら。
livedoor ReaderにOPMLをインポートすると登録可能なRSSの一覧が表示されますが、その画面ではチェックボックス上をマウスでなめるようにドラッグするだけでチェックをON/OFFできるようになっています。
かなり不思議なUIなので、これはどうやっているんだろう?と考えてみたのですが、仕組みは簡単でした。
(ドラッグするとテキスト選択されてしまうので、チェックボックスの上でクリックを開始するとテキスト選択されずに済みます。)
ソースは以下の通り。簡単に実装するためにprototype.jsを利用しています。
/* require prototype.js */
if (typeof SAMPLE == "undefined") {
var SAMPLE = {};
}
SAMPLE.isMousedown = false;
SAMPLE.mousedown = function(e) {
SAMPLE.isMousedown = true;
}
SAMPLE.mouseup = function(e) {
SAMPLE.isMousedown = false;
}
SAMPLE.mouseover = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (SAMPLE.isMousedown) {
if (target.type == "checkbox") {
target.click();
}
}
}
Event.observe(document, "mousedown", SAMPLE.mousedown);
Event.observe(document, "mouseup", SAMPLE.mouseup);
Event.observe(document, "mouseover", SAMPLE.mouseover);
target.typeのみで判定させてますが、実際に実装するときはチェックボックスにclassをつけてclassNameも条件に加えたほうがいいです。mousuoverだけ実装すれば左クリックすらせずにチェックを切り替えられます。
チェックボックスの付近をドラッグしてもチェックを切り替えられるようにするには、チェックボックスを特定のクラス名を持つ要素に格納して、その要素にmouseoverされたらtarget.firstChild.click();とかすればいいです。
nbspSAMPLEtargetチェックボックスドラッグisMousedownmouseoverEvent
前のエントリー: « Googleブログ検索の特許で明らかになったブログの評価を決定する12の要因
次のエントリー: ブログにトラフィックを集めるための29の方法 »
トラックバック
このエントリーのトラックバックURL:
この一覧は、次のエントリーを参照しています: チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル:
» livedoor ReaderでのOPMLインポート後画面の“チェックボックス操作”を再現するJavaScriptサンプル from F.Ko-Jiの「一秒後は未来」
昨日書いた「チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル」に対して「livedoor Readerのと... [詳しくはこちら]
タイトル:
URL:
リンク用HTMLタグ:
powered by Google Chart API





