且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在弹出窗口中显示jQuery页面?

更新时间:2022-10-24 20:19:42

If you just need content inside a popover, you should use the upcoming popup widget as @Phill Pafford mentions.

If you want full pages inside a popover you can try multiview, which I'm almost done developing.

Here is one of my test pages which also has a popover (top right).

Popovers are panels, which use the JQM pageContainer changePage option to enable panel navigation and integration into the JQM and browser history.

I have not done a popover only version of the plugin so currently you would have to set up your page like this:

<div data-role="page" id="YOUR_ID" data-wrapper="true"> 

    <div data-role="panel" data-id="my_main_panel_id" data-panel="main">

         <div data-role="page" id="page_A1" data-show="first">

            <div data-role="header" data-position="fixed">
               <h1>Local Header</h1>
               <div data-role="controlgroup" data-type="horizontal" class="iconposSwitcher-div">
                    <a href="#" data-transition="pop" data-role="button" data-panel="pop_one" data-icon="info" data-iconpos="left" class="toggle_popover">pop1</a>
               </div>
            </div>
            <div data-role="content"></div>
         </div>
      </div>

      <div data-role="panel" data-id="pop_one" data-panel="popover" data-triangle="top" class="popover1">
           <div data-role="page" id="page_D1" data-show="first">
               <div data-role="header" data-position="fixed" data-theme="a">
                   <h1>Pop</h1>
               </div> 
               <div data-role="content"></div>
            </div>
    <div data-role="page" id="page_D2">
                <div data-role="header" data-position="fixed" data-theme="a">
                   <h1>Pop internal page</h1>
                </div>
                <div data-role="content"></div>
           </div>
       </div>
   </div>

So to use popovers, you will need to

  • add data-wrapper="true" to your page to init the plugin
  • use a fullwidth main background panel
  • panels need a role = data-role="panel", a type data-panel="main|mid|menu|popover" and a data-id data-id="your_panel_name"
  • one page on each panel needs data-show="first", without it your panels will be blank
  • you can add as many popover panels as you want inside your wrapper page
  • you can add as many nested pages inside your popovers as you want
  • nested pages don't need to be "on board" when you load the page. You can pull them in like JQM through links or changePage calls.
  • to pull a page in or link to and from a page inside a panel, changePage like this:

    $.mobile.changePage('#pop_two', {transition: 'slide', pageContainer: $('div:jqmData(id="your_panel_name")') });
    

  • or using links with data-panel specified:

    <a href="#pop_two" data-panel="your_panel_name">Button</a>
    

  • there is no need to include all popover pages at first page load. You can pull them in like regular JQM and they will be removed again once the user leaves or the popover closes.
  • to toggle a popover you need a toggle button with class of toggle_popover and data-panel="your_panel_name" to tell the plugin which popover to open.
  • on smartphones your popovers will be fullscreen pages

The plugin still has some bugs and requires a custom JQM version with 4 small tweaks (most important adding pageContainer to the JQM history), but other than that it's working ok.