Search

jQuery pluginコンテキストメニュー（右クリックメニュー）

  1. ContextMenu plugin〔コンテキストメニュー〕
  2. HaloContext - jQuery plugin for right-click halo context menus〔右クリックで円形メニュー表示〕
  3. jContext 1.0 – The ultra-lightweight right click context menu for jQuery〔半透明のコンテキストメニュー〕
  4. jQuery Context Menu Plugin〔クロスブラウザ対応のコンテキストメニュー〕

ContextMenu plugin
コンテキストメニュー

2009/6/20

ContextMenu plugin

Firefox 1.5+、Internet Explorer 6.0+
jquery.js、jquery.contextmenu.r2.js

ブラウザのデフォルトの右クリックメニューを無効にして、カスタムのコンテキストメニューを表示するjQueryプラグイン。

メニュー部分はリスト要素で指定します。 

<p><span class="demo1" id="demo1_yellow">RIGHT CLICK FOR DEMO</span></p>
<div class='contextMenu' id='myMenu1'>
    <ul>
        <li id='open'><img src='folder.gif' /> Open</li>
        <li id='email'><img src='letter.gif' /> Email</li>
        <li id='save'><img src='save.gif' /> Save</li>
        <li id='close'><img src='action_delete.gif' /> Close</li>
    </ul>
</div>

下記のようにクラスで定義しておけば、同じリスト要素のカスタムのコンテキストメニューを同一ページに複数配置できます。 また、コールバック関数を使用して、コンテキストメニューの挙動を制御することもできます。 

<script type='text/javascript'>
$(function() {
    $('.demo1').contextMenu('myMenu1',
        {
            bindings: {
                'open': function(t) {
                alert('Trigger was '+t.id+'\nAction was Open');
            },
            'email': function(t) {
                alert('Trigger was '+t.id+'\nAction was Email');
            },
            'save': function(t) {
                alert('Trigger was '+t.id+'\nAction was Save');
            },
            'delete': function(t) {
                alert('Trigger was '+t.id+'\nAction was Delete');
            }
        }
    });
});
</script>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>ContextMenu plugin | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.contextmenu.r2.js"></script> 
        <script type="text/javascript">
            $(function() {
                /* 例1 */
                $('span.demo1').contextMenu('myMenu1',
                    {
                        bindings: {
                            'open': function(t) {
                            alert('Trigger was '+t.id+'\nAction was Open');
                        },
                        'email': function(t) {
                            alert('Trigger was '+t.id+'\nAction was Email');
                        },
                        'save': function(t) {
                            alert('Trigger was '+t.id+'\nAction was Save');
                        },
                        'delete': function(t) {
                            alert('Trigger was '+t.id+'\nAction was Delete');
                        }
                    }
                });
                /* 例2 */
                $('#demo2').contextMenu('myMenu2',
                    {
                    menuStyle: {
                        border: '2px solid #000'
                    },
                    itemStyle: {
                        fontFamily : 'verdana',
                        backgroundColor : '#666',
                        color: 'white',
                        border: 'none',
                        padding: '1px'
                    },
                    itemHoverStyle: {
                        color: '#fff',
                        backgroundColor: '#0f0',
                        border: 'none'
                    }
                });
                /* 例3 */
                $('span.demo3').contextMenu('myMenu3',
                    {
                        onContextMenu: function(e) {
                            if ($(e.target).attr('id') == 'dontShow') return false;
                            else return true;
                        },
                        onShowMenu: function(e, menu) {
                            if ($(e.target).attr('id') == 'showOne') {
                            $('#item_2, #item_3', menu).remove();
                        }
                        return menu;
                    }
                });
            });
        </script>
        <style type="text/css">
            span.demo1 {
                background-color:yellow;
                margin-right:20px;
                padding:5px;
            }
            #demo2 span {
                background-color:lightpink;
                padding:5px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
<h1><a href='http://www.trendskitchens.co.nz/jquery/contextmenu/'>ContextMenu plugin</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>基本的な例</h2>
<p>
    <span class="demo1" id="demo1_yellow"><b>RIGHT CLICK FOR DEMO</b></span>
    <span class="demo1" id="demo1_green" style="background-color:lightgreen"><b>THIS WORKS TOO</b></span>
</p>
<div class="contextMenu" id="myMenu1">
    <ul>
        <li id="open"><img src="/content/img/icon/color/folder.gif" /> Open</li>
        <li id="email"><img src="/content/img/icon/color/letter.gif" /> Email</li>
        <li id="save"><img src="/content/img/icon/color/save.gif" /> Save</li>
        <li id="close"><img src="/content/img/icon/color/action_delete.gif" /> Close</li>
    </ul>
</div>

