JSFiddle - React, Tailwind, and code Playground

by toby3105

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="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>Font size:
                    <select name="fonst-size" style="width:85px; margin-top:5px;height:28px;">
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                    </select>
                </li>
                <li>Is Table<input type="checkbox" style="margin-top:5px; margin-right:5px;" class="pull-right"/></li>
                <li>Is Equation<input type="checkbox" style="margin-top:5px; margin-right:5px;" class="pull-right"/></li>
         
                <li class="divider"></li>
                <li><a tabindex="-1" href="#">Separated link</a>
                </li>
            </ul>
        </div>

CSS

.dropdown-menu li{
    margin-left:5px;
}

JavaScript

!(function ($) {
    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');
                $this.append($menu);
            } else {
                var tp = getPosition(e, $this, $menu);
                $menu.attr('style', '')
                    .css(tp)
                    .toggleClass('open');
            }

            return false;
        }

    }

    function getMenu($this) {
        var selector = $this.attr('data-target'),
            $menu;

        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
        }

        $menu = $(selector);

        return $menu;
    }

    function getPosition(e, $this, $menu) {
        var mouseX = e.pageX,
            mouseY = e.pageY,
            posX = e.pageX - $this[0].offsetLeft,
            posY = e.pageY - $this[0].offsetTop,
            contextX = $this.width(),
            contextY = $this.height(),
            boundsX = $(window).width(),
            boundsY = $(window).height(),
            menuWidth = $menu.find('.dropdown-menu').outerWidth(),
            menuHeight =...