akiyoshi83
3/6/2015 - 1:35 AM

context menu jquery plugin.

context menu jquery plugin.

jquery.context-menu.js
content_copyfile_download
(function($) {
  'use strict';

  var contextMenu = function(opt) {
    var $self = this;
    var view = opt["view"] || '';
    var events = opt["events"] || {};
    var selector,
        event;

    if(!view.jquery) {
      view = $(view);
    }

    for(selector in events) {
      (function() {
        var action = events[selector];
        view.find(selector).on('click', function(ev) {
          // TODO:前処理
          action();
          // TODO:後処理
        });
      }());
    }

    function closeMenu(ev) {
      if($self.is(ev.target)) {
        return;
      }
      view.css({
        display: 'none'
      });
      $('body').off('click', '*', closeMenu);
    }

    function openMenu(ev) {
      var x = ev.pageX;
      var y = ev.pageY;
      var w = view.width();
      var h = view.height();
      var browserW = window.innerWidth;
      var browserH = window.innerHeight;
      var edgeX = x + w;
      var edgeY = y + h;
      var posX = (browserW > edgeX) ? x : (x - w);
      var posY = (browserH > edgeY) ? y : (y - h);

      view.css({
        position: 'absolute',
        top: posY,
        left: posX
      });
      view.show();
      $('body').on('click', '*', closeMenu);
    };

    // TODO:close button
    // TODO:drag header

    // bind
    $self.on('click', openMenu);
  };

  $.fn.extend({
    contextMenu: contextMenu
  });

}(jQuery));
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jquery-context-menu demo</title>
    <style>
      .boxes {
        overflow: hidden;
      }
      .box {
        width:  80px;
        height: 80px;
        border: 1px solid #ccc;
      }
      .box.left {
        float:  left;
      }
      .box.right {
        float:  right;
      }
      .menu {
        font-size: 14px;
        background: #ccc;
        margin: 0;
        padding: 0;
      }
      .menu h1 {
        font-size: 14px;
        font-weight: normal;
        margin: 0;
        padding: 0;
      }
      .menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .menu ul li {
        margin: 0;
        padding: 4px;
        border: 1px solid black;
        border-bottom: none;
      }
      .menu ul li:last-child {
        border-bottom: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="boxes">
      <div class="box click left">
        left click
      </div>
      <div class="box click right">
        right click
      </div>
    </div>
    <aside id="context-menu1" class="menu" style="display:none;">
      <h1>left menu<span class="close">X</span></h1>
      <ul>
        <li class="menu console">menu console by left</li>
        <li class="menu alert">menu alert by left</li>
      </ul>
    </aside>
    <aside id="context-menu2" class="menu" style="display:none;">
      <h1>right menu<span class="close">X</span></h1>
      <ul>
        <li class="menu console">menu console by right</li>
        <li class="menu alert">menu alert by right</li>
      </ul>
    </aside>

    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../jquery.context-menu.js" type="text/javascript"></script>
    <script type="text/javascript">
      $('.box.click.left').contextMenu({
        view: '#context-menu1',
        events: {
          ".menu.console": function() { console.log("menu console by left"); },
          ".menu.alert": function() { alert("menu alert by left"); }
        }
      });
      $('.box.click.right').contextMenu({
        view: '#context-menu2',
        events: {
          ".menu.console": function() { console.log("menu console by right"); },
          ".menu.alert": function() { alert("menu alert by right"); }
        }
      });
    </script>
  </body>
</html>