jQM v1.4.0.RC.1和弹出窗口

时间:2013-11-25 23:21:13

标签: jquery-mobile

我遇到了使用v1.4.0.RC.1的嵌套弹出窗口的问题。它适用于v1.3.2。我有一个页脚,它有一个按钮,打开一个弹出窗口,其中包含一个列表视图,其中一个列表项打开一个弹出窗口。同样,在v1.3.2中,这可以按预期工作......但不适用于v1.4.0.RC.1。我知道v1.4还没有出来,但无论如何我都提出这个问题,因为有人可能会有一些我尚未想出的见解。我有两个版本的小提琴。每个代码完全相同。唯一的区别是第一个小提琴使用1.3.2库,第二个小提琴使用v1.4.0库。

此外,我已经看到链接到jQM弹出页面的答案,显示页面本身表明不允许链接弹出窗口。但是,这通常是jQM的v1.2.0。 v1.3.2中的弹出演示并没有表明这种限制,并且事实上它确实有效(见下面的小提琴)。

话虽如此,如果有人有任何指导或信息,我真的很感激。我已经完成了有限的1.4.0文档和互联网,我唯一能想到的就是在setTimeout事件中执行popupafterclose以打开另一个弹出窗口。这对我来说似乎是一个草率的黑客攻击,如果可能的话,我想避免这样做。

无论如何,下面是1.3.2和1.4.0.RC.1的代码和小提琴。

谢谢!

<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
    <h1>Popups from popups using jQM-1.3.2</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
    With jQM-1.3.2, the menu button down there opens a popup window as a menu.  In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
        <a href="#mnuSelectedItemsMenu" id="btnItemMenu" data-transition="none" data-rel="popup" data-role="button" data-icon="bars">Menu <--- Click this...</a>
    </div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
    <ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
        <li><a href="#" id="mnuDoEditTransaction" data-icon="edit" data-iconpos="right">Edit</a></li>
        <li><a href="#popupConfirmDelete" id="mnuConfirmDelete" data-icon="delete" data-iconpos="right" data-rel="popup">Delete <--- ...then this</a></li>
        <li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
        <li><a href="#" id="mnuDoSelectAllItems" data-icon="check" data-iconpos="right">Select All</a></li>
    </ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
    <div class="ui-corner-top" data-role="header">
        <h1>Delete Transaction</h1>
    </div>
    <div class="ui-corner-bottom ui-content" data-role="content" >
        <h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
        <p>This action cannot be undone!</p>
        <div class="ui-grid-a point6em" style="margin-top:10px;">
            <div class="ui-block-a">
                <a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
            </div>
            <div class="ui-block-b point6em">
                <a data-role="button" data-rel="back" data-mini="true">Cancel</a> 
            </div>
        </div>
    </div>
</div>

fiddle for v1.3.2 above

<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
    <h1>Popups from popups using jQM-1.4.0.RC.1</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
    With jQM-1.3.2, the menu button down there opens a popup window as a menu.  In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
        <a href="#mnuSelectedItemsMenu" id="btnItemMenu" data-transition="none" data-rel="popup" data-role="button" data-icon="bars">Menu <--- Click this...</a>
    </div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
    <ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
        <li><a href="#" id="mnuDoEditTransaction" data-icon="edit" data-iconpos="right">Edit</a></li>
        <li><a href="#popupConfirmDelete" id="mnuConfirmDelete" data-icon="delete" data-iconpos="right" data-rel="popup">Delete <--- ...then this</a></li>
        <li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
        <li><a href="#" id="mnuDoSelectAllItems" data-icon="check" data-iconpos="right">Select All</a></li>
    </ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
    <div class="ui-corner-top" data-role="header">
        <h1>Delete Transaction</h1>
    </div>
    <div class="ui-corner-bottom ui-content" data-role="content" >
        <h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
        <p>This action cannot be undone!</p>
        <div class="ui-grid-a point6em" style="margin-top:10px;">
            <div class="ui-block-a">
                <a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
            </div>
            <div class="ui-block-b point6em">
                <a data-role="button" data-rel="back" data-mini="true">Cancel</a> 
            </div>
        </div>
    </div>
</div>

fiddle for v1.4.0.RC.1 above

0 个答案:

没有答案