YUI: Mouse Gestures

JavaScriptを使ってページにマウスジェスチャ機能を実装するサンプルが公開されています。
基本ライブラリにはYahoo UI Libraryを使用しています。

画面上の灰色部分を左クリックしながらマウスジェスチャを行うことでアクションを起こすサンプルになっています。



コードは次のようになっています。
最初に、マウスの向きと関数名を関連付けた連想配列を定義して、YAHOO.widget.Gestures.init に渡しています。
後は関連付けた関数の中身を定義するだけという実装の容易さとなっています。

<script type="text/javascript">
    var config = {
        'left': test1,
        'right': test2,
        'up': test3,
        'down': test4,
        'upleft': test5,
        'upright': test6,
        'downleft': test7,
        'downright': test8
    }
    YAHOO.widget.Gestures.init(config);
    demoP = YAHOO.util.Dom.get('demo');
    function test1() {
        demoP.innerHTML = 'Mouse Moved Left';
    }
    function test2() {
        demoP.innerHTML = 'Mouse Moved Right';
    }
    function test3() {
        demoP.innerHTML = 'Mouse Moved Up';
    }
    function test4() {
        demoP.innerHTML = 'Mouse Moved Down';
    }
    function test5() {
        demoP.innerHTML = 'Mouse Moved Up and Left';
    }
    function test6() {
        demoP.innerHTML = 'Mouse Moved Up and Right';
    }
    function test7() {
        demoP.innerHTML = 'Mouse Moved Down and Left';
    }
    function test8() {
        demoP.innerHTML = 'Mouse Moved Down and Right';
    }
</script>

このライブラリによって、サイト上で面白い&使いやすいユーザインタフェースを実現できるかもしれませんね。

関連エントリ

• JavaScriptで線を描画するためのGraphicsクラスライブラリ
• javascript情報サイト「JavaScriptist」のユーザビリティ改善
• PHPの関数をJavaScriptで使うことができる「p2js」
• JavaScriptist - javascript/ajax/サンプル/入門/リファレンス/ライブラリ