Какие варианты у меня есть для отображения списка дат при наведении курсора на ячейку таблицы HTML? - PullRequest
Новая
       22

Какие варианты у меня есть для отображения списка дат при наведении курсора на ячейку таблицы HTML?

2 голосов
/ 11 марта 2011

У меня есть клиент, у которого есть приложение ASP.NET MVC 2.В одном из представлений содержится таблица со столбцом «дата последней операции».При наведении курсора на этот столбец с помощью мыши они хотели бы, чтобы список всех отображал даты операций на всплывающей панели (или аналогичных).

Обычно между0 и 5 даты будут отображаться.

Похоже, это будет включать в себя Javascript.Если это так, я бы хотел, чтобы это было ненавязчиво.

Кто-нибудь знает о хитрых решениях этого?Например, какие-нибудь компоненты, которые делают хорошую работу?Или какие-нибудь сайты, которые делают что-то подобное, что я могу посмотреть на вдохновение?Например, всплывающее окно при наведении указателя мыши на тег в StackOverflow.

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

1 Ответ

1 голос
/ 11 марта 2011

Вы можете сделать это с помощью jQuery. Простым решением было бы прикрепить событие hover к столбцу и загрузить даты операций через AJAX, чтобы они отображались на всплывающей панели. Простой пример: 

$(document).ready(function(){
  $("#yourcolumnid").hover(
    function() {
      $.ajax({
        type: "POST",
        url: "URL",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{'PARAMETER':'VALUE'}",
        success: function(result) {
          $(document).append("<div id='alldates' class='CssForPopup'>" + result.d + "</div>");
        }
      });
    },
    function() {
      $("#alldates").remove();
    }
  );
});

Это решение, конечно, ненавязчиво, и вы можете просто поместить все это в файл .js и прикрепить его к страницам, на которых вы хотите его использовать.

...