Блог

Я пытаюсь использовать qTip внутри ASP.NET Просмотр списка. Страница использует главную страницу. В каждом элементе есть изображение, которое при наведении курсора мыши будет отображать значение, привязанное к базе данных.

Ниже приведен мой код ItemTemplate:

 <ItemTemplate> 

    <p> 
        <%# Eval("Name")%>
        amp;nbsp;amp;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. Таким образом, идентификатор был жестко запрограммирован, поэтому работает только с одним элементом. Я не смог найти селектор, который выбирал бы идентификаторы для меня.

2. Мне нужен lblHelpText.Текст или <%# Eval(«HelpText»)%> в качестве текста всплывающей подсказки (содержимое : )

3. Поскольку скрипт находится внутри ItemTemplate, он будет создан во столько раз, во сколько элементов. Есть ли способ, которым я могу достичь всего этого, имея скрипт в одном месте (вне ItemTemplate)?

Мы будем очень признательны за вашу помощь,

Али

Вы могли бы сделать это вне 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.

Вы могли бы просто присвоить класс своим изображениям, а затем привязать текст справки к атрибуту 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 (qTip использует тег title, если он присутствует в качестве содержимого по умолчанию):

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

Если вы не хотите использовать тег title, вы могли бы использовать атрибут «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 (qTip использует тег title, если он присутствует в качестве содержимого по умолчанию):

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

Редактировать:

Забыл упомянуть, что с помощью этих решений вы бы переместили javascript за пределы вашего шаблона элемента.