Question

我目前正在开发一个C＃ASP.net项目。我有一个数据网格，其中包含一个链接按钮，显示从数据库绑定的文本并绑定记录ID的命令参数。

我想让用户能够将鼠标放在此链接按钮上，并在鼠标光标旁边显示一个悬停弹出窗口。当鼠标悬停在链接按钮上之后，它会显示给用户，我希望它根据命令参数中的id从数据库加载数据，并在悬停弹出窗口中显示数据。我怎么能这样做，我认为这将是我需要的jQuery，但不知道如何触发悬停事件并根据链接按钮的命令参数值显示内容。

Answer 1

我过去做过类似的事情，但触发了生成的表格单元格。我在表格单元格的rel属性中添加了一个标识符。我使用RowDataBound事件来实现这一点，您应该可以使用链接按钮执行类似操作。使用内置的jSON序列化程序将信息加载到页面上，然后使用下面的代码弹出窗口。

以下是我在后面的代码中序列化数据的方法，显然你需要根据需要进行调整：

//Grab Venue Details using LINQ
var venues = (from evt in futureEvents
              select new { VenueID = evt.Venue.VenueID, evt.Venue.Description, evt.Venue.Address.Address1, evt.Venue.Address.Suburb }).Distinct();

//Serialize Venues for use in tool tip
JavaScriptSerializer js = new JavaScriptSerializer();
string json = js.Serialize(venues);
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "jSONVenues", "var venues = " + json + ";", true);

示例jSON

var venues = [{"VenueID":393,"Description":"Dee Why RSL","Address1":"932 Pittwater Road","Suburb":"Dee Why"}];

的jQuery

this.tooltip = function() {
/* CONFIG */
    xOffset = 20;
    yOffset = 20;
    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result
/* END CONFIG */
/*Set Up hover for table cell change this for you link */
   $("[Your Gridview ID or class] tr>td:first-child").hover(function(e) {
/* Get ID From rel attribute */        
       this.t = $(this).attr("rel");     
       var offset = $(this).offset();
       var venue;

       for (i = 0; i < venues.length; i++) {
            venue = venues[i];
            if (venue.VenueID == this.t) {
                i = venues.length + 1;
                }
            }

       $("body").append("<p id='tooltip'><strong>" + venue.Description + "</strong><br>" + venue.Address1 + ", " + venue.Suburb + "</p>");
       $("#tooltip")
        .css("top", (offset.top + xOffset) + "px")
    .css("left", (offset.left + yOffset) + "px")
    .fadeIn("fast");

        },
    function() {$("#tooltip").remove();});            
    };

   // starting the script on page load
        $(document).ready(function() {
            tooltip();    
        });

编辑：为了给出一些上下文，这用于用户选择要参加的活动，网格显示地点名称。将鼠标悬停在网格单元格上会使弹出窗口显示完整的场地详细信息。

Answer 2

将您想要在悬停中显示的所有数据写入div。然后显示＆amp;在悬停时隐藏相关的div。

编辑：看起来我没有正确阅读问题 - 错过了有关查询数据库悬停内容的信息。我想开始加载的数据太多了？这似乎有点不太可能，如果可能你应该考虑分页数据。悬停通常是少量的快速信息，回调数据库的速度并不是很快 - 不管怎样“在客户端javascript上的用户界面快速”。并且回调悬停似乎对我来说是糟糕的用户体验，因为即使它相对较快，在获取数据的同时会有短暂停顿，并且仅仅因为用户停止移动鼠标 - 我认为这是错误的。我建议使用click事件来回调数据库，这样用户就会发生一些事情。

我仍然认为你应该在后面的代码中加载这个悬停数据并将其写入div，这将使你对隐藏和放大有很大的控制权。展示，风格和定位。

在asp.net中的链接按钮上显示鼠标位置的悬停框

2 个答案: