Title: Create Tab ContextMenu Programmatically
Post by: poeziafree on February 17, 2022, 09:57:58 AM
Hello
Is it possible to create the tabs contextmenu without any html code? I don't understand... I just want to create the contextmenu items programmatically.
Is it always required to specify the div id? ( $('#menu').menu ... ), cannot I create the menu without the div element?
Any help will be much appreciated.
Title: Re: Create Tab ContextMenu Programmatically
Post by: jarry on February 18, 2022, 12:08:47 AM
The code below shows how to listen to the 'contextmenu' event on a tab panel and create the context menu dynamically. var t = $('#tt'); var tab = t.tabs('getTab', 0); // get the tab panel var opts = tab.panel('options'); if (!opts.cmenu){ opts.cmenu = $('<div></div>').appendTo('body'); opts.cmenu.menu(); opts.cmenu.menu('appendItem', {text:'MenuItem1'}); opts.cmenu.menu('appendItem', {text:'MenuItem2'}); opts.cmenu.menu('appendItem', {text:'MenuItem3'}); opts.cmenu.menu('appendItem', {text:'MenuItem4'}); } opts.tab.on('contextmenu', function(e){ e.preventDefault(); opts.cmenu.menu('show',{left:e.pageX,top:e.pageY}) })
Title: Re: Create Tab ContextMenu Programmatically
Post by: poeziafree on February 18, 2022, 06:20:03 AM
Is this code correct then? Thanks $('#wu-tabs').tabs({
onContextMenu: function(e, title,index) { e.preventDefault(); var target = this; var opts = $(target).tabs('options'); if (!opts.cmenu){ opts.cmenu = $('<div></div>').appendTo('body'); opts.cmenu.menu(); opts.cmenu.menu('appendItem', {id:'closeThis',text:'დახურვა'}); opts.cmenu.menu('appendItem', {id:'closeAll',text:'ყველას დახურვა'}); }
if ($(target).tabs('getTab', index).panel('options').closable == false) {opts.cmenu.menu('disableItem', $('#closeThis')[0]);} else {opts.cmenu.menu('enableItem', $('#closeThis')[0]);} if ($(target).find(".tabs-closable").length == 0) {opts.cmenu.menu('disableItem', $('#closeAll')[0]);} else {opts.cmenu.menu('enableItem', $('#closeAll')[0]);} opts.cmenu.menu({ onClick:function(item){ if (item.id=='closeAll') { var count = $(target).tabs('tabs').length; for(var i=count-1; i>=0; i--){ if ($(target).tabs('getTab', i).panel('options').closable==true) {$(target).tabs('close',i);} } } if (item.id=='closeThis') { if ($(target).tabs('getTab', index).panel('options').closable==true) {$(target).tabs('close',index);} } } }); opts.cmenu.menu('show', { left: e.pageX, top: e.pageY }); }
});
|