显示HTML内容jQuery的工具提示：ASP.Net直放站 [英] Display Html Content in jQuery Tooltip for ASP.Net Repeater
本文介绍了显示HTML内容jQuery的工具提示：ASP.Net直放站的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个显示标题和图像的asp.net中继器。图像出现基于一些我在直放站ItemDataBound事件做计算。
我尝试了使用jQuery提示来实现鼠标。但我只能显示在工具提示的称号。我想显示绑定到中继器等细节（errorcalls，totalcalls - 我用这些细节来执行在code后面的计算）太刀尖之内。
谁能帮我，我应该怎么办呢？我有以下code。
code为转发：
＆LT; ASP：直放站ID =rptMonitorSummary=服务器
OnItemDataBound =rptMonitorSummary_OnItemDataBound＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：面板ID =Pnl时=服务器＆GT;
＆LT;李班=UI小部件内容的UI角-TR＆GT;
＆LT; H5类=UI小部件头称号=＆LT;％＃的eval（姓名）的ToString（）％方式＆gt;＆GT;
＆LT;％＃的eval（姓名）的ToString（）长度过夜。; 9？
（EVAL（姓名）作为字符串）.Substring（0,9）：的eval（姓名）％＆GT;
＆LT; / H5＆GT;
＆LT; DIV ID =divHover＆GT;
＆LT; ASP：图像宽度=80pxID =btnPerformanceImage
=服务器HEIGHT =×45像素＆GT;＆LT; / ASP：图像＆GT;
＆LT; / DIV＆GT;
＆LT; /李＆GT;
＆LT; / ASP：面板＆gt;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：直放站＆GT;
code背后：
保护无效rptMonitorSummary_OnItemDataBound（对象发件人，RepeaterItemEventArgs E）
{
如果（e.Item.ItemType == || ListItemType.Item == e.Item.ItemType ListItemType.AlternatingItem）
{
INT errorcalls = Convert.ToInt32（DataBinder.Eval的（e.Item.DataItemErrorRatingCalls））;
INT totalcalls = Convert.ToInt32（DataBinder.Eval的（e.Item.DataItemTotalCalls））; 浮动百分比= 100 - （（（（浮点）errorcalls /（浮点）totalcalls））* 100）; 如果（百分比== GetMaxMonitorThresholdValuebyLevelId（1））
{
（（图）e.Item.FindControl（btnPerformanceImage））的ImageUrl =../Images/Level1.png。
} 否则如果（百分比＆GT = GetMinMonitorThresholdValuebyLevelId（2））
{
（（图）e.Item.FindControl（btnPerformanceImage））的ImageUrl =../Images/Level2.png。
}
}
}
的Javascript code：
$（函数（）{
（文档）$ .tooltip（）;
}）;
我用下面的CSS的工具提示：
的.ui-提示
{
文本对齐：中心;
最大宽度：180像素;
字体：12px的大胆Helvetica Neue字体，无衬线;
}
我使用下面的引用：
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery-1.9.1.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/ui/1.10.3/jquery-ui.js＆GT;＆LT; / SCRIPT＆GT;
所以基本上刀尖目前显示在一条线的标题信息是这样的：
ABC
我想显示多行是这样的：
ABC
PassPercentage = 100
解决方案
不过，可以为每个文本（repeater项目）的临时占位符。然后通过内容工具提示，当鼠标悬停。
＆LT;链接rel =stylesheet属性HREF =HTTP：//$c$c.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui。 CSS/＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.9.1.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/ui/1.10.3/jquery-ui.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;
$（函数（）{
（文档）$ .tooltip（{
项目：H5，
内容：函数（）{
VAR提示= $（本）.siblings（'提示'）;
返回tooltip.html（）;
}
}）;
}）;
＆LT; / SCRIPT＆GT;＆LT; ASP：直放站ID =rptMonitorSummary=服务器OnItemDataBound =rptMonitorSummary_OnItemDataBound＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：面板ID =Pnl时=服务器＆GT;
＆LT;李班=UI小部件内容的UI角-TR＆GT;
＆LT; H5类=UI小部件头＆GT;
＆LT;％＃的eval（姓名）的ToString（）长度过夜。; 9？ （エ（姓名）的ToString（））子串（0,9）：的eval（姓名）％＆GT;
＆LT; / H5＆GT;
＆LT; DIV CLASS =中心＆GT;
＆LT; ASP：图像宽度=50像素ID =btnPerformanceImage=服务器HEIGHT =28px＆GT;＆LT; / ASP：图像＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =工具提示的风格=显示：无＆GT;
＆LT;％＃的eval（姓名）％＆GT;＆LT; BR /＆GT;
PassPercentage =＆LT; ASP：文字=服务器ID =PassPercentageLiteral/＆GT;
＆LT; / DIV＆GT;
＆LT; /李＆GT;
＆LT; / ASP：面板＆gt;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：直放站＆GT;
保护无效rptMonitorSummary_OnItemDataBound（对象发件人，RepeaterItemEventArgs E）
{
如果（e.Item.ItemType == || ListItemType.Item == e.Item.ItemType ListItemType.AlternatingItem）
{
INT errorcalls = Convert.ToInt32（DataBinder.Eval的（e.Item.DataItemErrorRatingCalls））;
INT totalcalls = Convert.ToInt32（DataBinder.Eval的（e.Item.DataItemTotalCalls））; 浮动百分比= 100 - （（（（浮点）errorcalls /（浮点）totalcalls））* 100）; 变种文字= e.Item.FindControl（PassPercentageLiteral）作为文字;
literal.Text = Percentage.ToString（）;
....
}
}
I have an asp.net repeater that displays a title and an image. The image appears based on some of the calculations I do in the repeater ItemDataBound event.
I tried to implement a mouse over using jquery tooltip . But I can only display the title in the tooltip. I would like to display other details bound to the repeater (errorcalls, totalcalls - I use these details to perform calculations in the code behind) too within the tool tip. Can anyone help me with what I should do ? I have the code below .
Code for the repeater :
<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") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="divHover">
<asp:Image Width="80px" ID="btnPerformanceImage"
runat="server" Height="45px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
Code Behind :
protected void rptMonitorSummary_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int errorcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "ErrorRatingCalls"));
int totalcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "TotalCalls"));
float Percentage = 100 - ((((float)errorcalls / (float)totalcalls)) * 100);
if (Percentage == GetMaxMonitorThresholdValuebyLevelId(1))
{
((Image)e.Item.FindControl("btnPerformanceImage")).ImageUrl = "../Images/Level1.png";
}
else if (Percentage >= GetMinMonitorThresholdValuebyLevelId(2))
{
((Image)e.Item.FindControl("btnPerformanceImage")).ImageUrl = "../Images/Level2.png";
}
}
}
Javascript code :
$(function () {
$(document).tooltip();
});
I use the following css for the tool tip :
.ui-tooltip
{
text-align: center;
max-width: 180px;
font: bold 12px "Helvetica Neue", Sans-Serif;
}
I use the references below :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
So basically the tool tip currently shows info of the title in one line something like :
ABC
I would like to display something like this in multiple lines :
ABC
PassPercentage = 100
解决方案
jQuery tool tip doesn't allow HTML tags inside title attribute out of the box.
However, you can creates temporary place holder for each text (of repeater item). Then pass the content to tooltip when mouse hovers.
<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({
items: "h5",
content: function () {
var tooltip = $(this).siblings('.tooltip');
return tooltip.html();
}
});
});
</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">
<%# 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>
<div class="tooltip" style="display: none">
<%# Eval("Name") %><br/>
PassPercentage = <asp:Literal runat="server" ID="PassPercentageLiteral" />
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
protected void rptMonitorSummary_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int errorcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "ErrorRatingCalls"));
int totalcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "TotalCalls"));
float Percentage = 100 - ((((float)errorcalls / (float)totalcalls)) * 100);
var literal = e.Item.FindControl("PassPercentageLiteral") as Literal;
literal.Text = Percentage.ToString();
....
}
}
这篇关于显示HTML内容jQuery的工具提示：ASP.Net直放站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
