转发器内有多个弹出窗口

时间：2014-10-26 22:07:16

标签： jquery html asp.net jquery-mobile repeater

我正在创建一个移动网站，其中列出了摩托车模型的图片。我创建了每个图片的列表list-item，并在div内添加了data-rel="popup" list-item。一切都正确编译和运行，但我在列表中单击的任何图像只显示第一个图像。即，当单击列表中的第3个列表项并打开弹出窗口时，将显示图像＃1。对于列表中的每个链接也是如此。

你知道为什么这样做吗？我知道我可以通过创建另一个jquery页面来解决这个问题，然后重定向到那个，但是弹出窗口更清晰，我很好奇如何显示正确的图像，或者我是否忽略了什么？

所有图像和数据都存储在sql server数据库中

以下是代码：

<div data-role="content">
    <div id="SelectedPictorialDiv" runat="server">
        <ul data-role="listview" id="SelectedPictorialList">
            <asp:Repeater ID="SelectedPictorialRepeater" runat="server" DataSourceID="SelectedPictorialSqlDataSource"> 
                <ItemTemplate>
                    <li>
                        <a href="#SinglePicturePopup" data-rel="popup"> 
                            <asp:ImageButton ID="SelectedImageImageButton" runat="server" ImageURL='<%# Eval("ImageURL") %>' Width="75px" />
                            &nbsp&nbsp;<asp:Label ID="SelectedImageNumberLabel" runat="server" Text='<%# Eval("ImageNumber") %>'></asp:Label>
                            <asp:HiddenField ID="SelectedImagePictorialNumberHiddenField" runat="server" Value='<%# Eval("PictorialNumber") %>' />
                        </a>
                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                            <asp:Image ID="PopupImage" runat="server" ImageUrl='<%# Eval("ImageURL") %>' Width="100%" />
                        </div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
        <asp:SqlDataSource ID="SelectedPictorialSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:KgIndex %>" 
            SelectCommand="SELECT ModelID, ImageURL, ImageNumber, PictorialNumber FROM Test_Models_Image WHERE ModelID = @modelID AND PictorialNumber = @pictorialNumber ORDER BY ImageNumber" >
            <SelectParameters>
                <asp:QueryStringParameter Name="modelID" QueryStringField="ModelID" Type="String" Direction="Input" />
                <asp:QueryStringParameter Name="pictorialNumber" QueryStringField="Pictorial" Type="String" Direction="Input" />
            </SelectParameters>
        </asp:SqlDataSource>
    </div>
</div>

