ネットサービスの開発に役立ちそうな話題を中心にお届けします。
F.Ko-Jiの「一秒後は未来」 > Javascript > チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル
2007年03月28日 22:38
1777日前に投稿

チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル

  • ... PV
  • このエントリーをはてなブックマークに追加

スポンサード リンク

※ 追記 livedoor Readerのものにより近づけたサンプルはこちら。

livedoor ReaderにOPMLをインポートすると登録可能なRSSの一覧が表示されますが、その画面ではチェックボックス上をマウスでなめるようにドラッグするだけでチェックをON/OFFできるようになっています。

かなり不思議なUIなので、これはどうやっているんだろう？と考えてみたのですが、仕組みは簡単でした。

マウスを左クリックしたままチェックボックスの上を移動させてみてください。(JavaScriptが無効なRSSリーダーから見ている場合はページを訪問してください。)

   
   
   
   
   
   
   
   
   

(ドラッグするとテキスト選択されてしまうので、チェックボックスの上でクリックを開始するとテキスト選択されずに済みます。)

ソースは以下の通り。簡単に実装するために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();とかすればいいです。

関連エントリー

generated by 関連エントリーリストジェネレータ

スポンサード リンク

Written by
関連エントリーはこちら
お探しの情報が見つからない場合はサイト内検索もお試しください。
Meity.jp - Twitterなかまでプライベートなオフ会を開催したいなら


トラックバック

このエントリーのトラックバックURL:

この一覧は、次のエントリーを参照しています: チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル:

» livedoor ReaderでのOPMLインポート後画面の“チェックボックス操作”を再現するJavaScriptサンプル from F.Ko-Jiの「一秒後は未来」
昨日書いた「チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル」に対して「livedoor Readerのと... [詳しくはこちら]

トラックバック時刻: 2007年03月29日 20:11

Javascript / ユーザビリティ

English version

2007/03/28 22:38:50 by F.Ko-Ji
コメント (0) トラックバック (1) Javascript

前のエントリー: « Googleブログ検索の特許で明らかになったブログの評価を決定する12の要因
次のエントリー: ブログにトラフィックを集めるための29の方法 »

コピペにご利用ください。

タイトル:

URL:

リンク用HTMLタグ: