前の記事 ≪:PHPからフォト蔵のAPIを扱う「Services_Photozou」
次の記事 ≫:JavaScriptを使った各種WYSIWYGライブラリまとめ

JavaScriptを使ってページにマウスジェスチャ機能を実装する

2006年12月18日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

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>

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

関連エントリ

関連の記事検索:マウスジェスチャ, ライブラリ, mouse
スポンサード リンク

By.KJ : 2006年12月18日 07:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)