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

Ir para baixo

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

Mensagem por Hancki 10.05.14 10:39


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

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



- 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;

- 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 >>
[TUTORIAL] Context menu para ações nos tópicos Painel13
[TUTORIAL] Context menu para ações nos tópicos 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Context menu para ações nos tópicos 110210Seta 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.
[TUTORIAL] Context menu para ações nos tópicos 110310Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Context menu para ações nos tópicos 110410Seta 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.


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

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

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:
    [TUTORIAL] Context menu para ações nos tópicos OiF6KFB




© Fórum dos Fóruns, Hancki, LGForum & JScript


[TUTORIAL] Context menu para ações nos tópicos Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Context menu para ações nos tópicos
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos