鼠标悬停在日历控件上时弹出 Jquery答案

【问题标题】：Jquery popup on mouse over of calendar control鼠标悬停在日历控件上时弹出 Jquery
【发布时间】：2012-07-23 09:34:03
【问题描述】：

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

有人对此有解决方案吗？

【问题讨论】：

标签： c# jquery asp.net jquery-plugins

【解决方案1】：

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

【讨论】：

你能解释一下path/to/page.asp和data是什么意思吗？
"path/to/page.asp" 是提供数据的 asp 页面的路径，如果您不想向 asp 页面发送任何内容（如POST 请求），如果您有数据要发送，只需创建“var data = 'some data'”并将其发布到 asp 页面。你最好阅读我提供的链接，那里有非常简单的例子。

【解决方案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 请求的响应中，只需绘制弹出窗口 ...

希望对你有帮助

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 ...  

}

【讨论】：

【解决方案3】：

向包含触发弹出窗口的日期的单元格添加一个 CSS 类。您需要覆盖 DayRender event 来执行此操作。

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.');
        }
    });

【讨论】：

没问题。请查看我的更新 - 我添加了一些基本的 JS 来将它们组合在一起。祝你好运。