JSFiddle - React, Tailwind, and code Playground
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="#table-context-menu" contenteditable="true">
<table border="1" contenteditable="false">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<!-- Your custom menu ith dropdown-menu as default styling -->
<div id="table-context-menu" z-index="15000">
<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><a>Align Left <i class="icon-align-left" style="margin-left:20px;margin-right:10px"></i></a>
</li>
<li><a>Align Center <i class="icon-align-center" style="margin-right:10px"></i></a>
</li>
<li><a>Align Right <i class="icon-align-right" style="margin-left:10px;margin-right:10px;"></i></a>
</li>
</ul>
...
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 (event) {
$el.find('#context-menu').removeClass('open');
});
}
function tableFontSize(target,value){
}
ContextMenu.prototype = {
constructor: ContextMenu,
toggle: function (e) {
$(e.target).parents().blur();
console.log($(e.target).parents().find("font"));
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(),
...