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>

我的问题：

这种方式很难编码，因此仅适用于一个项目。一世无法找到一个选择器为我选择ID。
我需要lblHelpText.Text或＆lt;％＃Eval（“HelpText”）％＆gt;作为工具提示文本（内容:)
由于脚本在 ItemTemplate，它将被创建为物品数量的很多倍。是有一种方法可以实现这一切通过在一个地方使用脚本（在ItemTemplate之外）？

非常感谢您的帮助，

阿里

Answer 1

你可以在listview之外做，但你需要重构你的设计;您需要一个包装整个项目的全局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

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

的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默认使用标题标签作为内容）：

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

编辑：

忘记提及，使用这些解决方案，您可以将JavaScript移到商品模板之外。

在asp.net listview itemtemplate中使用qTip

2 个答案: