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

发布于 2024-12-28 15:29:51 字数 1165 浏览 0 评论 0原文

我正在使用 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>

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

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

我读过，我可以使用 data-url 但在这种情况下，不清楚我在哪里定义它（在或

包含它）以及我如何在对话框页面中提取它。

编辑

作为记录，该机制可以在标准浏览器中运行，但没有样式。

原文

I am using android 2.2, phonegap 1.3, and jquery-mobile 1.0

I have a list view in which there is an element in the list that I want to use to create a dialog. I would like my dialog to be defined in a separate file so I can reuse it and I would like it to set the title according to the value I pass.

My dialog looks something like this:

<!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>

I have tried using a #href with the title parameter (as defined below), dialog is opened but the title param isn't present.

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

I have read that I could use a data-url but in this case it is not clear where I define it (in the <a> or in a <div> which wraps it) and how I extract this in the dialog page.

EDIT

For the record the mechanism works in a standard browser but without the styling.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帥小哥 2025-01-04 15:29:51

我在下面的

<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>

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

I created the script inside the <script> tags below which listens for page show events and updates the title and placeholder for the input.

<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>

The script wasn't detected when placed in the header (presumably because the framework takes no notice of headers for dialogs)

回复收藏 0 原文

初熏 2025-01-04 15:29:51

您可以尝试删除

<!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 合二为一可能会让浏览器感到困惑。

You might try removing the

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

and only return the body html & javascript in your ajax call. Having two DOMS in one might confuse the browser.

回复收藏 0 原文

~没有更多了~