• かちびと.net

    HTML5のmenu要素にも対応した、独自の右クリックメニューを実装するjQueryプラグイン・jQuery contextMenuのご紹介です。あまり使う用途は無いでしょうけど一応メモ。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

HTML5のmenu要素にも対応した、独自の右クリックメニューを実装するjQueryプラグイン・jQuery contextMenu

スポンサーリンク

HTML5のmenu要素もサポートしている
オリジナルのコンテキストメニュー
を実装するjQueryプラグインです。
普通のサイトじゃ使わないでしょう
けど、最近ではHTML5製のリッチコン
テンツ等利用するシーンもあるかも
なのでメモがてら。

基本的に通常のWebサイトでコンテキストメニューを変えてしまうのはユーザビリティを大きく損ないますが、HTML5によるペイントツールやゲームなど幅広いコンテンツの実装が可能になってきましたのでこういったライブラリも用途が出来始めた気がします。

jQuery contextMenu


右クリックメニューを独自のものに変えます。それだけならちょっとアレなんですが、このプラグインは左クリックメニューにも出来るので一応覚えておいてもいいんじゃないかなと。他にもmenu要素にも対応してたり、アイコンを付けたりなどいろいろ応用が利くみたい。


右クリックでフォームが出る・・なんてのも作れる。実際あったら嫌ですけどw 応用が利く、というのは伝わりますでしょうか。

簡単なサンプルです。

Sample

<menu id="html5firefox8" type="context">
    <menuitem label="回転させる" onclick="alert('回転しちゃうのか?')" hint="I'm a hint"></menuitem>
    <menuitem label="リサイズ" onclick="alert('リサイズしちゃうのか?')"></menuitem>
    <menuitem label="選べません" onclick="alert('disabled')" disabled></menuitem>
        <menu label="シェアする">
            <menuitem label="twitterに投稿" onclick="alert('twitterちょっと疲れる')"></menuitem>
            <menuitem label="facebookに投稿" onclick="alert('facebook不具合多いね')"></menuitem>
                <hr>
            <menuitem type="checkbox" label="チェック!" onclick="alert('checkbox: ' + (this.checked ? 'check' : 'nope'))"></menuitem>
                <hr>
            <menuitem type="radio" label="はい" radiogroup="alpha" checked onclick="alert('radio: yes')"></menuitem>
            <menuitem type="radio" label="イエス" radiogroup="alpha" onclick="alert('radio: no')"></menuitem>
        </menu>
</menu>

サンプルではmenuタグで子要素を持つコンテキストメニューを作成してあります。

一応メモということで。MITライセンスですー。デモも沢山あるのでチェックしてみてはいかがでしょう。

jQuery contextMenu

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services