在asp.net listview itemtemplate中使用qTip

时间:2011-05-16 16:05:33

标签: asp.net listview itemtemplate qtip

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

  2. 我需要lblHelpText.Text或 &lt;%#Eval(“HelpText”)%&gt;作为 工具提示文本(内容:)

  3. 由于脚本在 ItemTemplate,它将被创建为 物品数量的很多倍。是 有一种方法可以实现这一切 通过在一个地方使用脚本 (在ItemTemplate之外)?

  4. 非常感谢您的帮助,

    阿里

2 个答案:

答案 0 :(得分: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。

答案 1 :(得分:0)

您可以简单地为图像指定一个类,然后将帮助文本绑定到图像的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移到商品模板之外。