我嘗試創建一個listview,其中沒有子元素的元素可以有編輯按鈕。當用戶點擊這個按鈕時,應該出現一個彈出菜單。jQuery Mobile - 在嵌套列表視圖中彈出
這裏是一個燎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.
感謝竅門或建議。
如果你檢查它啓用了彈出式DIV(給定的寬度和高度)的HTML,但仍沒有顯示... – Calavoow
如果我看看頁面加載時的DOM。 JQM使用'data-url =「home&ui-page = 0-0」創建了一個新頁面。因此,當您切換到子頁面並單擊該按鈕時,彈出窗口會更改其可見性,但不會顯示。我建議這是因爲它位於「主頁」頁面而不是活動頁面。 在JQM文檔中有一個通知_A彈出的div必須與鏈接嵌套在同一個頁面中._因此,現在對我來說更清楚爲什麼這不起作用。 也許有人有一個想法如何實現這個動態子頁面的放置或生成彈出div。 – surffan
在jquery mobile中有一個名爲action sheet的插件。 ü可能會嘗試。這是鏈接到該https://github.com/hiroprotagonist/jquery.mobile.actionsheet行動表具有類似的工作和更好的用戶界面,彈出。 – theLazyFinder