0

按下返回按钮后，JQuery 移动对话框显示不正确。

  1. 第一次运行

    在此处输入图像描述

  2. 单击打开对话框按钮

    在此处输入图像描述

  3. 单击后退按钮

    在此处输入图像描述

  4. 再次单击打开对话框按钮

    在此处输入图像描述

单击返回按钮后，对话框页面内容将复制到来自页面。这将在添加 jquery-ui 后发生。jquery mobile dialog和jquery ui之间似乎存在冲突。或者对话内容只有几行也正常。

这是我的代码： 1.From Page

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
</head>

<body>
    <div data-role="page" class="jqm-demos" data-quicklinks="false" id="page1" style="height:600px">
        <div data-role="header" class="jqm-header">
            <h2> Test </h2>
        </div><!-- /header -->

        <div role="main"
             class="ui-content jqm-content" id="mainContent">
            <form action="/Test/TestDialog" id="form10" method="post">
                <div data-role="controlgroup"
                     data-type="horizontal" data-mini="true">
                    <a id="btnAdd" onclick="rowEdit2({ href:'/Test/TestDialogPage' + '?cmd=' })" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus">open Dialog by script</a>
                    <a href='/Test/TestDialogPage' class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">Open dialog</a>
                </div>
            </form>
        </div><!-- /content -->
    </div>
</body>
</html>
<script>
function rowEdit2(p) {
 var href = p.href;
 $.mobile.changePage(href);
}
</script>

2.对话页面

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test Dialog</title>
</head>
<body>
    <div id="TestInfoDialog" data-role="dialog">
        <div data-role="header" data-position="fixed">
            <a data-rel="back" data-icon="back">Back</a>
            <h2>Test Dialog</h2>
        </div>

        <div class="ui-content" role="main">
            <form id="TestInfoForm">
                <div>
                    <label for="test1">test1</label>
                    <input id="test1" name="test1" type="text" value="" />
                    <label for="test1">test1</label>
                    <input id="test1" name="test1" type="text" value="" />
                    <label for="test1">test1</label>
                    <label for="test1">test1</label>
                    <label for="test1">test1</label>
                    <input id="test1" name="test1" type="text" value="" />
                    <label for="test1">test1</label>
                    <input id="test1" name="test1" type="text" value="" />
                    <label for="test1">test1</label>
                    <label for="test1">test1</label>
                    <label for="test1">test1</label>
                    <input id="test1" name="test1" type="text" value="" />
                    <label for="test1">test1</label>
                    <input id="test1" name="test1" type="text" value="" />
                    <label for="test1">test1</label>
                    <label for="test1">test1</label>
                    <label for="test1">test1</label>
                    <input id="test1" name="test1" type="text" value="" />
                    <label for="test1">test1</label>
                    <input id="test1" name="test1" type="text" value="" />
                    <label for="test1">test1</label>
                    <label for="test1">test1</label>
                </div>
            </form>
        </div>

    </div>

</body>
</html>
4

0 回答 0