Блог

Главная - Вопросы по программированию - Как изменить текст метки при наведении курсора мыши в asp.net

Как изменить текст метки при наведении курсора мыши в asp.net

#javascript #asp.net #user-interface

#javascript #asp.net #пользовательский интерфейс

Вопрос:

В asp.net , когда пользователь наводит курсор мыши на кнопку, я хотел бы изменить текст метки, чтобы объяснить, что делает кнопка.

Затем, когда они выводят курсор мыши из кнопки, метка должна вернуться к своему тексту по умолчанию.

Каков наилучший способ добиться этого? Существуют ли ASP.net элементы управления для этого? Или я должен просто закодировать пользовательский javascript?

Комментарии:

1. Вероятно, вам следует обрабатывать это исключительно в javascript. Использование библиотеки, подобной jQuery, сделает такую задачу довольно тривиальной.

2. @KarmicCoder не только он должен делать это на javascript, я думаю, что это его единственный выбор , если он не хочет раздражать пользователей до чертиков, имея повсюду обратные отправки.

3. @kaes — проверьте опцию всплывающей подсказки, иначе возможен чистый javascript.

4. Javascript — это правильный путь. jQuery будет слишком дорогим, если это единственное требование скрипта для страницы

5. @iandayman, это было бы дорого, но события мыши не являются общими для всех моделей событий, тогда как они есть в jQuery. Справедливости ради, эти различия не повлияют на эту функциональность достаточно сильно, чтобы оправдать использование jQuery.

Ответ №1:

Изменить текст метки с помощью небольшой магии jQuery действительно довольно просто.

Вот что вы бы использовали для своей метки

 <label id="mylabel" 
       title="My Text" 
       data-replace="My NEW Text">My Text</label>

и вот что вы бы использовали для своего jQuery

 $("#mylabel").mouseover(function () {
  $(this).text($(this).data('replace'));
});


$("#mylabel").mouseout(function () {
  $(this).text($(this).attr('title'));
});

Вы можете протестировать это здесь.

Кроме того, если вы используете веб-формы, вы можете либо добавить атрибут data в свой код позади, либо непосредственно в элементе управления. Выполнение этого в коде полезно для динамического текста.

 mylabel.Attributes.Add("data-original", "My Text");
mylabel.Attributes.Add("data-replace", "My NEW Text");

Ответ №2:

[Редактировать, чтобы ответить на ваш вопрос]

 <asp:label id="label1" class="hover" data-replace="The tooltip text #1" data-original="Original Value" runat="server">Original Value</asp:label>

Затем:

 $(".hover").hover(

function() {
    var text = $(this).attr("data-replace");
    $(this).text(text);
}, function() {
    var text = $(this).attr("data-original");
    $(this).text(text);
}
);

[Старый пост … упс, ответил на неправильный вопрос]

Использование чего-то вроде плагина всплывающих подсказок jQuery Tools отлично подходит для этого!

http://flowplayer.org/tools/demos/tooltip/index.html

Просто добавьте атрибут title к вашей метке и немного JavaScript:

 <asp:label id="label1" title="The tooltip text #1" runat="server"></asp:label>

Затем 

 $("#label1").tooltip();

Комментарии:

1. Использование всплывающей подсказки — хороший вариант для изменения фактического текста метки, однако @kaes попросил изменить текст метки. Было бы разумно привести пример jQuery о том, как это сделать, чтобы на самом деле «ответить» на вопрос.

Ответ №3:

вы можете использовать это решение, я надеюсь, оно вам поможет 

    myItemLabel.ToolTip = "Text you want to show when hover";

Объедините это с плагином всплывающих подсказок jQuery (или аналогичным), чтобы получить лучшие эффекты.

      myItemLabel.CssClass = "has-tooltip";

Затем в вашей разметке.

      <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="scripts/jquery.tooltip.js"></script>
    <script type="text/javascript">
    $(function() {
       $('.has-tooltip').tooltip();
      });
     </script>

Комментарии:

1. Ваш ответ такой же, как и в ответе @Watermark-Studios, к сожалению, на самом деле он не отвечает, как изменить текст метки.

Ответ №4:

вы можете использовать это

 <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery.tooltip.js"></script>
<script type="text/javascript">
 $(function() {
    $('.has-tooltip').tooltip();
   });
  </script>