<h2>基本的な装飾</h2>
<p id="demo2">
    <span>Right clicking anywhere in this paragraph will trigger the context menu.</span>
</p>
<div class="contextMenu" id="myMenu2">
    <ul>
        <li id="item_1">Item 1</li>
        <li id="item_2">Item 2</li>
        <li id="item_3">Item 3</li>
        <li id="item_4">Item 4</li>
        <li id="item_4">Item 5</li>
        <li id="item_4">Item 6</li>
    </ul>
</div>

<h2>コールバック使用</h2>
<p style="font-weight: bold;">
    <span class="demo3" id="dontShow" style="padding: 5px; background-color:pink">Don't show menu</span>
    <span class="demo3" id="showOne" style="padding: 5px;background-color:lightgreen">Just first item</span>
    <span class="demo3" id="showAll" style="padding: 5px;background-color:lightblue">Show all</span>
</p>
<div class="contextMenu" id="myMenu3">
    <ul>
        <li id="item_1">Item 1</li>
        <li id="item_2">Item 2</li>
        <li id="item_3">Item 3</li>
    </ul>
</div>
<!-- / CODE -->
        </div>
    </body>
</html>

HaloContext - jQuery plugin for right-click halo context menus
右クリックで円形メニュー表示

2009/3/1

HaloContext - jQuery plugin for right-click halo context menus

MIT＆GPL
jquery.js、jquery.halocontext.js

右クリックで、円形のメニューを表示するjQueryプラグイン。

要素をを右クリックすると、右クリックした位置を円の中心としてメニューを表示します。 メニューのラベルや各メニューをクリックした時の動作（リンク先の指定など）を指定することができます。 メニューの数に応じて、円の直径が大きくなります。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery Flash Plugin | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.halocontext.js"></script> 
        <script type="text/javascript">
            $(function() {
                /* 例1 */
                $('#area1').haloContext({
                    bindings:{
                        "YAHOO! JAPAN":function(){window.confirm("YAHOO! JAPANを開きますか？")?location.href="http://www.yahoo.co.jp":""},
                        "google":function(){window.confirm("googleを開きますか？")?location.href="http://www.google.co.jp/":""},
                        "Live Search":function(){window.confirm("Live Searchを開きますか？")?location.href="http://www.live.com/?scope=web&mkt=ja-JP":""},
                    }
                });
                /* 例2 */
                $('#area2').haloContext({
                    bindings:{
                        "FC2ブログ":function(){alert('容量：1GB')},
                        "Seesaaブログ":function(){alert('記事投稿（テキスト容量）：無制限\nディスクスペース：2GBまで');},
                        "livedoor Blog":function(){alert('容量：2.1GB');},
                        "エキサイトブログ":function(){alert('1回の投稿につき500KBまで');},
                        "Ameba":function(){alert('ブログの記事数：無制限\n画像フォルダ容量：1GBまで')},
                        "yaplog!":function(){alert('記事数：10,000記事\n画像：1TB');},
                        "ココログ":function(){alert('最大容量：2GB\n1アップロード辺りの最大容量：1MB\n1日辺りの最大容量：40MB');},
                        "はてなダイアリー":function(){alert('1日の日記に登録できる最大文字数：半角で約6万5千文字、全角で約3万2千文字まで');},
                        "ウェブリブログ":function(){alert('容量：3GB\n最大アップロード容量：1ファイルあたり20MB、1日あたり20MBまで)')},
                        "gooブログ":function(){alert('容量：3GB');},
                    }
                });
            });
        </script>
        <style type="text/css">
            #area1{
                float:left;
                margin:0; padding:10px;
                width:30%; height:200px;
                background:#ff9966;
                color:#fff;
            }
            #area2{
                float:left;
                margin:0; padding:10px;
                width:30%; height:200px;
                background:#ff6699;
                color:#fff;
            }
            div.hct{
                background:transparent url("/content/img/ajax/greybutton.png") no-repeat 0 0;
                position:absolute;
                width:48px; height:34px;
                font-size:10px;
                text-align:center;
                margin:0; padding:14px 0 0 0;
                display:none;
                cursor:pointer;
            }    
            div.hct:hover{
                background:transparent url("/content/img/ajax/greyhighlight.png") no-repeat 0 0;
            }
            #hpt{
                position:absolute;
                width:10px; height:10px;
                display:none;
                background:000;
                opacity:0;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://jquery.lukelutman.com/plugins/flash/'>jQuery Flash Plugin</a> | 設置サンプル</h1>
            <p>▼下記の要素を右クリックすると、円形のメニューを表示します。</p>
<!-- CODE -->
            <div class="cf">
                <div id="area1">
                    <h2>例1</h2>
                    <p>右クリックしてください。</p>
                </div>
                <div id="area2">
                    <h2>例2</h2>
                    <p>右クリックしてください。</p>
                </div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

