[Tutorial] Context menu para ações nos tópicos

Neste tutorial, podemos criar um context menu para ações no tópico. Uma ferramenta que permitirá usar funções rapidamente nos tópicos. Editando, citando, excluindo mensagens e tópicos.

--> Tutoriais, dicas e astúcias <--
Context menu para ações nos tópicos

1º - Conhecendo o código JS:

Código:

(function(e,n){function C(a){a=a.split(/\s+/);for(var b=[],c=0,d;d=a[c];c++)d=d[0].toUpperCase(),b.push(d);return b}function s(a){return a.id&&e('label[for="'+a.id+'"]').val()||a.name}function A(a,b,c){c||(c=0);b.each(function(){var b=e(this),g=this,k=this.nodeName.toLowerCase(),h,f;"label"==k&&b.find("input, textarea, select").length&&(h=b.text(),b=b.children().first(),g=b.get(0),k=g.nodeName.toLowerCase());switch(k){case "menu":f={name:b.attr("label"),items:{}};c=A(f.items,b.children(),c);break;
case "a":case "button":f={name:b.text(),disabled:!!b.attr("disabled"),callback:function(){return function(){b.click()}}()};break;case "menuitem":case "command":switch(b.attr("type")){case n:case "command":case "menuitem":f={name:b.attr("label"),disabled:!!b.attr("disabled"),callback:function(){return function(){b.click()}}()};break;case "checkbox":f={type:"checkbox",disabled:!!b.attr("disabled"),name:b.attr("label"),selected:!!b.attr("checked")};break;case "radio":f={type:"radio",disabled:!!b.attr("disabled"),
name:b.attr("label"),radio:b.attr("radiogroup"),value:b.attr("id"),selected:!!b.attr("checked")};break;default:f=n}break;case "hr":f="-------";break;case "input":switch(b.attr("type")){case "text":f={type:"text",name:h||s(g),disabled:!!b.attr("disabled"),value:b.val()};break;case "checkbox":f={type:"checkbox",name:h||s(g),disabled:!!b.attr("disabled"),selected:!!b.attr("checked")};break;case "radio":f={type:"radio",name:h||s(g),disabled:!!b.attr("disabled"),radio:!!b.attr("name"),value:b.val(),selected:!!b.attr("checked")};
break;default:f=n}break;case "select":f={type:"select",name:h||s(g),disabled:!!b.attr("disabled"),selected:b.val(),options:{}};b.children().each(function(){f.options[this.value]=e(this).text()});break;case "textarea":f={type:"textarea",name:h||s(g),disabled:!!b.attr("disabled"),value:b.val()};break;case "label":break;default:f={type:"html",html:b.clone(!0)}}f&&(c++,a["key"+c]=f)});return c}e.support.htmlMenuitem="HTMLMenuItemElement"in window;e.support.htmlCommand="HTMLCommandElement"in window;e.support.eventSelectstart=
"onselectstart"in document.documentElement;if(!e.ui||!e.ui.widget){var D=e.cleanData;e.cleanData=function(a){for(var b=0,c;null!=(c=a[b]);b++)try{e(c).triggerHandler("remove")}catch(d){}D(a)}}var l=null,u=!1,q=e(window),v=0,r={},m={},w={},x={selector:null,appendTo:null,trigger:"right",autoHide:!1,delay:200,reposition:!0,determinePosition:function(a){if(e.ui&&e.ui.position)a.css("display","block").position({my:"center top",at:"center bottom",of:this,offset:"0 5",collision:"fit"}).css("display","none");
else{var b=this.offset();b.top+=this.outerHeight();b.left+=this.outerWidth()/2-a.outerWidth()/2;a.css(b)}},position:function(a,b,c){if(b||c){b="maintain"===b&&"maintain"===c?a.$menu.position():{top:c,left:b};c=q.scrollTop()+q.height();var d=q.scrollLeft()+q.width(),e=a.$menu.height(),f=a.$menu.width();b.top+e>c&&(b.top-=e);b.left+f>d&&(b.left-=f);a.$menu.css(b)}else a.determinePosition.call(this,a.$menu)},positionSubmenu:function(a){if(e.ui&&e.ui.position)a.css("display","block").position({my:"left top",
at:"right top",of:this,collision:"flipfit fit"}).css("display","");else{var b={top:0,left:this.outerWidth()};a.css(b)}},zIndex:1,animation:{duration:50,show:"slideDown",hide:"slideUp"},events:{show:e.noop,hide:e.noop},callback:null,items:{}},t=null,y=null,z=null,B,E=function(a){for(var b=0;b=Math.max(b,parseInt(a.css("z-index"),10)||0),a=a.parent(),a&&a.length&&!(-1<"html body".indexOf(a.prop("nodeName").toLowerCase())););return b},f={abortevent:function(a){a.preventDefault();a.stopImmediatePropagation()},
contextmenu:function(a){var b=e(this);a.preventDefault();a.stopImmediatePropagation();if(!("right"!=a.data.trigger&&a.originalEvent||b.hasClass("context-menu-active")||b.hasClass("context-menu-disabled"))){l=b;if(a.data.build){var c=a.data.build(l,a);if(!1===c)return;a.data=e.extend(!0,{},x,a.data,c||{});if(!a.data.items||e.isEmptyObject(a.data.items))throw window.console&&(console.error||console.log)("No items specified to show in contextMenu"),Error("No Items sepcified");a.data.$trigger=l;p.create(a.data)}p.show.call(b,
a.data,a.pageX,a.pageY)}},click:function(a){a.preventDefault();a.stopImmediatePropagation();e(this).trigger(e.Event("contextmenu",{data:a.data,pageX:a.pageX,pageY:a.pageY}))},mousedown:function(a){var b=e(this);l&&l.length&&!l.is(b)&&l.data("contextMenu").$menu.trigger("contextmenu:hide");2==a.button&&(l=b.data("contextMenuActive",!0))},mouseup:function(a){var b=e(this);b.data("contextMenuActive")&&l&&l.length&&l.is(b)&&!b.hasClass("context-menu-disabled")&&(a.preventDefault(),a.stopImmediatePropagation(),
l=b,b.trigger(e.Event("contextmenu",{data:a.data,pageX:a.pageX,pageY:a.pageY})));b.removeData("contextMenuActive")},mouseenter:function(a){var b=e(this),c=e(a.relatedTarget),d=e(document);c.is(".context-menu-list")||c.closest(".context-menu-list").length||l&&l.length||(y=a.pageX,z=a.pageY,B=a.data,d.on("mousemove.contextMenuShow",f.mousemove),t=setTimeout(function(){t=null;d.off("mousemove.contextMenuShow");l=b;b.trigger(e.Event("contextmenu",{data:B,pageX:y,pageY:z}))},a.data.delay))},mousemove:function(a){y=
a.pageX;z=a.pageY},mouseleave:function(a){a=e(a.relatedTarget);if(!a.is(".context-menu-list")&&!a.closest(".context-menu-list").length){try{clearTimeout(t)}catch(b){}t=null}},layerClick:function(a){var b=e(this).data("contextMenuRoot"),c=a.button,d=a.pageX,g=a.pageY,f,h;a.preventDefault();a.stopImmediatePropagation();setTimeout(function(){var l,m="left"==b.trigger&&0===c||"right"==b.trigger&&2===c;document.elementFromPoint&&(b.$layer.hide(),f=document.elementFromPoint(d-q.scrollLeft(),g-q.scrollTop()),
b.$layer.show());if(b.reposition&&m)if(document.elementFromPoint){if(b.$trigger.is(f)||b.$trigger.has(f).length){b.position.call(b.$trigger,b,d,g);return}}else if(h=b.$trigger.offset(),l=e(window),h.top+=l.scrollTop(),h.top<=a.pageY&&(h.left+=l.scrollLeft(),h.left<=a.pageX&&(h.bottom=h.top+b.$trigger.outerHeight(),h.bottom>=a.pageY&&(h.right=h.left+b.$trigger.outerWidth(),h.right>=a.pageX)))){b.position.call(b.$trigger,b,d,g);return}if(f&&m)b.$trigger.one("contextmenu:hidden",function(){e(f).contextMenu({x:d,
y:g})});b.$menu.trigger("contextmenu:hide")},50)},keyStop:function(a,b){b.isInput||a.preventDefault();a.stopPropagation()},key:function(a){var b=l.data("contextMenu")||{};switch(a.keyCode){case 9:case 38:if(f.keyStop(a,b),b.isInput){if(9==a.keyCode&&a.shiftKey){a.preventDefault();b.$selected&&b.$selected.find("input, textarea, select").blur();b.$menu.trigger("prevcommand");return}if(38==a.keyCode&&"checkbox"==b.$selected.find("input, textarea, select").prop("type")){a.preventDefault();return}}else if(9!=
a.keyCode||a.shiftKey){b.$menu.trigger("prevcommand");return}case 40:f.keyStop(a,b);if(b.isInput){if(9==a.keyCode){a.preventDefault();b.$selected&&b.$selected.find("input, textarea, select").blur();b.$menu.trigger("nextcommand");return}if(40==a.keyCode&&"checkbox"==b.$selected.find("input, textarea, select").prop("type")){a.preventDefault();return}}else{b.$menu.trigger("nextcommand");return}break;case 37:f.keyStop(a,b);if(b.isInput||!b.$selected||!b.$selected.length)break;if(!b.$selected.parent().hasClass("context-menu-root")){a=
b.$selected.parent().parent();b.$selected.trigger("contextmenu:blur");b.$selected=a;return}break;case 39:f.keyStop(a,b);if(b.isInput||!b.$selected||!b.$selected.length)break;var c=b.$selected.data("contextMenu")||{};if(c.$menu&&b.$selected.hasClass("context-menu-submenu")){b.$selected=null;c.$selected=null;c.$menu.trigger("nextcommand");return}break;case 35:case 36:b.$selected&&b.$selected.find("input, textarea, select").length||((b.$selected&&b.$selected.parent()||b.$menu).children(":not(.disabled, .not-selectable)")[36==
a.keyCode?"first":"last"]().trigger("contextmenu:focus"),a.preventDefault());return;case 13:f.keyStop(a,b);if(b.isInput){if(b.$selected&&!b.$selected.is("textarea, select")){a.preventDefault();return}break}b.$selected&&b.$selected.trigger("mouseup");return;case 32:case 33:case 34:f.keyStop(a,b);return;case 27:f.keyStop(a,b);b.$menu.trigger("contextmenu:hide");return;default:if(c=String.fromCharCode(a.keyCode).toUpperCase(),b.accesskeys[c]){b.accesskeys[c].$node.trigger(b.accesskeys[c].$menu?"contextmenu:focus":
"mouseup");return}}a.stopPropagation();b.$selected&&b.$selected.trigger(a)},prevItem:function(a){a.stopPropagation();var b=e(this).data("contextMenu")||{};if(b.$selected){var c=b.$selected,b=b.$selected.parent().data("contextMenu")||{};b.$selected=c}for(var c=b.$menu.children(),d=b.$selected&&b.$selected.prev().length?b.$selected.prev():c.last(),g=d;d.hasClass("disabled")||d.hasClass("not-selectable");)if(d=d.prev().length?d.prev():c.last(),d.is(g))return;b.$selected&&f.itemMouseleave.call(b.$selected.get(0),
a);f.itemMouseenter.call(d.get(0),a);a=d.find("input, textarea, select");a.length&&a.focus()},nextItem:function(a){a.stopPropagation();var b=e(this).data("contextMenu")||{};if(b.$selected){var c=b.$selected,b=b.$selected.parent().data("contextMenu")||{};b.$selected=c}for(var c=b.$menu.children(),d=b.$selected&&b.$selected.next().length?b.$selected.next():c.first(),g=d;d.hasClass("disabled")||d.hasClass("not-selectable");)if(d=d.next().length?d.next():c.first(),d.is(g))return;b.$selected&&f.itemMouseleave.call(b.$selected.get(0),
a);f.itemMouseenter.call(d.get(0),a);a=d.find("input, textarea, select");a.length&&a.focus()},focusInput:function(a){a=e(this).closest(".context-menu-item");var b=a.data(),c=b.contextMenu,b=b.contextMenuRoot;b.$selected=c.$selected=a;b.isInput=c.isInput=!0},blurInput:function(a){a=e(this).closest(".context-menu-item").data();a.contextMenuRoot.isInput=a.contextMenu.isInput=!1},menuMouseenter:function(a){e(this).data().contextMenuRoot.hovering=!0},menuMouseleave:function(a){var b=e(this).data().contextMenuRoot;
b.$layer&&b.$layer.is(a.relatedTarget)&&(b.hovering=!1)},itemMouseenter:function(a){var b=e(this),c=b.data(),d=c.contextMenu,c=c.contextMenuRoot;c.hovering=!0;a&&c.$layer&&c.$layer.is(a.relatedTarget)&&(a.preventDefault(),a.stopImmediatePropagation());(d.$menu?d:c).$menu.children(".hover").trigger("contextmenu:blur");b.hasClass("disabled")||b.hasClass("not-selectable")?d.$selected=null:b.trigger("contextmenu:focus")},itemMouseleave:function(a){var b=e(this),c=b.data(),d=c.contextMenu,c=c.contextMenuRoot;
c!==d&&c.$layer&&c.$layer.is(a.relatedTarget)?(c.$selected&&c.$selected.trigger("contextmenu:blur"),a.preventDefault(),a.stopImmediatePropagation(),c.$selected=d.$selected=d.$node):b.trigger("contextmenu:blur")},itemClick:function(a){var b=e(this),c=b.data(),d=c.contextMenuRoot,f=c.contextMenuKey;if(c.contextMenu.items[f]&&!b.is(".disabled, .context-menu-submenu, .context-menu-separator, .not-selectable")){a.preventDefault();a.stopImmediatePropagation();if(e.isFunction(d.callbacks[f])&&Object.prototype.hasOwnProperty.call(d.callbacks,
f))a=d.callbacks[f];else if(e.isFunction(d.callback))a=d.callback;else return;!1!==a.call(d.$trigger,f,d)?d.$menu.trigger("contextmenu:hide"):d.$menu.parent().length&&p.update.call(d.$trigger,d)}},inputClick:function(a){a.stopImmediatePropagation()},hideMenu:function(a,b){var c=e(this).data("contextMenuRoot");p.hide.call(c.$trigger,c,b&&b.force)},focusItem:function(a){a.stopPropagation();a=e(this);var b=a.data(),c=b.contextMenu,b=b.contextMenuRoot;a.addClass("hover").siblings(".hover").trigger("contextmenu:blur");
c.$selected=b.$selected=a;c.$node&&b.positionSubmenu.call(c.$node,c.$menu)},blurItem:function(a){a.stopPropagation();a=e(this);var b=a.data().contextMenu;a.removeClass("hover");b.$selected=null}},p={show:function(a,b,c){var d=e(this),g={};e("#context-menu-layer").trigger("mousedown");a.$trigger=d;if(!1===a.events.show.call(d,a))l=null;else if(p.update.call(d,a),a.position.call(d,a,b,c),a.zIndex&&(g.zIndex=E(d)+a.zIndex),p.layer.call(a.$menu,a,g.zIndex),a.$menu.find("ul").css("zIndex",g.zIndex+1),
a.$menu.css(g)[a.animation.show](a.animation.duration,function(){d.trigger("contextmenu:visible")}),d.data("contextMenu",a).addClass("context-menu-active"),e(document).off("keydown.contextMenu").on("keydown.contextMenu",f.key),a.autoHide)e(document).on("mousemove.contextMenuAutoHide",function(b){var c=d.offset();c.right=c.left+d.outerWidth();c.bottom=c.top+d.outerHeight();!a.$layer||a.hovering||b.pageX>=c.left&&b.pageX<=c.right&&b.pageY>=c.top&&b.pageY<=c.bottom||a.$menu.trigger("contextmenu:hide")})},
hide:function(a,b){var c=e(this);a||(a=c.data("contextMenu")||{});if(b||!a.events||!1!==a.events.hide.call(c,a)){c.removeData("contextMenu").removeClass("context-menu-active");if(a.$layer){setTimeout(function(a){return function(){a.remove()}}(a.$layer),10);try{delete a.$layer}catch(d){a.$layer=null}}l=null;a.$menu.find(".hover").trigger("contextmenu:blur");a.$selected=null;e(document).off(".contextMenuAutoHide").off("keydown.contextMenu");a.$menu&&a.$menu[a.animation.hide](a.animation.duration,function(){a.build&&
(a.$menu.remove(),e.each(a,function(b,c){switch(b){case "ns":case "selector":case "build":case "trigger":return!0;default:a[b]=n;try{delete a[b]}catch(d){}return!0}}));setTimeout(function(){c.trigger("contextmenu:hidden")},10)})}},create:function(a,b){b===n&&(b=a);a.$menu=e('<ul class="context-menu-list"></ul>').addClass(a.className||"").data({contextMenu:a,contextMenuRoot:b});e.each(["callbacks","commands","inputs"],function(c,d){a[d]={};b[d]||(b[d]={})});b.accesskeys||(b.accesskeys={});e.each(a.items,
function(c,d){var g=e('<li class="context-menu-item"></li>').addClass(d.className||""),k=null,h=null;g.on("click",e.noop);d.$node=g.data({contextMenu:a,contextMenuRoot:b,contextMenuKey:c});if(d.accesskey)for(var l=C(d.accesskey),m=0,n;n=l[m];m++)if(!b.accesskeys[n]){b.accesskeys[n]=d;d._name=d.name.replace(RegExp("("+n+")","i"),'<span class="context-menu-accesskey">$1</span>');break}if("string"==typeof d)g.addClass("context-menu-separator not-selectable");else if(d.type&&w[d.type])w[d.type].call(g,
d,a,b),e.each([a,b],function(a,b){b.commands[c]=d;e.isFunction(d.callback)&&(b.callbacks[c]=d.callback)});else{"html"==d.type?g.addClass("context-menu-html not-selectable"):d.type?(k=e("<label></label>").appendTo(g),e("<span></span>").html(d._name||d.name).appendTo(k),g.addClass("context-menu-input"),a.hasTypes=!0,e.each([a,b],function(a,b){b.commands[c]=d;b.inputs[c]=d})):d.items&&(d.type="sub");switch(d.type){case "text":h=e('<input type="text" value="1" name="" value="">').attr("name","context-menu-input-"+
c).val(d.value||"").appendTo(k);break;case "textarea":h=e('<textarea name=""></textarea>').attr("name","context-menu-input-"+c).val(d.value||"").appendTo(k);d.height&&h.height(d.height);break;case "checkbox":h=e('<input type="checkbox" value="1" name="" value="">').attr("name","context-menu-input-"+c).val(d.value||"").prop("checked",!!d.selected).prependTo(k);break;case "radio":h=e('<input type="radio" value="1" name="" value="">').attr("name","context-menu-input-"+d.radio).val(d.value||"").prop("checked",
!!d.selected).prependTo(k);break;case "select":h=e('<select name="">').attr("name","context-menu-input-"+c).appendTo(k);d.options&&(e.each(d.options,function(a,b){e("<option></option>").val(a).text(b).appendTo(h)}),h.val(d.selected));break;case "sub":e("<span></span>").html(d._name||d.name).appendTo(g);d.appendTo=d.$node;p.create(d,b);g.data("contextMenu",d).addClass("context-menu-submenu");d.callback=null;break;case "html":e(d.html).appendTo(g);break;default:e.each([a,b],function(a,b){b.commands[c]=
d;e.isFunction(d.callback)&&(b.callbacks[c]=d.callback)}),e("<span></span>").html(d._name||d.name||"").appendTo(g)}if(d.type&&"sub"!=d.type&&"html"!=d.type&&(h.on("focus",f.focusInput).on("blur",f.blurInput),d.events))h.on(d.events,a);d.icon&&g.addClass("icon icon-"+d.icon)}d.$input=h;d.$label=k;g.appendTo(a.$menu);if(!a.hasTypes&&e.support.eventSelectstart)g.on("selectstart.disableTextSelect",f.abortevent)});a.$node||a.$menu.css("display","none").addClass("context-menu-root");a.$menu.appendTo(a.appendTo||
document.body)},resize:function(a,b){a.css({position:"absolute",display:"block"});a.data("width",Math.ceil(a.width())+1);a.css({position:"static",minWidth:"0px",maxWidth:"100000px"});a.find("> li > ul").each(function(){p.resize(e(this),!0)});b||a.find("ul").andSelf().css({position:"",display:"",minWidth:"",maxWidth:""}).width(function(){return e(this).data("width")})},update:function(a,b){var c=this;b===n&&(b=a,p.resize(a.$menu));a.$menu.children().each(function(){var d=e(this),f=d.data("contextMenuKey"),
k=a.items[f],f=e.isFunction(k.disabled)&&k.disabled.call(c,f,b)||!0===k.disabled;d[f?"addClass":"removeClass"]("disabled");if(k.type)switch(d.find("input, select, textarea").prop("disabled",f),k.type){case "text":case "textarea":k.$input.val(k.value||"");break;case "checkbox":case "radio":k.$input.val(k.value||"").prop("checked",!!k.selected);break;case "select":k.$input.val(k.selected||"")}k.$menu&&p.update.call(c,k,b)})},layer:function(a,b){var c=a.$layer=e('<div id="context-menu-layer" style="position:fixed; z-index:'+
b+'; top:0; left:0; opacity: 0; filter: alpha(opacity=0); background-color: #000;"></div>').css({height:q.height(),width:q.width(),display:"block"}).data("contextMenuRoot",a).insertBefore(this).on("contextmenu",f.abortevent).on("mousedown",f.layerClick);e.support.fixedPosition||c.css({position:"absolute",height:e(document).height()});return c}};e.fn.contextMenu=function(a){a===n?this.first().trigger("contextmenu"):a.x&&a.y?this.first().trigger(e.Event("contextmenu",{pageX:a.x,pageY:a.y})):"hide"===
a?(a=this.data("contextMenu").$menu)&&a.trigger("contextmenu:hide"):"destroy"===a?e.contextMenu("destroy",{context:this}):e.isPlainObject(a)?(a.context=this,e.contextMenu("create",a)):a?this.removeClass("context-menu-disabled"):a||this.addClass("context-menu-disabled");return this};e.contextMenu=function(a,b){"string"!=typeof a&&(b=a,a="create");"string"==typeof b?b={selector:b}:b===n&&(b={});var c=e.extend(!0,{},x,b||{}),d=e(document),g=d,k=!1;c.context&&c.context.length?(g=e(c.context).first(),
c.context=g.get(0),k=c.context!==document):c.context=document;switch(a){case "create":if(!c.selector)throw Error("No selector specified");if(c.selector.match(/.context-menu-(list|item|input)($|\s)/))throw Error('Cannot bind to selector "'+c.selector+'" as it contains a reserved className');if(!c.build&&(!c.items||e.isEmptyObject(c.items)))throw Error("No Items sepcified");v++;c.ns=".contextMenu"+v;k||(r[c.selector]=c.ns);m[c.ns]=c;c.trigger||(c.trigger="right");u||(d.on({"contextmenu:hide.contextMenu":f.hideMenu,
"prevcommand.contextMenu":f.prevItem,"nextcommand.contextMenu":f.nextItem,"contextmenu.contextMenu":f.abortevent,"mouseenter.contextMenu":f.menuMouseenter,"mouseleave.contextMenu":f.menuMouseleave},".context-menu-list").on("mouseup.contextMenu",".context-menu-input",f.inputClick).on({"mouseup.contextMenu":f.itemClick,"contextmenu:focus.contextMenu":f.focusItem,"contextmenu:blur.contextMenu":f.blurItem,"contextmenu.contextMenu":f.abortevent,"mouseenter.contextMenu":f.itemMouseenter,"mouseleave.contextMenu":f.itemMouseleave},
".context-menu-item"),u=!0);g.on("contextmenu"+c.ns,c.selector,c,f.contextmenu);if(k)g.on("remove"+c.ns,function(){e(this).contextMenu("destroy")});switch(c.trigger){case "hover":g.on("mouseenter"+c.ns,c.selector,c,f.mouseenter).on("mouseleave"+c.ns,c.selector,c,f.mouseleave);break;case "left":g.on("click"+c.ns,c.selector,c,f.click)}c.build||p.create(c);break;case "destroy":var h;if(k){var l=c.context;e.each(m,function(b,a){if(a.context!==l)return!0;h=e(".context-menu-list").filter(":visible");h.length&&
h.data().contextMenuRoot.$trigger.is(e(a.context).find(a.selector))&&h.trigger("contextmenu:hide",{force:!0});try{m[a.ns].$menu&&m[a.ns].$menu.remove(),delete m[a.ns]}catch(c){m[a.ns]=null}e(a.context).off(a.ns);return!0})}else if(!c.selector)d.off(".contextMenu .contextMenuAutoHide"),e.each(m,function(a,b){e(b.context).off(b.ns)}),r={},m={},v=0,u=!1,e("#context-menu-layer, .context-menu-list").remove();else if(r[c.selector]){h=e(".context-menu-list").filter(":visible");h.length&&h.data().contextMenuRoot.$trigger.is(c.selector)&&
h.trigger("contextmenu:hide",{force:!0});try{m[r[c.selector]].$menu&&m[r[c.selector]].$menu.remove(),delete m[r[c.selector]]}catch(q){m[r[c.selector]]=null}d.off(r[c.selector])}break;case "html5":(!e.support.htmlCommand&&!e.support.htmlMenuitem||"boolean"==typeof b&&b)&&e('menu[type="context"]').each(function(){this.id&&e.contextMenu({selector:"[contextmenu="+this.id+"]",items:e.contextMenu.fromMenu(this)})}).css("display","none");break;default:throw Error('Unknown operation "'+a+'"');}return this};
e.contextMenu.setInputValues=function(a,b){b===n&&(b={});e.each(a.inputs,function(a,d){switch(d.type){case "text":case "textarea":d.value=b[a]||"";break;case "checkbox":d.selected=b[a]?!0:!1;break;case "radio":d.selected=(b[d.radio]||"")==d.value?!0:!1;break;case "select":d.selected=b[a]||""}})};e.contextMenu.getInputValues=function(a,b){b===n&&(b={});e.each(a.inputs,function(a,d){switch(d.type){case "text":case "textarea":case "select":b[a]=d.$input.val();break;case "checkbox":b[a]=d.$input.prop("checked");
break;case "radio":d.$input.prop("checked")&&(b[d.radio]=d.value)}});return b};e.contextMenu.fromMenu=function(a){a=e(a);var b={};A(b,a.children());return b};e.contextMenu.defaults=x;e.contextMenu.types=w;e.contextMenu.handle=f;e.contextMenu.op=p;e.contextMenu.menus=m})(jQuery);

