javascript - 当鼠标悬停在 HTML 表格单元格上时，我有哪些选项可以弹出日期列表？

Question

我有一个拥有 ASP.NET MVC 2 应用程序的客户。其中一个 View 包含一个带有“最新操作日期”列的表。当鼠标悬停在该列上时，他们希望在弹出式面板(或类似面板)中显示所有操作日期的列表。

通常有 0 到 5 个日期要显示。

好像这会涉及到Javascript。如果是这样，我希望它不引人注目。

有人知道对此有巧妙的解决方案吗？例如，有什么组件做得很好吗？或者任何做类似事情的网站，我可以从中寻找灵感？例如，将鼠标悬停在 StackOverflow 上的标签上时出现的弹出窗口。

我很想提高我的 Javascript UI 技能，很高兴能花一些时间在 UI 工具包上 - 即使学习曲线通常对于像这样的小任务来说是令人望而却步的。

Answer 1

您可以使用 jQuery 做到这一点。一个简单的解决方案是将悬停事件附加到该列并通过 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 文件中并将其附加到您要使用它的页面。