本文用到了jquery给标签动态添加样式变量的方法,特此标明!
(function ($) { var menu = {}; $.fn.contextMenu = function (id, list) { menu = { id: id, style: { ul: { listStyle: 'none', padding: '0px', margin: '0px', border: '1px solid #999', '100px', height: 'auto', position: 'relative', float: 'left', borderRadius: '5px' }, li: { display: 'block', cursor: 'point', padding: '3px', backgroundColor: '#eeeeee', '94px', height: '30px', float: 'left', borderTop: '1px solid #fff', borderBottom: '1px solid #ddd' }, lihover: { backgroundColor: '#b6bdd2' } } }; if (!menu.content) { menu.content = $('<div style="position:absolute;z-index:500;"><ul></ul></div>') .appendTo('body').on('click', function (e) { e.stopPropagation(); }); var ul = menu.content.find('ul') for (var i = 0; i < list.length; i++) { var m = list[i]; var li = $('<li>' + m.label + '</li>'); if (m.items && m.items.length > 0) { var cul = $('<ul></ul>'); for (var j = 0; j < m.items.length; j++) { var child = m.items[j]; cul.append('<li onclick="' + child.action + '">' + child.label + '</li>'); } li.append(cul.css(menu.style.ul)); } else { li.attr('onclick', m.action); } ul.append(li); } ul.css(menu.style.ul).find('li').css(menu.style.li).hover( function () { $(this).css(menu.style.lihover); }, function () { $(this).css(menu.style.li); } ).on('mouseenter', function () { var c = $(this).find("ul").css('margin-left', $(this).width() + 4).css('margin-top', -$(this).height() - 6); if (c && c.css('opacity') == 0) { c.animate({ "opacity": "0.75", "height": "auto !important", "min-height": c.height() }, "slow", function () { }) } }).on('mouseleave', function () { $(this).find("ul").animate({ "opacity": "0", "height": "0" }); }); } $(this).on('contextmenu', function (e) { menu.content.css({ 'left': e.pageX, 'top': e.pageY }).show(); $(document).one('click', function () { menu.content.hide(); }); return false; }); return this; }; })(jQuery); /* * 下面为使用方法 */ //用于绑定右键菜单的json格式数据 var contentMenuList = [{ label: 'BkColor', action: "menu_click(this,'Drag');", url: '' }, { label: 'Add', action: "menu_click(this,'Add');", url: '', items: [{ label: 'Image', action: "menu_click(this,'Image');", url: '' }, { label: 'Text', action: "menu_click(this,'Text');", url: '' }] }]; //将右键菜单数据绑定于页面上某个标签 $('.design_body').contextMenu('myMenu', contentMenuList);