EasyUI Forum
March 28, 2024, 12:49:30 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Opening Portal Panel on top of another  (Read 5359 times)
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« 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).

   
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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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.
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;
}
...
}
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #2 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.

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.
« Last Edit: March 26, 2018, 06:14:29 AM by dove » Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!