中继器内的多个弹出窗口
Posted
技术标签:
【中文标题】中继器内的多个弹出窗口【英文标题】：Multiple popups inside repeater 【发布时间】：2014-12-22 02:22:32 【问题描述】：我正在创建一个移动网站，其中包含摩托车模型的图片列表。我将每个图像的列表创建为list-item，并在list-item 中添加了div 和data-rel="popup"。一切都可以正确编译和运行，但是我在列表中单击的任何图像都只显示第一张图像。即，当单击列表中的第三个列表项并打开弹出窗口时，将显示图像#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" />
  <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&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&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;" />
  <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;" />
  <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;" />
  <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;" />
  <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>
【问题讨论】：
你能发布渲染的html吗？ 我添加了渲染后的html，可以看到，正确的URL在您可以简单地创建一个全局弹出窗口并根据单击的 listview 项更新其内容，而不是创建多个弹出窗口来实现相同的目的。
给所有listview 项一个class 并在页面的pagecrate 上附加一个事件 监听器。
<li>
<a href="#" class="thumb">
<input type="image" src="img.jpg"/>
</a>
</li>
在 page div 内创建一个弹出窗口。
<div id="myPopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
</div>
一旦 listview 项目收到 事件，检索 popup、listview 项目 和 image src 。将检索到的图像插入到 popup 中，然后在图像加载后将其打开，以确保弹出框定位到 listview 项。
$(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
【讨论】：
再次感谢@Omar！你再简单不过了。为我节省了数小时的头痛！以上是关于中继器内的多个弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章
弹出窗口内的 UIPrintInteractionController