Question

在JQuery Mobile 1.3.1上，我使用$.mobile.changePage将外部视图加载到dom中，并使用我认为是将视图作为对话框加载的正确选项。我的问题是这个视图加载，一切都增强但我丢失了对话框上的圆角。按钮具有正确的角，它只是对话框的边缘。当我检查对话框时，看起来它在div上正确地具有ui-corner-all类，但我想它没有被增强？有什么想法吗？

function OpenRestoreFromBackupDialog()
{  
    if(selectedDeviceIDArray.length == 1){
        $.mobile.changePage( "../Mobile/Device/RestoreFromBackup", {
            transition: "pop",
            role: "dialog",
            //reloadPage: true,
            data:
            {
                deviceID: selectedDeviceIDArray[0],
            }
        });
    }
}

在这里加载外部页面（MVC局部视图）......

<div data-role="dialog" id="RestoreFromBackup" data-theme="c">
    <form id="RestoreFromBackupForm" action="../Device/RestoreFromBackup" method="post">
    <div data-role="header" data-close-btn="left" data-theme="c">
        <h1>Restore from Backup</h1>
    </div>
    <div data-role="content" data-theme="c">
       content!
    </div>
    <div data-role="footer" data-theme="c" style="padding: 10px;">
        <a href="#" data-role="button" data-inline="true" data-theme="e" onclick="RestoreFromBackup();">Restore from Backup</a>&nbsp;
        <a href="#" data-role="button" data-rel="back" data-inline="true" data-theme="c">Cancel</a>
    </div>
    </form>
</div>

Answer 1

发现问题：

https://github.com/jquery/jquery-mobile/pull/4290

我有一个标题/内容/页脚之外的表单。然而，这是一个固定的问题。

Answer 2

工作示例：http://jsfiddle.net/Gajotres/42DhH/

HTML：

    <div data-role="page" id="index">
        <div data-theme="b" data-role="header">
            <h1>Index page</h1>
        </div>

        <div data-role="content">
            <a data-role="button" id="click-me">Click me</a>
        </div>
    </div>    
    <div data-role="dialog" id="RestoreFromBackup" data-theme="c" >
        <div data-role="header" data-close-btn="left" data-theme="c">
            <h1>Restore from Backup</h1>
        </div>
        <div data-role="content" data-theme="c">
            <form id="RestoreFromBackupForm" action="../Device/RestoreFromBackup" method="post" class="ui-btn-corner-all">
                content!
            </form>                                    
        </div>
        <div data-role="footer" data-theme="c" style="padding: 10px;">
            <a href="#" data-role="button" data-inline="true" data-theme="e" onclick="RestoreFromBackup();">Restore from Backup</a>&nbsp;
            <a href="#" data-role="button" data-rel="back" data-inline="true" data-theme="c">Cancel</a>
        </div>
    </div>

由于表单位置不正确，导致您的问题。表单应该在data-role =“content”div中。基本上data-role =“page”应该只有5种内部元素：data-role =“content”，data-role =“header”，data-role =“footer”，data-role =“dialog”，data -role = “弹出”

圆角落在changePage上丢失到外部Dialog

2 个答案:

HTML：