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

Question

我正在使用jQuery Mobile开发iPad应用程序.我想要一个带有按钮的工具栏,单击时会显示一个弹出窗口.经过一番搜索,我发现了这个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>

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

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

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

任何帮助,将不胜感激.

谢谢.

Answer 1

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

如果你想要一个popover内的完整页面,你可以尝试多视图,我几乎已经完成了开发.

这是我的一个测试页面,也有一个popover(右上角).

弹出窗口是面板,它使用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 data-id ="your_panel_name"
• 每个面板上的一个页面需要data-show ="first",没有它你的面板将是空白的
• 您可以在包装页面中添加任意数量的弹出框
• 您可以根据需要在弹出窗口中添加任意数量的嵌套页面
• 加载页面时,嵌套页面不需要"在板上".您可以通过链接或changePage调用将它们拉入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"的切换按钮,以告诉插件要打开哪个弹出窗口.
• 在智能手机上,您的弹出窗口将是全屏页面

该插件仍然有一些错误,需要一个自定义的JQM版本,有4个小调整(最重要的是将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