$.contextMenu({
  selector: '.post',
  build: function(post, event) {
      post = post[0];
      var dynamic_items = {}, options = $('.profile-icons img', post), i = 0;
      for(; (opt = options[i++]); ) {
        var key = opt.className.replace('i_icon_', ''), link = opt.parentNode.href;
        dynamic_items[link] = {
            name : opt.getAttribute('alt'),
            callback : function(l) {
              window.location = l;
            }
        };
      }
      return {
        items: dynamic_items
      };
  }
});

O código acima é funcional apenas para a versão PhpBB3. Para alterar para outras versões (PhpBB2, PunBB ou Invision), siga o passo abaixo.

Procure por:

Código:

var dynamic_items = {}, options = $('.profile-icons img', post), i = 0;

E substitua por:
- PunBB & phpBB2

Código:

var dynamic_items = {}, options = $('.post-options img', post), i = 0;

- Invision

Código:

var dynamic_items = {}, options = $('.posting-icons img', post), i = 0;

2º - Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

3º - Aplicando código CSS:
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS

Código:

/* LGForum & Hancki */
.context-menu-list {
    margin:0;
    padding:0;
    min-width: 120px;
    max-width: 250px;
    display: inline-block;
    position: absolute;
    list-style-type: none;
    border: 1px solid #DDD;
    background: #EEE;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.context-menu-item {
    padding: 2px 2px 2px 24px;
    background-color: #EEE;
    position: relative;
    -webkit-user-select: none;
      -moz-user-select: -moz-none;
        -ms-user-select: none;
            user-select: none;
}
.context-menu-separator {
    padding-bottom:0;
    border-bottom: 1px solid #DDD;
}
.context-menu-item > label > input,
.context-menu-item > label > textarea {
    -webkit-user-select: text;
      -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
}
.context-menu-item.hover {
    cursor: pointer;
    background-color: #39F;
}

