CODEWITHSUNDEEP
jquery-mobile
user3400080
user3400080

Reputation: 211

jquery mobile panel on each different html

I'm trying to use panel on each different HTML pages.

And I got this sample panel JS code on JQM website.

/* panel */
$( document ).on( "pageinit", "#demo-page", function() {
    $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft"  ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

The problem is if I want to put panel on each different HTML pages, How do I have to set the page ID ?

For example, I have HTML pages such as.....

main.html page ID is "#pageMain" , about.html page ID is "#pageAbout", and gallery.html page ID is "#gallery"

How do I have to fix JS code ? Please help~

Upvotes: 0

Views: 87

Answers (1)

Phill Healey
Phill Healey

Reputation: 3180

The code you have is for adding the ability to open panels via swipe gestures. It won't add the panel into the DOM alongside your page content. To do that you'll need to adapt the following code.

/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
  $.get('left-panel.html', function(data){ 
//$(data).prependTo($.mobile.pageContainer); //or .prependTo("body");
    $.mobile.pageContainer.prepend(data);
    $("[data-role=panel]").panel().enhanceWithin(); // initialize panel
  }, "html");

Upvotes: 2

Related Questions