Opening Portal Panel on top of another

[Alfred]

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).

   

Code:

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.

[stworthy]

Define a function to find the panel by title. If the panel is not exists then create it otherwise open it.

Code:

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

[Alfred]

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.

Code:

$(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.