Question

我正在尝试在代码中添加一些内容，以便当用户按下缩略图时，该图片会弹出或类似，因此可以查看“全屏”。

<ul data-role="listview">
    <li data-icon="false"><a href="next.php?pic=1">
        <div class="ui-block-a" style="width:50%"><p class="pic-wrapper"><img class="popphoto" src="images/pic1.png" width="150" height="150" /></p></div>
        <div class="ui-block-b" style="width:50%"><h3>Test</h3></div>
    </a></li>
    <li data-icon="false"><a href="next.php?pic=2">
        <div class="ui-block-a" style="width:50%"><p class="pic-wrapper"><img src="images/pic2.png" width="150" height="150"/></p></div>
        <div class="ui-block-b" style="width:50%"><h3>Test</h3></div>
    </a></li>
</ul>

我找到了一些信息here，但我正在计算，因为列表的整个单元格是链接/可点击的，它与tumbnail链接冲突。

我怎样才能做到这一点？

Answer 1

将click事件或任何其他事件绑定到li，并检查点击的元素（e.target）是否有popupimg类。如果为true preventDefault()，请在弹出窗口中修改img src，然后以编程方式打开它。

<强> JS

$(document).on("pageinit", "#page_id", function () {
    $("li").on("click", function (e) {
        if ($(e.target).hasClass("popphoto")) {
            e.preventDefault();
            var photo = $(e.target).attr("src");
            $("#popupimg").find("img").attr("src", photo);
            $("#popupimg").popup({
                "dismissible": false // optional
            }).popup("open");
            // adjust popup and img height on resize
            $("#popupimg").on("popupbeforeposition", function () {
                var maxHeight = $(window).height() - 60 + "px";
                $("#popupimg, #popupimg img").css("max-height", maxHeight);
            });
        }
    });
});

<强> HTML

<div data-role="popup" id="popupimg" data-overlay-theme="a" data-corners="false">
  <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  <img src="" />
</div>

<强> Demo

带有缩略图的Listview，按下弹出图像

1 个答案: