在 asp.net listview itemtemplate 中使用 qTip

Question

我正在尝试在 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>

我的问题：

1. 这样 Id 就很难了 编码，因此仅适用于一项。我 找不到一个选择器 为我选择 Id。

2. 我需要 lblHelpText.Text 或 <%# Eval("帮助文本")%>作为 工具提示文本（内容：）

3. 由于脚本位于 ItemTemplate，它将被创建为 项目数量的许多倍。是 有一种方法可以实现这一切 通过将脚本放在一处 （在 ItemTemplate 之外）？

，我们将非常感谢您的帮助

阿里

Answer 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。

Answer 2

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

ItemTemplate：

<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”属性，其执行方式相同。或者，您可以将文本包含在隐藏元素中。这会更复杂一点，可能会这样做：

ItemTemplate:

<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 use title tag if present as content by default):

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

编辑：

忘记提及，使用这些解决方案，您可以将 JavaScript 移到外部您的项目模板。