日历控件的鼠标悬停时弹出jQuery

Question

我正在使用ASP.NET的Calendar控件。 将鼠标悬停在“日历”控件中的特定日期上时，需要显示一个弹出表单。 该弹出窗口应显示数据库中的数据。

有人对此有解决方案吗？

Answer 1

我不知道asp如何命名日期跨度，检查它，让选择器用户jQuery添加事件后非常容易检测

jQuery('selector').hover(function(){ //or use mousemove
  getPopup(jQuery(this).text()); // just send any data to detect the date
}) ;

之后，您需要在getPopup函数中发出AJAX请求

你可以用

jQuery.get()//or jQuery.post()
__doPostBack()//if you have update panels 
//or any ajax technique xmlhttprequest,PM,...

在ajax请求的响应中，只需绘制弹出窗口...

希望这可以帮助

示例getPopup函数

function getPopup(date/*for example*/){
  jQuery.getScript('www.myWebsite.com/pageThatDrawsThePopup?date='+date);
  // getScript assuming that the return value is JS code the immediately draws the popup
  // ?date = date assuming that your page takes the date as query string and get the data from the database upon this field 
  //dont forget to change the url
 //very simple very easy ...  

}

Answer 2

您应该有一个空的div：

<div id="popup"></div>

然后将事件绑定到日历元素：

('li.calendar').hover(function(){
   //make an ajax call and populate the popup div with the data
   //easiest method is jquery.load(), but if you need more control use jquery.ajax();
   $("popup").load('path/to/page.asp',data,function(){
       $("popup").show();
   });


});

看一下jquery.load（）和jquery.ajax（）

Answer 3

将一个CSS类添加到包含应触发弹出窗口的日期的单元格中。 您需要重写DayRender事件才能执行此操作。

void myCalendar_DayRender(object sender, DayRenderEventArgs e)
{
    if (e.Day.Date.Day.ToString().EndsWith("7")){// Replace with your own condition
        e.Cell.CssClass+=   "specialCell"; //replace with your own custom css class name
    }
}

然后添加一些JavaScript（或Jquery）以触发弹出窗口。 JQuery ajax函数提供了最简单的方法来获取数据并按照@ user1225246的答案填充弹出窗口。

$(document).ready(function(){

    $('.specialCell').hover(function(){

        function(){//This will get called when you mouseover
            alert('put your JQuery AJAX code here.');
        },

        function(){
            alert('do any clean-up (e.g. hiding the popup if you need to) here.');
        }
    });