独自の右クリックメニューを導入できるJavaScript「a jQuery context menu plugin」

マウスの右クリックで表示されるメニューをコンテキストメニューと呼ぶようです。
ショートカット的に使用できるこのコンテキストメニューをサイト独自に設定できると便利ですね。
jQueryプラグインJeegoocontext, a jQuery context menu pluginで導入しましょう。

sponsors

使用方法

Jeegoocontext, a jQuery context menu pluginからファイル一式をダウンロードします。

<link href="style.css" rel="stylesheet" type="text/css" />
<!-- デフォルトスキンここから -->
<link href="cm_default/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="cm_default/style_ie6_7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- デフォルトスキンここまで -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jeegoocontext.js"></script>
<script type="text/javascript">
$(function(){
	$('.class名').jeegoocontext('menu', {
		widthOverflowOffset: 0,
		heightOverflowOffset: 3,
		submenuLeftOffset: -4,
		submenuTopOffset: -5
	});
});
</script>
スキンは変更可能で、ファイルには合計2つ入っています。
次に対象にしたい要素にclassを振ります。

<div id="content">
	<p class="context">ここで右クリック</p>
</div>
最後にコンテキストメニュー部分を記述します。

<ul id="menu" class="jeegoocontext cm_default">
      <li class="icon">
          <span class="submenu"></span> //下層にメニューがある場合
          <span class="icon disk"></span> 
          Local Disk (C:) //表示テキスト
          <ul>
              <li class="icon">
                  <span class="icon folder"></span>
                  <span class="submenu"></span>
                  Folder 1
                  <ul>
                      <li class="icon">
                          <span class="icon file"></span>
                          file4.txt
                      </li>
                      <li class="icon">
                          <span class="icon file"></span>
                          file5.txt
                      </li>
                    </ul>
                </li>
                <li class="icon">
                    <span class="icon file"></span>
                    file1.txt
                </li>
                <li class="icon">
                    <span class="icon file"></span>
                    file2.txt
                </li>
                <li>file3.unknown</li>
            </ul>
        </li>
</ul>

サンプル

ここで右クリック


Javascriptサンプルページ一覧
skuare.net