从单独的html文件中显示对话框并向其传递参数

Showing a dialog from a separate html file and passing it a parameter

本文关键字：参数 对话框 显示 单独 html 文件      更新时间：2023-09-26

我使用的是android 2.2、phonegap 1.3和jquery mobile 1.0

我有一个列表视图，其中列表中有一个元素，我想用它来创建对话框。我希望我的对话框被定义在一个单独的文件中，这样我就可以重用它，我希望它根据我传递的值设置标题

我的对话框看起来像这样：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
    $("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
<div data-role="page" class="ui-page-z">
        <div data-role="header" data-theme="z" class="ui-bar-z">
    <h1 id="title"></h1>
    </div>
    <div data-role="content">
       ...
    </div>
</div>
</body>
</html>

我尝试使用带有title参数的#href（如下定义），对话框已打开，但title参数不存在。

<ul data-role="listview" data-theme="a">
    ...
    <li><a href="dialog.html?title=blah" data-rel="dialog"/></li>
    ...
</ul>

我读到我可以使用data-url，但在这种情况下，我不清楚我在哪里定义它（在<a>或包装它的<div>中），以及我如何在对话框页面中提取它。

编辑

对于记录，该机制在标准浏览器中工作，但没有样式。

我在下面的<script>标记中创建了脚本，该标记侦听页面显示事件并更新输入的标题和占位符。

<div data-role="page" class="ui-page-z">
    <div data-role="header" data-theme="z" class="ui-bar-z">
        <h1 id="title">
        </h1>
    </div>
    <div data-role="content">
        <input placeholder="Type here..." id="configtext">
        </input>
    ...
    <script type="text/javascript">
        $("div.ui-page-z").live("pageshow", function(event, ui) {
            var dataUrl = $(".ui-page-active").attr("data-url");
            $("#title").empty();
            $("#title").append(SMSPLUS.getValue("title", dataUrl));
            $("#configtext").attr("placeholder", SMSPLUS.getValue("placeholder", dataUrl));
                    });
    </script>
</div>

当脚本放在头中时没有检测到（可能是因为框架没有注意到对话框的头）

您可以尝试删除

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
    $("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
</body>

并且只返回正文html&ajax调用中的javascript。将两个DOMS放在一起可能会混淆浏览器。

相关文章：