JSFiddle - React, Tailwind, and code Playground

by Maksim Surguy

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="https://github.com/sydcanem/bootstrap-contextmenu">Context Menu Plugin Extension</a>
        </div>
      </div>
    </div>

    <div class="container">
        <div class="span7">

          <h1>Demo</h1>
          <p>Right click inside the box to trigger the menu</p>

          <!-- Element div that needs a custom context menu -->
          <div id="context" data-toggle="context" data-target="#context-menu" style="position:relative;height:300px;width:650px;border:1px solid #ddd">
          </div>

          <!-- Your custom menu with dropdown-menu as default styling -->
          <div id="context-menu">
              <ul class="dropdown-menu" role="menu">
                  <li><a tabindex="-1" href="#">Action</a></li>
                <li><a tabindex="-1" href="#">Another action</a></li>
                <li><a tabindex="-1" href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a tabindex="-1" href="#">Separated link</a></li>
              </ul>
          </div>

          <h2>Usage</h2>
          <h3>Via data attributes</h3>
          <p>Add <code>data-toggle="context"</code> to an element that needs a context menu.</p>
          <pre class="prettyprint linenums">
&lt;div id="context" data-toggle="context" data-target="#context-menu"&gt;
 ...

JavaScript

/*!
 * Bootstrap Context Menu
 * Version: 1.0
 * A small variation of the dropdown plugin by @sydcanem
 * https://github.com/sydcanem/bootstrap-contextmenu
 *
 * Twitter Bootstrap (http://twitter.github.com/bootstrap).
 */

/* =========================================================
 * bootstrap-dropdown.js
 * http://twitter.github.com/bootstrap/
 * =========================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================= */

!(function($) {

  "use strict"; // jshint ;_;

  /* CONTEXTMENU CLASS DEFINITION
   * ============================ */

  var toggle = '[data-toggle=context]'
    , ContextMenu = function (element) {
      var $el = $(element).on('contextmenu.context.data-api', this.toggle);
          $('html').on('click.context.data-api', function () {
              $el.find('#context-menu').removeClass('open');
          });
      }

  ContextMenu.prototype = {

    constructor: ContextMenu
    ,toggle: function(e) {

      var $this = $(this)
        , $menu
        , $contextmenu;

      if ($this.is('.disabled, :disabled')) return;

      $menu = getMenu($this);
      $menu.removeClass('open');

      $contextmenu = $this.find('#context-menu');

      if (!$contextmenu.length) {
        var tp = getPosition(e, $this, $menu);
        $menu.attr('style', '')
              .css(tp)
              .addClass('open');
       ...