Creating Multiple Portal Panels

[Alfred]

I created a panel using the following codes:

HTML:

Code:

<div id="pp" region="center" style="width:90%;" align="center">          
                <div id="pgrid" closable="true"></div>
        </div>

JS:
   

Code:

$(function(){
                  $('#pp').portal({
                           border:false,
                           fit:true,
                    });
        addpanel('main', '');
    });
function addpanel(link, title){
        var p;
        p = findPanel('#pp',title);
        if(p){   
            //the panel already exists, we open it whether it is hidden or not         
            p.panel('open');
        } else {
           //the panel does not exist, we create new panel.
            var p = $('<div id="pgrid" border="0"><div/>').appendTo('body');
            p.panel({
                    title:title,                    
                    href: link+'.php',
                    height:screen.height-190,
                    closable:true
            });           
           $('#pp').portal('add', {
                panel:p,
                columnIndex:0 //I use just a single panel
            });         
           $.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');
        }

Check Existing panel:

Code:

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

This code almost works fine. The problem is here: by default, the main.php is opened. I executed addpanel('view1','Dashboard2');, it opened the view1.php on top of main.php. I execute addpanel('view2', 'Dashboard3'); which was opened on top of view1.php. Now to open view1.php I run addpanel('view1','Dashboard2'); again. At this stage, I expect view1.php to be on top of view2.php. However, the codes shifted down the panel view2.php below view1.php. But the view2.php must be hidden or minimized. So how do I modify the code to hide/minimize the panel view2.php at that stage? What I want in addition is to minimize the panel rather than hiding which the code in addpanel() is doing. Please help.

Regards
Dove

[stworthy]

The portal allows you to display multiple panels in multiple columns. If you only want to display one panel at a time, the portal is not needed. It may be more suitable to build a card layout that displays multiple panels at a same area and only one panel is displayed.

[Alfred]

Thank you. Please can you give me an example to work with. As a complete newbie, I have no idea on other possibilities.

[stworthy]

The dialog has the builtin features that can display in card mode. Use the inline dialog instead of panel component to display panels card by card. Please try this code.

Code:

<div id="cc" style="position:relative;width:800px;height:300px;">
</div>
<script type="text/javascript">
	var panels = [];
	function findPanel(title){
		for(var i=0; i<panels.length; i++){
			var p = panels[i];
			if (p.panel('options').title == title){
				return p;
			}
		}
		return null;
	}
	function addpanel(link, title){
		var p = findPanel(title);
		if (p){
			p.dialog('open');
		} else {
			p = $('<div></div>').appendTo('#cc');
			p.dialog({
				maximized: true,
				draggable: false,
				inline: true,
				closable: false,
				shadow: false,
				border: 'thin',
				fit: true,
				title: title,
				href: link+'.php'
			});
			panels.push(p);
		}
	}
	$(function(){
		addpanel(null, 'main');
	})
</script>

[Alfred]

Thanks a million. What would I do without you? / To say thank you is not enough. This solves my problem completely.