Panels outside Page.[Feature Request]

[poonkave]

Documentation say's
"A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between.** A panel cannot be placed outside a page, but this constraint will be removed in a future version**."

If in future if Panel is placed outside page, will it be something like a fixed Panel / Panel floating above Pages and Panel stays on change page?

Example: Using panel to show a left navigation using tree structured menu.Selecting an item changes the page but panel stays as it is on page change.

Will be usefull for tablets...

[poonkave]

added to https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

[frequent]

and would allow to use ids on panels vs. having to workaround using name attributes on form elements located inside panels (multi-page DOM, multiple panels, duplicate ids)

[jaspermdegroot]

Related: #5659 (comment)

[jaspermdegroot]

@arschmitz started to work on this in branch "ext-panels".
Like I described in my comment here #5659 (comment) we should look into not wrapping page toolbars and content anymore; just have panel and active page as siblings in the page container. Then we don't have to wrap the page toolbars and content anymore.
I think that will allow us to reduce the 3D-ing that we use to force hardware acceleration to prevent blinks. The 3D-ing causes rendering issues. See #6050 and #6055 for example.

[PangbornIdentity]

Any chance this will see a release for 1.4? Currently have heavy nav duplication.

[jaspermdegroot]

This has just landed in master and is part of 1.4 alpha which we released a few minutes ago.

Closing as fixed.

[PangbornIdentity]

@uGoMobi you rock

[heruan]

Great! Any hint on how to use external panels in 1.4?

[arschmitz]

Simply don't put the panel in the page and call it as you would any widget
.panel()

On Thu, Aug 1, 2013 at 11:02 AM, Giovanni Lovato
[email protected]:

Great! Any hint on how to use external panels in 1.4?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/5741#issuecomment-21942435
.

[heruan]

Thank you! Would external panels be able to stay open when changing page now?

Also: how to make external panels fixed? data-position="fixed" nor data-position-fixed="true" work anymore on panels with data-display="push" (and when the external panel is open, also the external header scrolls with the page although being fixed).

[cuznerdexter]

I have got the Panel working externally - which is great! But the "ul, li, a" tags are no longer working at all.

This is the code:
$( document ).on( "mobileinit", function() {
$.mobile.panel.prototype.options.initSelector = "#mypanel1";
});

$(function(){
$("#mypanel1").panel();
$("#mypanel1 ul li a").click(function(event){
//event.preventDefault();
$("#mypanel1").panel("close");
$( "#mypanel1" ).on( "panelclose", function( event, ui ) {
$.mobile.changePage( "#pageone", { transition: "slideup", changeHash: false });
});

});

});

Anyone know why? I really need some good tuts on this stuff.

[cuznerdexter]

I have managed to update it a bit. Now the panel is working outside the pages, I have got the listview styling working, and also the page linking.
But now the panel is no longer closing when I click a listview item. I don't know what has stopped it working.

this is the script

$(function(){
$.fn.enhanceWithin();
$("#mypanel1").panel().enhanceWithin();
$("#mypanel1 ul").listview();

$("#mypanel1 ul li a").click(function(){
    //event.preventDefault();        
    $("#mypanel1").panel("close");    
    $("#mypanel1").on( "close", function( event, ui ) {
        $.mobile.changePage( "#pageone", { transition: "slideup", changeHash: false });
    });    

});

});

[cuznerdexter]

Fixed the panel function, now the problem is that when clicking the links the pages load more than once (eg instead of loading once, they load 3+ times).

Here is the code

$("#main").on("pageinit", function (event){

$.fn.enhanceWithin(); 
$("#mypanel1").panel()enhanceWithin();
$("#mypanel1 ul").listview();        

$("#mypanel1 ul li a").click(function(event){        
    $("#mypanel1").panel("close");        

    event.preventDefault();      
    var link = $(this).attr("href");  
    console.log("log1 " + link);

    $("#mypanel1").on( "panelclose", function( event, ui ) {
        $.mobile.changePage( link, { transition: "slideup", reverse: false, changeHash: false });

    }); 

});

});

[jaspermdegroot]

@cuznerdexter

Does the problem still occur if you use this code?

/* pageinit is deprecated in 1.4 in favor of pagecreate */
$( document ).on( "pagecreate", "#main", function( event ) {

$( "#mypanel1" ).panel();
$( "#mypanel1 ul" ).listview(); /* no data-role="listview" in markup */

/* OR use $( "#mypanel1" ).panel().enhanceWithin(); with data-role="listview" in markup */

$( "#mypanel1 ul li a" ).on( "click", function( event ) {
    event.preventDefault();

    var link = $( this ).attr( "href" );  
    console.log("log1 " + link);

    $( "#mypanel1" ).on( "panelclose", function( event, ui ) {
        $.mobile.changePage( link, { transition: "slideup", reverse: false, changeHash: false });
    });

    $( "#mypanel1" ).panel( "close" );        
});
});