end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

jQueryで右クリックによるコンテキストメニュー表示 - jQuery-chromeContext ( javascript )

イベントは jQuery.on() で設定することで、後から追加されたelementにも対応できますし、本体である jquery.chromeContext.js は、数10行の小規模で、後から改造するにしても楽ですので。

jQuery-chromeContext で十分かと思います。

http://travishorn.github.io/jquery-chromeContext/

以下、jquery-chromeContext のデモにあるsrc

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>chromeContext Menu</title>
    
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
    <link rel="stylesheet" href="css/demo.css">
    <link rel="stylesheet" href="../lib/css/chromeContext.css">
  </head>
  <body>
    <div id="one" class="box">one</div>
    <div id="two" class="box">two</div>
    
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../lib/js/jquery.chromeContext.js"></script>
    <script src="js/demo.js"></script>
  </body>
</html>

jquery.chromeContext.js (本体)

(function ($) {
  var cctxId = 0;
  
  $.fn.chromeContext = function (options) {
    var trigger = this;
    var menu = $('<div class="cctx"/>');
    var l = options.items.length;
    var i;
    
    for (i = 0; i < l; i++) {
      var item = options.items[i];
      var el = $('<div/>');
      
      if (item.separator) {
        el.addClass('cctx-separator');
      } else {
        el.addClass('cctx-item');
        el.text(item.title);
        el.on('click', item.onclick);
      }
      
      menu.append(el);
    }
    
    menu.attr('data-cctxId', cctxId);
    
    $('body').append(menu);
    
    this
      .attr('data-cctxId', cctxId)
      .on('contextmenu', function (e) {
        var menu = $('.cctx[data-cctxId="'+ $(this).attr('data-cctxId') +'"]');
        
        e.preventDefault();
                
        menu
          .css('top', e.clientY)
          .css('left', e.clientX)
          .show();
      })
      .parents()
        .on('mouseup', function () {
          $('.cctx:visible').hide();
        });
    
    cctxId++;
    return this;
  };
}( jQuery ));

demo.js

$(function(){
  $('#one').chromeContext({
    items: [
      { title: 'Hello',
        onclick: function () { console.log('hello.'); } },
      { separator: true },
      { title: 'World',
        onclick: function () { console.log('world.'); } }
    ]
  });
  
  $('#two').chromeContext({
    items: [
      { title: 'Item 1',
        onclick: function () { console.log('one.'); } },
      { title: 'Item 2',
        onclick: function () { console.log('two.'); } },
      { title: 'Item 3',
        onclick: function () { console.log('three.'); } },
      { title: 'Item 4',
        onclick: function () { console.log('four.'); } },
      { title: 'Item 5',
        onclick: function () { console.log('five.'); } },
      { title: 'Item 6',
        onclick: function () { console.log('six.'); }
      }
    ]
  });
});

css

body {
  padding: 50px;
}

.box {
  width: 200px;
  height: 200px;
  float: left;
  margin: 20px;
  padding: 5px 10px;
  font-size: 30px;
  font-weight: bold;
  color: #FFF;
  text-shadow: 1px 1px 2px #555;
}

#one { background-color: #FF8080; }
#two { background-color: #84FF84; }