在 asp.net listview itemtemplate 中使用 qTip答案

【问题标题】：using qTip inside asp.net listview itemtemplate在 asp.net listview itemtemplate 中使用 qTip
【发布时间】：2011-05-16 16:05:32
【问题描述】：

我正在尝试在 ASP.NET ListView 中使用 qTip。该页面使用 MasterPage。每个项目中有一个图像，悬停时将显示一个 DataBound 值。

下面是我的 ItemTemplate 代码：

<ItemTemplate> 

    <p> 
        <%# Eval("Name")%>
        &nbsp;&nbsp;
        <asp:Image ID="imgInfo" runat="server" 
                   align="right" 
                   ImageUrl="~/App_Themes/Default/images/question.png" />
    </p> 

    <asp:TextBox ID="txtValue" runat="server" 
                 TextMode="MultiLine" 
                 Rows="4" 
                 SkinID="dummy" 
                 Text='<%# Bind("Value") %>' />

    <asp:Label ID="lblHelpText" runat="server" 
               Text='<%# Eval("HelpText")%>'  
               Visible="false" />

    <script language="javascript" type="text/javascript"> 

        $('[#ContentPlaceHolder1_lvStep1_imgInfo_0]').qtip({ 

            content: 'the tooltip text, I want text of lblHelpText here', 
            style: { name: 'blue' } 

        });

    </script> 

</ItemTemplate>

我的问题：

这样Id很难编码，因此仅适用于一项。一世找不到一个选择器为我选择 ID。
我需要 lblHelpText.Text 或作为工具提示文本（内容：）
由于脚本位于 ItemTemplate，它将被创建为项目数量的许多倍。是有一种方法可以实现这一切通过将脚本放在一个地方（在 ItemTemplate 之外）？

您的帮助将不胜感激，

阿里

【问题讨论】：

标签： asp.net listview itemtemplate qtip

【解决方案1】：

您可以在列表视图之外执行此操作，但您需要重构您的设计；你需要一个包裹整个项目的全局 HTML 元素，例如：

<div class='ItemContainer'>
  .
  .
</div>

重构你的脚本：

$("#<%= listview.ClientID %>").find("<div.ItemContainer").each(function(i) {
   var img = $(this).find("img:first");
   //give the label a CSS class of.HelpText to make it easier to find
   var content = $(this).find("span.HelpText").html();

   $(img).qtip({ 

            content: content, 
            style: { name: 'blue' } 

        });
});

类似的东西。

HTH。

【讨论】：

【解决方案2】：

您可以简单地为图像分配一个类，然后将帮助文本绑定到图像的标题属性中。

项目模板：

<asp:Image ID="imgInfo" runat="server" 
    CssClass="listViewImage" align="right" 
    ImageUrl="~/App_Themes/Default/images/question.png" />

绑定：

((Image)MyListView.Controls.Find("imgInfo")).Title = HelpText;

如果您不通过代码绑定，也可以在您的标记中执行此操作：

<asp:Image ID="imgInfo" runat="server" 
    CssClass="listViewImage" align="right" 
    Title='<%# Eval("HelpText")%>'
    ImageUrl="~/App_Themes/Default/images/question.png" />

qTip Init（qTip 默认使用标题标签，如果作为内容存在）：

$('img.listViewImage').qtip({
    style: { 
        name: 'blue'
    }
});

如果您不想使用标题标签，您可以使用“alt”或“rel”属性，它们的执行方式相同。或者，您可以将文本包含在隐藏元素中。那会有点复杂，可能会这样做：

项目模板：

<span class="listViewImage">
    <asp:Image ID="imgInfo" runat="server" 
        align="right" 
        ImageUrl="~/App_Themes/Default/images/question.png" />
    <span class="helpText" style="display: none;"><%# Eval("HelpText")%></span>
</span>

qTip Init（qTip 默认使用标题标签，如果作为内容存在）：

$('span.listViewImage img').each(function() {
    $(this).qtip({
        content: $(this).find('span.helpText').html(),
        style: { 
            name: 'blue'
        }
    });
});

编辑：

忘了提一下，使用这些解决方案，您可以将 javascript 移到项目模板之外。

【讨论】：