Nested Panels

Mon Jan 20, 2014 6:50 pm

A couple of days ago, I finished working on the panel tutorial, and it worked great. I have been working lately on making a nested panel. For example, I have one button in the first panel, that once the user click on it, another panel, on the same side, will appear. Is there any way to attack this? I am stuck.

Thanks

Michael

Mon Jan 20, 2014 7:36 pm

Hello! Not sure I understand what do you mean. Have you tried new Panel component http://docs.appery.io/documentation/u...?

Mon Jan 20, 2014 7:39 pm

Yes,

Code: Select all

 However,  Let's say I add a button to the panel.  This button will open a new panel, on the same side.

Michael

Mon Jan 20, 2014 7:42 pm

Yes,

However, Let's say I add a button to the panel. This button will open a new panel, on the same side.

Michael

Mon Jan 20, 2014 8:59 pm

You can add action of panel opening on button click. This panel will close, but new one open.

Tue Jan 21, 2014 7:07 pm

When you click the 'New Panel' button, a new panel will be loaded in place of the old. I cannot figure out the code to do this. Below is my attempt to do this with js/jquery:

precode
var Panel = function() {
var that = {},
_panel = $('#mypanel');

Code: Select all

 var page = _panel&#46;parents("[data-role=page]"); 
 page&#46;append(_panel); 

 if (_panel == $('#mypanel')) { 
     _panel&#46;on("panelbeforeopen", function(event, ui) { 

         $("#close_panel")&#46;die()&#46;live("click", function() { 
             that&#46;close(); 
         }); 
         $("#new_panel")&#46;on("click", function() { 
             that&#46;change(); 
         }); 
     }); 
 } else if (_panel == $('#mypanel2')) 
 { 
     _panel&#46;on("panelbeforeopen", function(event, ui) { 

         $("#close_panel")&#46;die()&#46;live("click", function() { 
             that&#46;close(); 
         }); 
     }); 

 } 

 that&#46;open = function() { 
     _panel&#46;panel('open'); 
 }; 
 that&#46;close = function() { 
     _panel&#46;panel("close"); 
 }; 

 that&#46;change = function() { 
     _panel&#46;empty()&#46;remove(); 
     _panel = $('#mypanel2'); 
     page = _panel&#46;parents("[data-role=page]"); 
     page&#46;append(_panel); 
     _panel&#46;panel('open'); 
 }; 
 return that;

};
/code/pre

Tue Jan 21, 2014 8:03 pm

Hi Michael,

Try our new component that is much more easier and you won't need any JS: http://docs.appery.io/documentation/u...