Title: Opening Portal Panel on top of another
Post by: Alfred on March 13, 2018, 05:49:53 AM
The following codes allow me to open portan panel on top of another. Now the problem is that I don't want to reopen panels I have already opened, but show it to the top of other panels if I run the function add(link,title). function add(link, title){ op = true; var p = $('<div id="pgrid" border="0"><div/>').appendTo('body'); if(link=='main'){ op = false; }else{ op= true; } p.panel({ title:title, href: link+'.php', height:screen.height-190, closable:op, onOpen: function(){ var prevPanel = $(this).parent().prev().children('.panel-body'); prevPanel.panel('close'); }, onClose: function(){ var panels = $('#pp').portal('getPanels', 1); if ($(panels[panels.length-1])[0] == this){ var prevPanel = $(this).parent().prev(); prevPanel.children('.panel-body').panel('open'); $(this).panel('destroy'); } } }); $('#pp').portal('add', { panel:p, columnIndex:1 }); $('#pp').portal('resize'); p.panel('panel').draggable('disable'); } $(function(){ $('#pp').portal({ border:false, fit:true, }); add('main', ''); }); This topic is taken from https://www.jeasyui.com/forum/index.php?topic=7026.0. Please help.
Title: Re: Opening Portal Panel on top of another
Post by: stworthy on March 14, 2018, 02:12:47 AM
Define a function to find the panel by title. If the panel is not exists then create it otherwise open it. function findPanel(pp,title){ var panels = $(pp).portal('getPanels', 1); for(var i=0; i<panels.length; i++){ var panel = panels[i]; if (panel.panel('options').title == title){ return panel; } } return null; } function addpanel(link, title){ var p = findPanel('#pp',title); if (p){ p.panel('open'); return; } ... }
Title: Re: Opening Portal Panel on top of another
Post by: Alfred on March 22, 2018, 09:16:02 PM
Almost got it perfect. Here is the code I am working on. When I open the existing panel which has been hidden, it automatically move the panel in display at the end of the newly opened panel and shows it. I want the other panel to be hidden. $(function(){ $('#pp').portal({ border:false, fit:true, }); add('menu', ''); }); function add(link, title){ var p = findPanel('#pp',title); if(p){ $.extend(p.panel('options'), { onOpen: function(){ var prevPanel = $(this).parent().prev().children('.panel-body'); prevPanel.panel('close'); }, onClose: function(){ var panels = $('#pp').portal('getPanels', 0); if ($(panels[panels.length-1])[0] == this){ var prevPanel = $(this).parent().prev(); prevPanel.children('.panel-body').panel('open'); $(this).panel('destroy'); } } }); p.panel('open'); $('#pp').portal('resize'); }else{ var p = $('<div id="pgrid" border="0"><div/>').appendTo('body'); p.panel({ title:title, href: 'views/'+link+'.php', height:screen.height-190, maximizable:false, closable:true, onResize:function(){ $('#pp').panel('resize'); } }); $('#pp').portal('add', { panel:p, columnIndex:0 }); $.extend(p.panel('options'), { onOpen: function(){ var prevPanel = $(this).parent().prev().children('.panel-body'); prevPanel.panel('close'); }, onClose: function(){ var panels = $('#pp').portal('getPanels', 0); if ($(panels[panels.length-1])[0] == this){ var prevPanel = $(this).parent().prev(); prevPanel.children('.panel-body').panel('open'); $(this).panel('destroy'); } }, }); p.panel('open'); $('#pp').portal('resize'); } } function findPanel(pp,title){ var panels = $(pp).portal('getPanels', 0); for(var i=0; i<panels.length; i++){ var panel = panels[i]; if (panel.panel('options').title == title){ return panel; } } return null; } Thanks for the help. Please fix the problem.
|