.context-menu-item.disabled {
    color: #666;
}
.context-menu-input.hover,
.context-menu-item.disabled.hover {
    cursor: default;
    background-color: #EEE;
}
.context-menu-submenu:after {
    content: ">";
    color: #666;
    position: absolute;
    top: 0;
    right: 3px;
    z-index: 1;
}

/* ICONS */
.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
.context-menu-item.icon-edit { background-image: url('http://i.imgur.com/QaC1efk.png'); }
.context-menu-item.icon-cut { background-image: url('http://i.imgur.com/GLlnkt7.png'); }
.context-menu-item.icon-copy { background-image: url('http://i.imgur.com/3E0nSeS.png'); }
.context-menu-item.icon-paste { background-image: url('http://i.imgur.com/OPqxEsK.png'); }
.context-menu-item.icon-delete { background-image: url('http://i.imgur.com/41rRSu3.png'); }
.context-menu-item.icon-add { background-image: url('http://i.imgur.com/VJyRVJV.png'); }
.context-menu-item.icon-quit { background-image: url('http://i.imgur.com/yQizJn0.png'); }

.context-menu-input > label > * { vertical-align: top; }
.context-menu-input > label > input[type="checkbox"],
.context-menu-input > label > input[type="radio"] {
    margin-left: -17px;
}
.context-menu-input > label > span {
    margin-left: 5px;
}
.context-menu-input > label,
.context-menu-input > label > input[type="text"],
.context-menu-input > label > textarea,
.context-menu-input > label > select {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
            box-sizing: border-box;
}
.context-menu-input > label > textarea {
    height: 100px;
}
.context-menu-item > .context-menu-list {
    display: none;
    right: -5px;
    top: 5px;
}
.context-menu-item.hover > .context-menu-list {
    display: block;
}
.context-menu-accesskey {
    text-decoration: underline;
}

• Resultado: