[英]Jquery popup on mouse over of calendar control
我正在使用ASP.NET的Calendar控件。 將鼠標懸停在“日歷”控件中的特定日期上時,需要顯示一個彈出表單。 該彈出窗口應顯示數據庫中的數據。
有人對此有解決方案嗎?
我不知道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 ...
}
您應該有一個空的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();
});
});
將一個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.');
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.