search

frequent / multiview

jQuery Mobile panels (menu/main)
66 stars 30 forks source link

Fullscreen page and navigation between panels #35

Open gck opened 12 years ago

gck commented 12 years ago

Hi, first of all thank you for your great work and for your help, I'm trying to display a fullscreen page and then changePage to a different .html page, splitted in a 'menu' and a 'main', this one contain a dinamically generated listview. The following step would be changePage() to a 3rd .html, in wich the main content is dynamically generated.

My code should appear like this: in the page1.html I got a 


  div data-role="page" id="foo" data-wrapper="true">
     div data-role="panel" data-id="foo-main-panel" data-panel="main">
         div data-role="page" id="foo-main" data-show="first">
In this way the content doesn't appear splitted, then I call a $.mobile.changePage( "page2.html" ); and my page2.html will be like this: 

 div data-role="page" id="foo2" data-wrapper="true">
     div data-role="panel" data-id="foo2-menu-panel" data-panel="menu">
         div data-role="page" id=foo2-menu" data-show="first">
             
         /div>  
     /div>
    div data-role="panel" data-id="foo2-main-panel" data-panel="main">
        div data-role="page" id="foo2-main" data-show="first">
             
        /div>
    /div>
 /div>
The page will be splitted and the listview correctly loaded. From the link in the listview I call $.mobile.changePage( "page3.html", {pageContainer: $('div:jqmData(id="foo3-main-panel")') } ); My page3.html code should be like this: 

 div data-role="page" id="foo3" data-wrapper="true">
     div data-role="panel" data-id="foo3-menu-panel" data-panel="menu">
         div data-role="page" id=foo3-menu" data-show="first">
             
         /div>  
    /div>
    div data-role="panel" data-id="foo3-main-panel" data-panel="main">
         div data-role="page" id="foo3-main" data-show="first">
The result is a blank page, the error displayed is data.fromPage is undefined. I would understand if the approach is correct. My purpose is to load the main content from foo3.html in the right panel, also want to understand how I can control menu panel, in either case I wanted to keep menu foo2.html or loading the one from foo3.html. What is the proper way to control that? Thanks in advance and keep with it
frequent commented 12 years ago

Short on time until end of the month.

Some thoughts:

  1. If I understand correctly, page1 is a normal JQM page? Then don't add panels or a data-wrapper. Normal pages work ok with multiview pages. Only the pages with panels should get data-wrapper="true", so the plugin can catch them
  2. Your 2nd page is main/menu, correct? It loads ok and is split?
  3. Where does the 3rd page go? Is this a new page split main/menu or should the page be loaded into a panel? If it's supposed to be a new page, don't put a data-id in your changePage call, because that will try to load the page in the panel you specify. If it should be a page INSIDE a panel on page2, you need to specifiy the panel on page 2 (not 3 as you do). Also page3 should then be a normal page (no panels), because if you are loading it INTO menu on page2, you can't have main/menu-page3 inside menu-page2.
gck commented 12 years ago

Hi frequent, thanks for your quick response, my first page should be a standard jqm page, but if I remove the wrapper and the panel and then I changePage to the 2nd the result is a blank page, so I added a single main panel to my page.

The 2nd page load correctly and is splitted, so it's ok.

The 3rd page should be a splitted page with the 3d page main and the 2nd page menu. If I understood correctly I have to simply changePage to the 3rd html page without specifying the panel id, so in my 3rd page html I have to put the same menu content as the 2nd. But if I want to change the menu content as well, do I have to make a 4th html page with the same main content as the previous one but a different menu? Thanks in advance :)

frequent commented 12 years ago

ok. seems multiview is not triggering, you are missing some classes in your html tag, which multiview should be adding. Pretty sure this is due to my requireJS handler. Let me check.