jContext 1.0 – The ultra-lightweight right click context menu for jQuery
半透明のコンテキストメニュー

2009/6/20

jContext 1.0 – The ultra-lightweight right click context menu for jQuery

MIT
jquery.js、jquery.jcontext.1.0.js

ブラウザのデフォルトの右クリックメニューを無効にして、半透明のコンテキストメニューを表示するjQueryプラグイン。

コンテキストメニューはリスト要素で指定し、そのリスト要素を含む親ブロックのid名をqueryに指定します。 opaciryには透明度を指定します。 

<span>Right Click me</span>
<div id='myMenu'>
    <ul>
        <li><a href='#'>Edit This Type</a></li>
        <li><a href='#'>Create New Type</a></li>
        <li><a href='#'>Book a Flight</a></li>
    </ul>
</div>
<script type='text/javascript'>
$(function() {
    $('span').showMenu({
        opacity:0.8,
        query: '#myMenu'
    });
});
</script>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jContext 1.0 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.jcontext.1.0.js"></script> 
        <script type="text/javascript">
            $(function() {
                /* 例1 */
                $("span").showMenu({
                    opacity:0.8,
                    query: "#myMenu"
                });
                /* 例2 */
                $("p").showMenu({
                    opacity:0.9,
                    query: "#myMenu2"
                });
            });
        </script>
        <style type="text/css">
            /* 例1 */
            #myMenu {
                background:#fff;
                border:1px solid #444;
                display:none;
                width:150px;
            }
            #myMenu ul {
                margin:0;padding:0;
                list-style:none;
            }
            #myMenu li {
                margin:0; padding:5px;
                border:1px solid #444;
                display:block;
            }
            #myMenu ul li:hover{
                background:#666;
                color:#fff;
            }
            #myMenu li:hover span,
            #myMenu li:hover a {
                color:#fff;
            }
            #myMenu a {
                color:#000;
                font-weight:bold;
                text-decoration:none;
            }
            /* 例2 */
            #myMenu2 {
                background:#600;
                border:1px solid #200;
                color:#FFF;
                display:none;
                width:150px;
            }
            #myMenu2 ul {
                margin:0;padding:0;
                list-style:none;
            }
            #myMenu2 li {
                margin:0;padding:5px;
                list-style:none;
                border:1px solid #200;
                display:block;
            }
            #myMenu2 li:hover {
                background:#c22;
                color:#fff;
            }
            #myMenu2 li:hover span,
            #myMenu2 li:hover a {
                color:#fff;
            }
            #myMenu2 a,
            #myMenu2 a:hover {
                color:#fff;
                font-weight:bold;
                text-decoration:underline;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.gimiti.com/kltan/wordpress/?p=23'>jContext 1.0 – The ultra-lightweight right click context menu for jQuery</a> | 設置サンプル</h1>
<!-- CODE -->
            <h2>例1</h2>
            <span>Right Click me</span>
            <div id="myMenu">
                <ul>
                    <li><a href="#">Edit This Type</a></li>
                    <li><a href="#">Create New Type</a></li>
                    <li><a href="#">Book a Flight</a></li>
                </ul>
            </div>

            <h2>例2</h2>
            <p>You can right Click me too </p>
            <div id="myMenu2">
                <ul>
                    <li><a href="#">Create New Class</a></li>
                    <li><a href="#">Delete Class</a></li>
                    <li><a href="#">Get a Job</a></li>
                </ul>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Context Menu Plugin
クロスブラウザ対応のコンテキストメニュー

2009/6/20

jQuery Context Menu Plugin

IE 6+、Firefox 2+、Safari 3、Chrome、Opera 9.5+
Creative Commons License and is copyrighted
jquery.js、jquery.contextMenu.js

クロスブラウザ対応のコンテキストメニューが簡単にｓ実装できるjQueryプラグイン。