这是呈现的HTML：*顶部的jquery是我正在努力根据名称导航列表的一部分

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>


    <!--STANDARD JQUERY-->
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /><link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine" /><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine&amp;effect=shadow-multiple|3d-float" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="JQuery/jquery-ui.js"></script>
    <script src="JQuery/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="JQuery/jquery-ui.css" /><link rel="stylesheet" href="JQuery/jquery-ui.min.css" /><link rel="stylesheet" href="JQuery/jquery-ui.theme-smooth.css" /><link rel="stylesheet" href="JQuery/jquery-ui.theme.min-smooth.css" />




    <!--JQUERY MOBILE-->
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-1.4.3.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-1.4.3.min.js"></script>

    <script type="text/javascript">
        $.mobile.document.on("pagecreate", "#MainPage", function () {
            var head = $(".ui-page-active [data-role='header']");
            $.mobile.document.on("click", "#sorter li", function () {
                var top,
                    letter = $(this).text(),
                    divider = $("#sortedList").find("li.ui-li-divider:contains(" + letter + ")");
                if (divider.length > 0) {
                    top = divider.offset().top;
                    $.mobile.silentScroll(top);
                } else {
                    return false;
                }
            });
            $("#sorter li").hover(function () {
                $(this).addClass("ui-btn").removeClass("ui-li-static");
            }, function () {
                $(this).removeClass("ui-btn").addClass("ui-li-static");
            });
        });
        $(function () {
            $.mobile.window.on("scroll", function (e) {
                var headTop = $(window).scrollTop(),
                    foot = $(".ui-page-active [data-role='footer']"),
                    head = $(".ui-page-active [data-role='header']"),
                    headerheight = head.outerHeight();
                if (headTop < headerheight && headTop > 0) {
                    $("#sorter").css({
                        "top": headerheight + 15 - headTop,
                        "height": window.innerHeight - head[0].offsetHeight + window.pageYOffset - 10
                    });
                    $("#sorter li").height("3.7%");
                } else if (headTop >= headerheight && headTop > 0 && parseInt(headTop +
                    $.mobile.window.height()) < parseInt(foot.offset().top)) {
                    $("#sorter").css({
                        "top": "15px",
                        "height": window.innerHeight - 8
                    });
                    $("#sorter li").height("3.7%");
                } else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top) &&
                    parseInt(headTop + window.innerHeight) <= parseInt(foot.offset().top) +
                    foot.height()) {
                    $("#sorter").css({
                        "top": "15px",
                        "height": window.innerHeight - (parseInt(headTop + window.innerHeight) -
                            parseInt(foot.offset().top) + 8)
                    });
                } else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top)) {
                    $("#sorter").css({
                        "top": "15px"
                    });
                } else {
                    $("#sorter").css("top", headerheight + 15);
                }
            });
        });
        $.mobile.window.on("throttledresize", function () {
            $("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
        });
        $.mobile.document.on("pageshow", "#MainPage", function () {
            var headerheight = $(".ui-page-active [data-role='header']").outerHeight();
            $("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
        });
    </script>

</head>
<body style="height: 100%">
    <form method="post" action="MViewSinglePictorial.aspx?ModelID=54&amp;Pictorial=1" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="NtunFH788MQGLcGyEh8HoEOdwbObwbacfVa/s8udGTFe/UkrCRJNxrRKCnBmeHyR6D35FD/Hva0TbXOMtMY4AoPO7qph/zkehvgprXlu9PO7V9/p4kjdfu/H+D9cxJTr9HRL4a+IYOQyWlyM5u/h8yUB+NmNevjV79ocimb7ZPhu+rHb/v5j8+G20jr+qWuL0HJ1KPeEIwT61PWdL+unaFxg0iDBv4yKpJRBt6XZ4w7je7/HQrW1idea3rrUyP3RRpNdQVgg6rkEQXfzDg1w2FApc5la9MLVmxN5Z54NUxxervspKMIZFQGZ155yxlFRn4HPCJ11XcgjeG8r2nXKT2ybhjip32pSNDBRQpGqL4uoHTix6RJWxGXJQtg3ssK22TX+8AB9YUNCKa7SCYJzuCDl8Ri3n5A3yQRyYVi4O6K2TmRBgesR8oBNtLVthcPb8lmcsm4kQkJsiXoam8hC3O7CKQmhRcSuq7GkWEaJCKg/7jYHUOezcUv5g4KYk7U2Mcp/YUcO+g6B7MMWiYBMLn944h6EVEoPtUBWLd36sY1V7RtfWo5KgeXARKZwA5o5RKTCSkDSBlwRu6frjCNL+11iKY+VKEIMQtDkgeo03eR2xGo1G7MaLfOrrhCDocE0g4zSNVU6AXXI8m7jFC+ca6Rd51b34TAojyC54iYN5g0Qvo6VPKgXqrDOjEBj3wiB4oF3V/HI0JL6K2+BKQ3C35SihGtNbLr5swq+EkYvNDeDvj8KaS0GNe8wigGzcGChtfrMg7Y5W799xPFIb8hhSToU4czDz69PslwFhLRDyQV02QP+vg+ZWhnWbKaOO+M25BNBRu1OlYPgLzQjRZtPyPkJqBKeX77FQn7MSho+8oKdKwPsnLdDOJ+YsRKWvX1Rx0Fz7mOJVtTEbKu0ro2miAR1M1xzpYMUZAYzM7hr0Jzo+0c4gszyePavEj5cfIotOQ75Qecd2CgHgMum/s7m2VcI30dszd2JsunKv1YEWzN0GT61lAjd+rcn7O3DfI3oEqurABKpiE+R4kfwuBVk7wmxpMTtMKuowVOXVck0MCCaGVt0WzUGiSHLzUbXm0l2PhQt9rUGnyJ3hCnq2oCOtXhgqSMBslfYa8dUzx/VY93vDVkh+3jhKOfDhCAUg6+6l06nybh07E/W2mHYicCEQplwyojMecYywXsAFuh8p8jDXlqdQWKvwhObc1PLTOwgqfo6kbbdhAWSVMTYJzIoxIh3Up/G3Tb9rzZumHlczVhWh3NKsd3uRx6tH9XDnURspHzkSoq+PTpEwQ7yOvieA4wGfWojv/ti6OQ4iZlGGRm9/IV7/oyTLQIVoOszz6g0rQmGxaB8CzIaqu8x/uLxXWh+EqBEqy+njoV+UcDUjs9UgV7lmJGUKMT0Fu6fwCZZHwaaJWyPXr/+UTwIT8h/ZCFAg4Et5ErRUKRdZjh78FUIEuE0Kam0ovpwgkGtQ+aWGQAp18dgs8ofwcODrN1ULELf/AonI05kZT0Ucg9L1bdsiSoaMXP9g+PwUWRpproGafMMytF/fSvbESmcFt+GJw2lgfPFgaEZe1uR8A3PgSSmtLNqmi+0szL39ob2U67qdqWbtsU2HoBTqaf2WWsjf1mdQpUsZFPhTVRB9KiZosWoKXyChuhjEzkdWoH/PgjYN+0lRPhTZL4mteJpAfqGvA==" />
</div>


    <script type="text/javascript">
        function ViewSingleImage(selectedDetails) {
            //array[0] = image number
            //array[1] = pictorialNumber
            //array[2] = modelID
            var array = selectedDetails.split(',');
            window.location.href = "MViewSinglePicture.aspx?ModelID=" + array[2] + "&pictorial=" + array[1] + "&image=" + array[0];
        }

        function Redirect(location) {
            if (location == "Dashboard") {
                window.location.href = "MDashboard.aspx";
            }
            else if (location == "Models") {
                window.location.href = "MViewModels.aspx";
            }
        }
    </script>
    <div id="MainContent_MainPage" data-role="page" data-url="MainPage" style="height: 100%" data-theme="a">
        <div data-role="header" data-theme="b" data-position="fixed">
            <div data-role="navbar" class="ui-icon-heart" data-grid="b">
            <ul>
                <li><a id="HomeA" class="ui-icon-home" onclick="Redirect('Dashboard');" data-icon="custom"></a></li>
                <li><a id="ModelsA" class="ui-icon-bullets" onclick="Redirect('Models');" data-icon="custom"></a></li>
                <li><a id="SearchModelsA" class="ui-icon-search" onclick="Redirect('Models');" data-icon="custom"></a></li>
            </ul>
            </div>
        </div>
        <div data-role="main" class="ui-content">
            <div data-role="body">
                <p>Images</p>

                <div data-role="content">
                    <div id="MainContent_SelectedPictorialDiv">
                        <ul data-role="listview" id="SelectedPictorialList">

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_0" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_0">1</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_0" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_0" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_0" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_1" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_1">2</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_1" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_1" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_1" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_2" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_2">3</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_2" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_2" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_2" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_3" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_3">4</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_3" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_3" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_3" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                        </ul>


                        <span id="MainContent_SelectedPictorialLabel"></span>
                        <input type="hidden" name="ctl00$MainContent$ModelIDHiddenField" id="MainContent_ModelIDHiddenField" />
                        <input type="hidden" name="ctl00$MainContent$SelectedPictorialHiddenField" id="MainContent_SelectedPictorialHiddenField" />
                    </div>
                </div>
            </div>
        </div>
    </div>


<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="rcVSDhHOh/VCV4xvZW1xySlgIk+aKBCHWnqXQ/hbRyJ3Q+19pQPrrjB8bdWGFG8Os0xdxZMZQZINDmkHDm1+4DTPwLkjXqC+3lHpYvBzjNOAZSPI9ZLjeK7GpS/Qqwlzw+yGLFoO7IPk2hVzdFndH4en1nBGJuB3fF5+/jPr8dUi7oHYnloqnnYr1bmoqJMyYqf/iAf4gr9vfMA4L7LhvOqOMx/MaTeuTZDXFwjkROfwODzrE3fNaT8UCGvRPeRtR6z1xhfSzsZX6/YrPxrfP8pAzqmM/WcxvQvjwgS9G+VPdoByMI1vbqLLRgmT2C0T4HrkHC54DZCHQuIy3NqZB8woDZP5pe2jjOJF44LeTwngdosmRqjwIsN1QMXoFh24fi3TVmnXm3jHyJCmRa51wA==" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"c17b133f1b354c05bd3175a66999aee5"}
</script>
<script type="text/javascript" src="http://localhost:54681/00b84f193a774765ab59c6705f4e8d6b/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

1 个答案:

答案 0 :(得分：1)

您可以简单地创建一个全局弹出窗口并更新其中的＆＃39;而不是创建多个弹出窗口来实现相同的目的。内容基于点击的 listview 项目。

将所有 listview 项目设为class，并在页面的pagecrate附加事件听众。

<li>
   <a href="#" class="thumb">
      <input type="image" src="img.jpg"/>
   </a>
</li>

在页面div 中创建一个弹出窗口。

<div id="myPopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
</div>

listview 项目收到事件后，检索弹出，列表视图项和图像src 。将检索到的图像插入弹出窗口，然后在加载图像后将其打开，以确保弹出窗口位于列表视图项。

$(document).on("pagecreate", "#pageID", function () {
    /* attach event listener */
    $(".thumb").on("click", function (e) {
        /* retrieve data */
        var popup = $("#myPopup"),
            elm = $(this),
            img = $("input", elm).attr("src");
        /* insert img into popup and the open it */
        popup.html($("<img/>", {
            src: img
        }).one("load", function (e) {
            popup.popup("open", {
                positionTo: elm
            });
        }));

    });
});
  

<强> Demo

相关问题
最新问题