Question

我正在使用jQuery Mobile开发iPad应用程序。我想要一个带有按钮的工具栏，单击时会显示一个弹出窗口。经过一番搜索，我发现了jQuery popover implementation。它工作正常但没有标题或内容的任何样式。然后我做了一些调整，并决定只设置一个像这样的常规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为“添加”按钮创建弹出窗口。

任何帮助都将不胜感激。

感谢。

Answer 1

如果你只需要一个popover中的内容，你应该使用@Phill Pafford提到的即将推出的弹出窗口小部件。

如果你想要一个popover中的完整页面，你可以尝试multiview，我几乎已经完成了开发。

这是我的test pages之一，也有一个弹出框（右上角）。

enter image description here

Popovers是面板，使用JQM pageContainer changePage选项启用面板导航并集成到JQM和浏览器历史记录中。

我还没有完成插件的popover版本，所以目前你必须像这样设置你的页面：

<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”添加到您的网页以初始化插件
使用全宽主背景面板
面板需要一个角色= data-role =“panel”，一个 data-panel =“main | mid | menu | popover”和一个data-id的数据-ID = “your_panel_name”

每个面板上的一个页面需要 data-show =“first”，没有它你的面板将是空白的

您可以在包装页面中添加任意数量的弹出式面板

您可以根据需要在弹出窗口中添加任意数量的嵌套页面

加载页面时，嵌套页面不需要“在板上”。您可以通过链接或更改页面调用将它们拉入JQM。

将页面拉入或链接到面板内的页面，更改页面如下：

$.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 和 data-panel =“your_panel_name”的切换按钮，告诉插件要打开哪个弹出框。

在智能手机上，您的弹出窗口将是全屏页面

该插件仍有一些错误，需要一个带有4个小调整的自定义JQM版本（最重要的是将pageContainer添加到JQM历史记录中），但除此之外它工作正常。

Answer 2

data-role="page"属性将css属性display设置为none。所以在display: block的样式属性中添加#popover-add-project。

<div style="display: block" id="popover-add-project" data-role="page" data-url="popover-add-project">

Answer 3

您可以开始使用下一个jQM迭代（1.2）弹出功能

http://jquerymobile.com/test/docs/pages/popup/index.html

enter image description here

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

3 个答案: