懸停框在鼠標位置在asp.net中的鏈接按鈕

我目前正在C＃ASP.net項目上工作。我有一個數據網格，其中包含一個鏈接按鈕，顯示從數據庫綁定的文本並綁定記錄ID的命令參數。懸停框在鼠標位置在asp.net中的鏈接按鈕

我想允許用戶能夠將鼠標放在此鏈接按鈕上，並在鼠標光標旁邊顯示懸停彈出窗口。在將鼠標懸停在鏈接按鈕上並顯示給用戶之前，我希望它根據命令參數中的ID從數據庫加載數據，並在懸停彈出窗口中顯示數據。我怎麼能這樣做，我認爲這將是我需要的JQuery，但不知道如何觸發懸停事件並顯示基於鏈接按鈕的命令值的內容。

任何幫助將不勝感激。謝謝

來源

2011-07-10 Boardy

你在做一些太複雜的工作提示嗎？如果只是一點點，請在數據網格綁定過程中爲所有按鈕設置工具提示。如果不止這些，給我們更多的細節。 – Bill

@Bill，我不認爲這是最好的方法，因爲彈出窗口中顯示的數據庫有多個值。此外，我想用CSS代替它的樣式，而不是使用默認瀏覽器工具提示 – Boardy

您的鏈接按鈕是模板列還是數據綁定列？ –

我在過去做過類似的事情，但觸發了生成的表格單元格。我爲表格單元格的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();  
     });

編輯：爲了給出一些上下文，這是用在哪裏用戶選擇要參加的事件，網格顯示場地名稱。懸停在網格單元格上會導致彈出窗口顯示完整的場地細節。

來源

2011-07-11 01:45:15

將想要在懸停中顯示的所有數據寫入div。然後顯示&將懸停的相關div隱藏起來。

編輯：看起來我沒有正確地閱讀這個問題 - 錯過了關於查詢懸停內容的數據庫的位。我想有太多的數據要加載開始？這似乎不大可能，如果是這樣的話，你應該考慮分頁數據。懸停通常用於少量的快速信息，回撥到數據庫，這不是很快 - 不是「在客戶端JavaScript快速」「的UI。回想一下懸停在我身上似乎是不好的用戶體驗，因爲即使它相對較快，在獲取數據時也會有短暫的停頓，並且僅僅是因爲用戶停止移動鼠標 - 我認爲這是錯誤的。我會建議一個點擊事件來回調數據庫，這樣用戶就會期望發生一些事情。

我仍然認爲你應該在後面的代碼中加載這個懸停數據並將其寫入div，這將使您對隱藏&顯示，樣式和定位有很多控制權。

來源

2011-07-11 00:20:42

我同意在可能的情況下序列化加載頁面。 –

懸停框在鼠標位置在asp.net中的鏈接按鈕

回答

相關問題