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

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

sponsors

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

記事作成:
記事URL:

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