KendoUI Styled context menu
This simple context menu uses the KendoUI Stylesheet for it's look and feel.
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>
<div class="iframeHeaderLinks">
Placeholder | Save Criteria | Placeholder | Placeholder | Placeholder
</div>
<div class="iframeContent">
<div class="iframeInnerContentLeft">
<div class="QueryReportSplitter">
<div class="QueryPanel">
<div class="contentHeader">
<div class="contentHeaderInnerLeft">
<div id="QueryTitle" class="contentHeaderTitleStatic">
Item Query
</div>
</div>
<div class="contentHeaderInnerRight">
<div class="QueryContextMenu">
<span id="mySpan" class="menu">Query Menu</span>
<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>
</div>
</div>
</div>
<div class="innerContentBodyContainer">
<div class="SavedQueries"></div>
<div class="QueryPanelColumns"></div>
</div>
</div>
<div class="ReportPanel">
<div class="midContentHeader">
<div class="contentHeaderInnerLeft">
<div id="ReportTitle" class="contentHeaderTitleStatic">
Item...
CSS
.k-context-menu ul li img {
max-height: 16px;
max-width: 16px;
margin: 0px 7px 0px 0px;
}
JavaScript
// 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':...