[英]Binding mouseover event to asp.net repeater
我有一個顯示標題和圖像的asp.net轉發器。 標題很長,所以我想在鼠標懸停時再次顯示標題。
我試圖實現鼠標懸停,但存在以下問題。
我的顯示如下:
Repeater Element 1 Repeater Element 2
Title 1 Title 2
Image 1 Image 2
現在,在Element1上進行鼠標懸停時,我的鼠標懸停顯示Title1。 在Element2上進行鼠標懸停時,我的鼠標再次顯示Title1,我希望它顯示Title2嗎? 誰能指出我如何實現這一目標。
我的代碼如下:
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server" onmouseover="return showsamplepopup();" onmouseout="return hidesamplepopup();">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">
<%# Eval("Name").ToString().Length > 9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="popup" style="position: absolute; width: 80px; height: auto; background-color: Lime;
border-bottom: solid 3px gray; display: none; border-right: solid 3px gray; display: none;">
<%#Eval("Name")%>
</div>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
javascript函數如下:
function hidesamplepopup() {
document.getElementById('popup').style.display = 'none';
return false;
}
function showsamplepopup(e) {
e = (e) ? e : window.event;
var element = (e.target) ? e.target : e.srcElement;
var left = element.offsetLeft;
var top = element.offsetTop;
while (element = element.offsetParent) {
left += element.offsetLeft;
top += element.offsetTop;
}
document.getElementById('popup').style.display = 'block';
document.getElementById('popup').style.left = left;
document.getElementById('popup').style.top = top;
return false;
}
注意, getElementById
將返回具有該ID的第一個元素。 而且您為Div的ID使用相同的ID。
您應該為轉發器的每個項目使用不同的ID(為每個轉發器生成不同的ID),或者更改邏輯以通過其他屬性來獲取它們。 我強烈建議也使用jQuery。
我不知道你有什么要求。 如果使用jQuery工具提示,可能會容易得多。
這只是一種替代方法。
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip();
});
</script>
<asp:Repeater ID="rptMonitorSummary" runat="server"
OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header" title="<%# Eval("Name").ToString() %>">
<%# Eval("Name").ToString().Length > 9 ?
(Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%>
</h5>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage"
runat="server" Height="28px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
我將更改將事件綁定到元素的方式,因為示例代碼不使用jQuery,我假設您不想要它:)
首先,您需要將一個類添加到asp:panel,以便可以使用某種方式來標識和選擇所有實例。 另外,您將要使用彈出窗口類而不是ID,因為ID在頁面上應該是唯一的。
那么您可以執行以下操作:
var elements = document.querySelectorAll('.thatClassYouAdded'),
i = 0, l = elements.length;
for(;i<l;i++)
{
elements[i].addEventListener('mouseover', function(e) {
var popup = this.querySelector('.popup');
//do some stuff to popup
});
}
還需要注意的是,舊版瀏覽器(請參閱https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector了解更多信息和支持表)和較舊的IE(不支持pre 9)使用attachEvent代替addEventListener,您可能需要編寫其他代碼來支持
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.