ネットサービスの開発に役立ちそうな話題を中心にお届けします。
F.Ko-Jiの「一秒後は未来」 > Javascript > livedoor ReaderでのOPMLインポート後画面の“チェックボックス操作”を再現するJavaScriptサンプル
2007年03月29日 20:10
1772日前に投稿

livedoor ReaderでのOPMLインポート後画面の“チェックボックス操作”を再現するJavaScriptサンプル

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

昨日書いた「チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル」に対して「livedoor Readerのとは少し違う」というツッコミがありましたので、再度サンプルを作り直してみました。

修正点は以下の通り。

  • チェックボックスを囲むリストエレメントでも操作は有効
  • リストエレメントもしくはチェックボックス上でmousedownしたらチェック状態を切り替える
  • マウスをドラッグすると、他のチェックボックスは最初に切り替わったチェックボックスの状態へのみ切り替わる

(JavaScriptが無効なRSSリーダーから見ている場合はページを訪問してください。)

ソースコード

/* サンプルのli要素には class="sample_li" をつけてます。 */
/* require prototype.js */
if (typeof SAMPLE == "undefined") {
    var SAMPLE = {};
}
SAMPLE.isMousedown = false;
SAMPLE.isChecked = false;
SAMPLE.clickedElement = undefined;
SAMPLE.mousedown = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    SAMPLE.clickedElement = target;
    if (target.type == "checkbox") {
        target.click();
        SAMPLE.isMousedown = true;
        SAMPLE.isChecked = target.checked;
    }
    else if (target.className == "sample_li") {
        target = target.firstChild;
        if (target.type == "checkbox") {
            target.click();
            SAMPLE.isMousedown = true;
            SAMPLE.isChecked = target.checked;
        }
    }
}
SAMPLE.mouseup = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target == SAMPLE.clickedElement && target.type == "checkbox") {
        target.click();
    }
    SAMPLE.isMousedown = false;
}
SAMPLE.mouseover = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className == "sample_li") {
        target = target.firstChild;
    }
    if (SAMPLE.isMousedown && target.type == "checkbox") {
        if (SAMPLE.isChecked && !target.checked || !SAMPLE.isChecked && target.checked) {
            target.click();
        }
    }
}
Event.observe(document, "mousedown", SAMPLE.mousedown);
Event.observe(document, "mouseup", SAMPLE.mouseup);
Event.observe(document, "mouseover", SAMPLE.mouseover);

確かにこのインタフェースなら使いやすいですね。

スポンサード リンク

Written by
関連エントリーはこちら
お探しの情報が見つからない場合はサイト内検索もお試しください。
Meity.jp - 「DM送りたいのでフォローしてください」とかめんどくさくないですか？


トラックバック

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

Javascript / ユーザビリティ

English version

2007/03/29 20:10:00 by F.Ko-Ji
コメント (0) トラックバック (0) Javascript

前のエントリー: « ブログにトラフィックを集めるための29の方法
次のエントリー: 日本や海外のRSS関連情報をお届けするFeedmedia »

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

タイトル:

URL:

リンク用HTMLタグ: