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>