如何在popover中显示jQuery页面？

我正在使用jQuery Mobile开发iPad应用程序。我想要一个带有按钮的工具栏，点击时会显示弹出窗口。经过一番搜索，我发现这个jQuery popover implementation。它工作正常，但没有任何样式的标题或内容。然后我做了一些调整，决定只设置这将是一个普通的jQuery页面像这样的内容：如何在popover中显示jQuery页面？

<div id="popover-add-project" data-role="page" data-url="popover-add-project"> 
    <div data-role="header" data-position="fixed"> 
    <h1>Add New Project</h1> 
    </div><!-- /header -->  
    <div data-role="content"> 
    <p>project form to be inserted here</p> 
    </div> 
</div>

的问题是，它会显示一个空酥料饼。简化代码是here，可以通过在webkit浏览器上打开index.html（我只在Safari和Chrome上测试过）并单击添加按钮来执行。

jquery.popover.js包含与popover相关的代码。

app.js为添加按钮创建弹出窗口。

任何帮助，将不胜感激。

谢谢。

来源

2012-06-01 Ecil

我想有一个类似于jQuery对话框的行为，但是有一个弹出窗口。 – Ecil

如果你只需要一个酥料饼里面的内容，你应该使用即将推出的弹出窗口小部件作为@Phill Paf福特提到。

如果你想在popover里面放满整个页面，你可以试试multiview，我几乎已经开发完成了。

这是我的test pages其中也有一个popover（右上）。

enter image description here

Popovers是面板，使用JQM pageContainer changePage选项启用面板导航和融入JQM和浏览器历史记录。

我没有做酥料饼的唯一版本的插件所以目前你必须设置你的网页是这样的：

<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>

所以使用popovers，您将需要

将data-wrapper =“true”添加到您的页面以初始化插件
使用全宽主背景面板
面板国家需要一个角色= 数据角色= “面板”，类型数据面板= “主要|中等|菜单|酥料饼”和数据-ID 数据-ID = “your_panel_name”
一个每个面板上页需要数据显示=“第一”，没有它你的面板将是空白
，只要你想你的包装页面
里面你可以添加尽可能多的酥料饼的面板，你可以在里面添加尽可能多的嵌套页你想要的弹力
当你加载页面时，嵌套页面不需要“在板上”。您可以通过链接或changePage调用像JQM一样将其拖入。

在一个页面或链接拉向和从面板内的页面，changePage这样的：

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

，或者使用链路与指定数据面板：

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

在首次加载页面时不需要包含所有弹出页面。您可以像常规JQM一样将它们拉出，一旦用户离开或弹出窗口关闭，它们将再次移除。
切换需要用类的切换按钮toggle_popover和数据面板酥料饼=“your_panel_name”知道哪些酥料饼打开插件。在智能手机上
你popovers将是

插件还是有一些缺陷，需要4点个小的调整自定义JQM版本（最重要的添加pageContainer到JQM历史）全屏页面，但除此之外，它的工作好。

来源

2012-06-02 13:14:08 frequent

iOS弹出窗口有一个指向打开它的窗口小部件的箭头。我看到一些苹果拒绝的应用程序，因为没有箭头指向按钮。有没有机会让上面提到的弹出箭头？非常感谢您的详细回复。 – Ecil

yup，在popover和插件css中设置data-triangle =“top | bottom”，设置overflow-y：在popovers上可见。当您覆盖overflow-x：在Firebug中隐藏时，在演示页面中工作。我目前禁用了三角形，因为我需要找到一种方法来防止页面在转换过程中“泄漏”出弹出窗口。最终他们应该在那里虽然（也许也是左|右，但这些位置很棘手） – frequent