Jquery弹出鼠标在日历控件上

我正在使用ASP.NET的Calendar控件。 当我将鼠标hover在Calendar控件中的特定日期时，我需要显示一个弹出窗体。 此弹出窗口应显示数据库中的数据。

有人有解决方案吗？

Answer 1

你应该有一个空的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 2

我不知道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请求的响应中只是绘制弹出窗口…

希望这可以帮助

检查getPopupfunction

 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 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）来触发弹出窗口。 根据@ user1225246的答案，JQuery ajax函数提供了获取数据和填充弹出窗口的最简单方法。

 $(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 (eg hiding the popup if you need to) here.'); } });