KendoUI Styled context menu

This simple context menu uses the KendoUI Stylesheet for it's look and feel.

by devangkantharia

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<p>A simple KendoUI compatible context menu<br><br></p>

<span id="mySpan" class="menu">Click here</span>
<div id="myButton" class="k-button menu">or here</div><br><br><br>

or on any grid cell
<div id="myGrid"></div>

<ul id="testMenu">
    <li value=1>
        <img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Edit-icon.png" />
        Test 1
    </li>
    <li value=2>
        <img src="http://www.iconeasy.com/icon/png/System/Sticker%20Pack%202/Text%20Edit.png" />
        Test 2
    </li>
    <li value=3>
        <img src="http://www.iconeasy.com/icon/png/System/Sticker%20Pack%202/Text%20Edit.png" />
        Test 3
    </li>
</ul>

CSS

.k-context-menu ul li img {
    max-height: 16px;
    max-width: 16px;
    margin: 0px 7px 0px 0px;
}

JavaScript

// Right Click
// This code belongs in a reusable .js file
var my = {};

my.contextMenu = function (options) {
    if (!options) { alert('You have not specified any options!'); return; }
    if (!options.trigger) { alert('You must supply a trigger element selector!'); return; }
    if (!options.menu) { alert('You must specify a menu element selector!'); return; }
    if (!options.callback) { alert('You must specify a callback function!'); return; }
    options.rightButton = options.rightButton || true;
    options.zindex = options.zindex || 999000;

    var menu = $(options.menu);
    if (!menu.parent().hasClass('k-context-menu')) menu.wrap(document.createElement('div'));
    menu = menu.parent().addClass('k-context-menu').hide();

    var panel = $('#ctxMenuPanel');
    if (!panel[0]) panel = $(document.createElement('div')).attr('id', 'ctxMenuPanel');

    menu.visible = false;
    menu.addClass('k-calendar-container k-popup k-group k-reset');
    menu.css({ position: 'absolute', 'background-color': 'white', display: 'none', 'z-index': options.zindex + 1, padding: 0 });

    menu.close = function () { menu.fadeOut('fast'); panel.hide(); menu.visible = false; };
    menu.show = function () {
        if (menu.visible) {
            menu.close();
        } else {
            var pos = $(this).offset(); pos.top += 10; pos.left += 15;
            panel.css({ top: 0, left: 0, width: '100%', height: $(document).height(), 'background-color': 'transparent' }).show();
            menu.data('trigger', $(this));
            menu.css(pos).fadeIn('fast');
            menu.visible = true;
        }
        return false;
    };

    panel.css({ position: 'absolute', display: 'none', 'z-index': options.zindex });
    panel.appendTo('html').click(menu.close);

    var list = menu.find('ul').css({ 'list-style-type': 'none', padding: 0, margin: 0 });
    list.find('li').click(function () {
        menu.close();
        options.callback($(this), menu.data('trigger'));
   ...