0
我正在寫日曆，並將事件信息從數據庫中提取出來。然後，我正在做一些處理（服務器端）來嘗試衝突「事件」，DIV將在日曆上明顯重疊。我將數據傳回瀏覽器，jQuery將「事件」DIV定位在瀏覽器中。將jQuery綁定到mouseover事件;在mouseover上設置CSS屬性
因爲它們重疊，我以爲我會讓jQuery在每個DIV前面彈出（通過更改它的CSS z-index屬性），然後在mouseout上彈出。
這涉及到我第一次使用jQuery數據綁定，它工作正常，但存在一個問題：當我將鼠標放在我的「事件」DIV中的某個（簡單文本）內容上時，jQuery將此視爲我將其從DIV本身中移出。
我做了另一個更簡單的頁面來測試jQuery的行爲，並且在該頁面中，mouseover行爲與我所期望的相同。
任何關於解決方法的想法，我的代碼或錯誤的問題，將不勝感激 - 謝謝！
下面是頁面代碼：
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
var minX = 200;
var minY = 200;
function renderEvent(id, content){
$('body').append('<div class="event" id="event_' + id + '">' + content + '</div>');
return true;
}
function positionEvent(id, startTime, endTime, x, ofs, w){
x += 30;
ofs = ofs - 1;
$('#event_' + id)
.position({
'my': 'left top',
'at': 'left top',
'of': '#time_' + startTime,
'offset': x + ' ' + ofs
})
.width(w)
.height(
((endTime - startTime) * 60) + (endTime - startTime - 2) - ofs
)
return true;
}
function bindEventData(id){
var zIndex = '9' + (1000 + id);
$('#event_' + id)
.css('z-index', zIndex)
.bind("mouseout", {z: zIndex}, function(e){
$(e.target)
.css('z-index', e.data.z);
//.css('-moz-box-shadow', 'none')
//.css('-webkit-box-shadow', 'none')
//.css('box-shadow', 'none');
});
return true;
}
function bindEventEvents(){
$('div.event').mouseover(function(e){
$(e.target)
.css('z-index', '9999999');
//.css('-moz-box-shadow', '0px 3px 3px #999')
//.css('-webkit-box-shadow', '0px 3px 3px #999')
//.css('box-shadow', '0px 3px 3px #999');
});
}
$(document).ready(
function(){
var json = [
{"id":0,"start_time":10,"end_time":16,"x":0,"ofs":0,"w":65,"content":"Event #0:<br />10:00 - 16:00"},
{"id":1,"start_time":10,"end_time":12,"x":26,"ofs":3,"w":65,"content":"Event #1:<br />10:00 - 12:00"},
{"id":2,"start_time":10,"end_time":15,"x":52,"ofs":6,"w":65,"content":"Event #2:<br />10:00 - 15:00"},
{"id":3,"start_time":13,"end_time":19,"x":0,"ofs":0,"w":65,"content":"Event #3:<br />13:00 - 19:00"},
{"id":4,"start_time":15,"end_time":18,"x":0,"ofs":0,"w":65,"content":"Event #4:<br />15:00 - 18:00"},
{"id":5,"start_time":16,"end_time":17,"x":0,"ofs":0,"w":65,"content":"Event #5:<br />16:00 - 17:00"},
{"id":6,"start_time":16,"end_time":19,"x":26,"ofs":3,"w":65,"content":"Event #6:<br />16:00 - 19:00"},
{"id":7,"start_time":17,"end_time":18,"x":0,"ofs":0,"w":65,"content":"Event #7:<br />17:00 - 18:00"}
];
if(json.length > 0){
for(i = 0; i < json.length; i++){
oEvent = json[i];
id = oEvent.id;
startTime = oEvent.start_time;
endTime = oEvent.end_time;
x = oEvent.x;
w = oEvent.w;
ofs = oEvent.ofs;
content = '<span class="event_text">' + oEvent.content + '</span>';
r = renderEvent(id, content);
r = positionEvent(id, startTime, endTime, x, ofs, w);
r = bindEventData(id);
}
bindEventEvents();
}
}
);
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.time_wrapper {
background-color: #ccf;
border-top: 1px solid #99c;
width: 180px;
min-height: 60px;
font-size: 0.65em;
}
.event {
background-color: #cfc;
border: 1px solid #6c6;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
width: 100px;
padding: 2px 1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="time_wrapper" id="time_9">09:00</div>
<div class="time_wrapper" id="time_10">10:00</div>
<div class="time_wrapper" id="time_11">11:00</div>
<div class="time_wrapper" id="time_12">12:00</div>
<div class="time_wrapper" id="time_13">13:00</div>
<div class="time_wrapper" id="time_14">14:00</div>
<div class="time_wrapper" id="time_15">15:00</div>
<div class="time_wrapper" id="time_16">16:00</div>
<div class="time_wrapper" id="time_17">17:00</div>
<div class="time_wrapper" id="time_18">18:00</div>
<div class="time_wrapper" id="time_19">19:00</div>
</div>
</body>