コンテキストメニュー内の任意の項目やコンテキストメニューの有効化・無効化できるメソッドが用意されています。 見た目はCSSで自由に変えられます。 また、コールバック関数でカーソルの位置などを取得することも可能です。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery Context Menu Plugin | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.contextMenu.js"></script> 
        <script type="text/javascript">
            $(function() {
                // Show menu when #myDiv is clicked
                $("#myDiv").contextMenu({
                    menu: 'myMenu'
                },
                    function(action, el, pos) {
                    alert(
                        'Action: ' + action + '\n\n' +
                        'Element ID: ' + $(el).attr('id') + '\n\n' + 
                        'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
                        'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
                        );
                });
                // Show menu when a list item is clicked
                $("#myList UL LI").contextMenu({
                    menu: 'myMenu'
                }, function(action, el, pos) {
                    alert(
                        'Action: ' + action + '\n\n' +
                        'Element text: ' + $(el).text() + '\n\n' + 
                        'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
                        'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
                        );
                });
                // Disable menus
                $("#disableMenus").click( function() {
                    $('#myDiv, #myList UL LI').disableContextMenu();
                    $(this).attr('disabled', true);
                    $("#enableMenus").attr('disabled', false);
                });
                // Enable menus
                $("#enableMenus").click( function() {
                    $('#myDiv, #myList UL LI').enableContextMenu();
                    $(this).attr('disabled', true);
                    $("#disableMenus").attr('disabled', false);
                });
                // Disable cut/copy
                $("#disableItems").click( function() {
                    $('#myMenu').disableContextMenuItems('#cut,#copy');
                    $(this).attr('disabled', true);
                    $("#enableItems").attr('disabled', false);
                });
                // Enable cut/copy
                $("#enableItems").click( function() {
                    $('#myMenu').enableContextMenuItems('#cut,#copy');
                    $(this).attr('disabled', true);
                    $("#disableItems").attr('disabled', false);
                });
            });
        </script>
        <style type="text/css">
            #myDiv {
                width: 150px;
                border: solid 1px #2AA7DE;
                background: #6CC8EF;
                padding: 1em .5em;
                margin: 1em;
                float: left;
            }
            #myList {
                margin: 1em;
                float: left;
            }
            #myList UL {
                padding: 0px;
                margin: 0em 1em;
            }
            #myList LI {
                width: 100px;
                border: solid 1px #CCC;
                background: #EEE;
                padding: 2px 5px;
                margin: 2px 0px;
                list-style: none;
            }
            #options {
                clear: left;
            }
            #options INPUT {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 11px;
                width: 150px;
            }
            /* Generic context menu styles */
            .contextMenu {
                position: absolute;
                width: 120px;
                z-index: 99999;
                border: solid 1px #CCC;
                background: #EEE;
                padding: 0px;
                margin: 0px;
                display: none;
            }
            .contextMenu LI {
                list-style: none;
                padding: 0px;
                margin: 0px;
            }
            .contextMenu A {
                color: #333;
                text-decoration: none;
                display: block;
                line-height: 20px;
                height: 20px;
                background-position: 6px center;
                background-repeat: no-repeat;
                outline: none;
                padding: 1px 5px;
                padding-left: 28px;
            }
            .contextMenu LI.hover A {
                color: #FFF;
                background-color: #3399FF;
            }
            .contextMenu LI.disabled A {
                color: #AAA;
                cursor: default;
            }
            .contextMenu LI.hover.disabled A {
                background-color: transparent;
            }
            .contextMenu LI.separator {
                border-top: solid 1px #CCC;
            }
            /*
                Adding Icons
                
                You can add icons to the context menu by adding
                classes to the respective LI element(s)
            */
            .contextMenu LI.edit A { background-image: url(/content/img/icon/contextmenu/page_white_edit.png); }
            .contextMenu LI.cut A { background-image: url(/content/img/icon/contextmenu/cut.png); }
            .contextMenu LI.copy A { background-image: url(/content/img/icon/contextmenu/page_white_copy.png); }
            .contextMenu LI.paste A { background-image: url(/content/img/icon/contextmenu/page_white_paste.png); }
            .contextMenu LI.delete A { background-image: url(/content/img/icon/contextmenu/page_white_delete.png); }
            .contextMenu LI.quit A { background-image: url(/content/img/icon/contextmenu/door.png); }
        </style>
    </head>
    <body>
        <div id="wrap">
<h1><a href='http://www.trendskitchens.co.nz/jquery/contextmenu/'>ContextMenu plugin</a> | 設置サンプル</h1>
<!-- CODE -->
        <div id="myDiv">
            Right click for the standard context menu
        </div>
        
        <div id="myList">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
            </ul>
        </div>
        
        <div id="options">
            <p>
                <input type="button" id="disableItems" value="Disable Cut/Copy" />
                <input type="button" id="enableItems" value="Enable Cut/Copy" disabled="disabled" />
            </p>
            
            <p>
                <input type="button" id="disableMenus" value="Disable Context Menus" />
                <input type="button" id="enableMenus" value="Enable Context Menus" disabled="disabled" />
            </p>
        </div>
        
        <ul id="myMenu" class="contextMenu">
            <li class="edit"><a href="#edit">Edit</a></li>
            <li class="cut separator"><a href="#cut">Cut</a></li>
            <li class="copy"><a href="#copy">Copy</a></li>
            <li class="paste"><a href="#paste">Paste</a></li>
            <li class="delete"><a href="#delete">Delete</a></li>
            <li class="quit separator"><a href="#quit">Quit</a></li>
        </ul>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop