1

我在弹出窗口中有动态 URL 的问题。这是我的代码：

<!-- content -->
<ul data-role="listview">
    <li data-role="list-divider">Group 1</li>
        <li data-icon="false"><a href="person.php?id=1#popup-menu" data-rel="popup" data-transition="slideup">List 1a</a></li>
        <li data-icon="false"><a href="person.php?id=2#popup-menu" data-rel="popup" data-transition="slideup">List 1b</a></li>

    <li data-role="list-divider">Group 2</li>
        <li data-icon="false"><a href="person.php?id=3#popup-menu" data-rel="popup" data-transition="slideup">List 2a</a></li>
</ul><!-- /content -->

<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
    <ul data-role="listview" style="min-width:210px;">
        <li data-role="divider">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Share</a></li>
    </ul>
</div><!-- /popup-menu -->

基本上，当我单击弹出窗口上的链接时，我将转到被调用者 url所在的页面。

因此，如果我单击弹出窗口显示的列表 1a，然后单击查看详细信息页面将我定向到 URL person.php?id=1

我怎样才能做到这一点？

我可以根据列表的数量多次创建弹出 div，但我认为这是浪费 DOM 对象（如果我没有找到任何优雅的解决方案，我最后的手段）

谢谢

4

1 回答 1

2

由于您实际上只需要将一个人的 id 传递给您的弹出窗口，您可以通过以下方式实现您的目标：

首先简化您的列表视图标记并存储列表视图项的锚点的idin属性data-id

<ul data-role="listview" id="list">
    <li data-role="list-divider">Group 1</li>
        <li data-icon="false"><a href="#" data-id="1">List 1a</a></li>
        <li data-icon="false"><a href="#" data-id="2">List 1b</a></li>

    <li data-role="list-divider">Group 2</li>
        <li data-icon="false"><a href="#" data-id="3">List 2a</a></li>
</ul>

并将id标签添加到弹出窗口中的“查看详细信息”锚点，以便稍后访问

<li><a id="details" href="#">View details</a></li>

第二个事件click()将当前 id 存储到全局可用变量（我们称之为currentId）并以编程方式打开弹出窗口。

var currentId = 0;
...
$('#page').on('pageinit', function(){
    $('#list li a').click(function(e){
        e.preventDefault();
        currentId = $(this).attr("data-id");
        $("#popup-menu").popup("open", {transition:"slideup"} );
    });
});

第三个事件popupbeforeposition构建您的网址并将其分配给适当的锚。

var baseURL = "person.php?id=";
...
$('#popup-menu').on('popupbeforeposition', function(){
    $("#details").attr("href", baseURL + currentId);
});

最后，这里是为您工作的jsFiddle。

于 2013-03-01T10:34:12.640 回答