PHP & JavaScript Room :: 設置サンプル

実行結果

ContextMenu plugin | 設置サンプル

基本的な例

RIGHT CLICK FOR DEMO THIS WORKS TOO

基本的な装飾

Right clicking anywhere in this paragraph will trigger the context menu.

コールバック使用

Don't show menu Just first item Show all

設置サンプルのソース

<!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>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <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>