如何在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