jQuery技术:Jquery弹出鼠标在日历控件上

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

有人有解决方案吗?

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

    我不知道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 ... } 

    将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函数提供了获取数据和填充弹出窗口的最简单方法。

    需要了解更多jQuery教程分享Jquery弹出鼠标在日历控件上,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

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

      以上就是jQuery教程分享Jquery弹出鼠标在日历控件上相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/981520.html

      (0)
      上一篇 2021年12月12日
      下一篇 2021年12月12日

      精彩推荐