3

我正在使用 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>

问题是它显示一个空的弹出框。这里有一个简化的代码，可以通过在 webkit 浏览器上打开 index.html（我只在 Safari 和 Chrome 上测试过）并单击 Add 按钮来执行。

jquery.popover.js 包含弹出框相关代码。

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

任何帮助，将不胜感激。

谢谢。

4

3 回答 3

6

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

如果您想在弹出窗口中显示完整页面，您可以尝试multiview，我几乎完成了开发。

这是我的一个测试页面，它也有一个弹出窗口（右上角）。

在此处输入图像描述

弹出框是面板，它使用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"添加到您的页面以初始化插件
  • 使用全角主背景面板
  • 面板需要一个角色 = data-role="panel"，一个类型data-panel="main|mid|menu|popover"和一个 data-id data-id="your_panel_name"
  • 每个面板上的一个页面需要data-show="first"，没有它你的面板将是空白的
  • 您可以在包装页面中添加任意数量的弹出面板
  • 您可以根据需要在弹出框内添加任意数量的嵌套页面
  • 加载页面时，嵌套页面不需要“加载”。您可以像 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和data-panel="your_panel_name"类的切换按钮来告诉插件打开哪个弹出框。
  • 在智能手机上，您的弹出窗口将是全屏页面

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

于 2012-06-02T13:14:08.763 回答
5

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

于 2012-06-01T20:18:41.130 回答
5

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

在此处输入图像描述

于 2012-06-01T20:36:16.830 回答