2012-10-25 51 views
5

我嘗試創建一個listview,其中沒有子元素的元素可以有編輯按鈕。當用戶點擊這個按鈕時,應該出現一個彈出菜單。jQuery Mobile - 在嵌套列表視圖中彈出

enter image description here

這裏是一個燎JQM頁面中的代碼。

<div data-role="content"> 
<ul data-role="listview"> 
    <li> 
     <h3>Colors</h3> 
     <ul> 
      <li>Blue 
       <p class="edit"> 
        <a href="#" onclick="openEditMenu()" data-role="button" 
         data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a> 
       </p> 
      </li> 
      <li>Orange</li> 
      <li>Purple</li> 
     </ul> 
    </li> 
    <li><h3>Item</h3> 
     <p class="edit"> 
      <a href="#" onclick="openEditMenu()" data-role="button" 
       data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a> 
     </p></li> 
    </ul> 
</div> 
<div data-role="popup" id="popupMenu"> 
    <ul data-role="listview" data-inset="true" > 
      <li data-role="divider" data-theme="a">Edit Element</li> 
      <li><a href="#">Edit</a></li> 
      ... 
    </ul> 
</div> 
<script> 
    function openEditMenu() { 
     $('#popupMenu').popup('open'); 
    } 
</script> 

在第一個級別上,它的工作方式與預期類似。如果您導航到嵌套列表的第二級,則不顯示彈出窗口。

我看到JQM中的彈出窗口必須放在同一頁面上。看起來JQM沒有在listview的子頁面上找到彈出窗口。

有人成功實現了這樣的解決方案,或者它不可能用JQM 1.2的彈出功能嗎?

On jsfiddle you can find my example code.

感謝竅門或建議。

+0

如果你檢查它啓用了彈出式DIV(給定的寬度和高度)的HTML,但仍沒有顯示... – Calavoow

+0

如果我看看頁面加載時的DOM。 JQM使用'data-url =「home&ui-page = 0-0」創建了一個新頁面。因此,當您切換到子頁面並單擊該按鈕時,彈出窗口會更改其可見性,但不會顯示。我建議這是因爲它位於「主頁」頁面而不是活動頁面。 在JQM文檔中有一個通知_A彈出的div必須與鏈接嵌套在同一個頁面中._因此,現在對我來說更清楚爲什麼這不起作用。 也許有人有一個想法如何實現這個動態子頁面的放置或生成彈出div。 – surffan

+0

在jquery mobile中有一個名爲action sheet的插件。 ü可能會嘗試。這是鏈接到該https://github.com/hiroprotagonist/jquery.mobile.actionsheet行動表具有類似的工作和更好的用戶界面,彈出。 – theLazyFinder

回答

3

正如您在上述評論中所述,從jQm文檔'彈出的div必須與鏈接嵌套在同一頁面內。'。

你可以嘗試克隆彈出窗口並將其附加到其他頁面。然後你重新初始化並打開它。 你可以嘗試這樣的:

var nestedLiPage = $(".ui-page-active"); 
$('#popupMenu').clone().appendTo(nestedLiPage).popup().popup('open'); 
-1

[解決]

http://jsfiddle.net/F9awk/

function openEditMenu() { 
    var nestedLiPage = $(".ui-page-active"); 
    $('#popupMenu').clone().appendTo(nestedLiPage).popup().popup('open'); 
} 
+0

爲什麼這個答案被投票? :( –