skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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「a jQuery context menu plugin」サンプル

記事作成：2009年11月18日

前の記事：マウスオーバーした要素にスポットライトを当てるJavaScript「Making a Cool Spotlight Effect with jQuery」
次の記事：画像をクロスフェードさせるJavaScript「ImageFadingSlider」