鼠标滑动显示具体内容

        备份下，以后会用得着

          

/***********************************CSS*******************************************/

@charset "utf-8";
/* CSS Document */

.bg_total_div{ width:480px; height:auto;display:none;}
.bg_total_div div.top{ width:480px; height:10px;padding-left:10px; background-image:url(../images/bg_all.png); background-repeat:no-repeat; background-position:0px 0px;}
.bg_total_div div.middle{ width:468px; height:auto; border-left:1px #a3d5e5 solid; border-right:1px #a3d5e5 solid;padding-left:10px;
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e1f0f5,endcolorstr=#ffffff,gradientType=0)/*IE浏览器*/;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1f0f5), to(#ffffff))/*谷歌浏览器*/;
background:-moz-linear-gradient(top,#e1f0f5,#ffffff)/*火狐浏览器*/; }
.bg_total_div div.down{ width:480px; height:10px;padding-left:10px; background-image:url(../images/bg_all.png); background-repeat:no-repeat; background-position:0px -15px;}

div.left_calendar_div div.main_div_title{ margin-bottom:5px;}
div.left_calendar_div div.mySchedule{text-align: center;}
div.left_calendar_div div.mySchedule div.sSubject{width: 100%; padding: 2px 0px 0px 0px;}
div.left_calendar_div div.mySchedule div.mouseoverCss{background-color: #e1f1ff;}

/***********************************HTML*******************************************/

<script type="text/javascript">
    $(function () {
        var WebPart = {
            ExchangeUrl: '<%= WebPart.ExchangeUrl %>',
            MaxItemCount: parseInt('<%= WebPart.MaxItemCount %>'),
            MaxCharSizePerItem: parseInt('<%= WebPart.MaxCharSizePerItem %>'),
            ShowSchedulerInNextDays: parseInt('<%= WebPart.ShowSchedulerInNextDays %>')
        }
        RenderMyScheduler('<%= MySchedulerList.ClientID %>', WebPart);
    });
</script>
<div id="MySchedulerList" class="mySchedulerList" runat="server">
    <p class="title" title='<%= WebPart.Description %>'>
        <span>
            <%= WebPart.Title%></span></p>
    <span class="more"><a href="#" onclick="openwin_Scheduler<%=MoreUrl %>">>>更多</a>
    </span>
   <div id="sSubject" class="sSubject" style="text-align: left; height: 140px; overflow: auto;">
        </div>
    <div class="img">
        &nbsp;</div>
</div>
<div id="sBody"  style="position: absolute; width: 480px; padding-left: 5px; z-index:999; text-indent:">

</div>

/***********************JS代码************/
/**************************************************************
* Author: Jerry Bai
* Create Date: 2011/9/13
* Description: Render my scheduler from json string
* Licence: BSD
***************************************************************/
function RenderMyScheduler(MySchedulerListID, WebPart) {
    $("#sSubject").empty()
    $("#sBody").empty();
    $.ajax({
        url: '/_layouts/CIMC.EIP.GPortal.UI/MyScheduler.ashx',
        dataType: 'text',
        timeout: 300000,
        data: 'ExchangeUrl=' + encodeURIComponent(WebPart.ExchangeUrl) + '&MaxItemCount=' + WebPart.MaxItemCount.toString() + '&ShowSchedulerInNextDays=' + WebPart.ShowSchedulerInNextDays,
        success: function (response) {
            if (typeof response == "string") {
                response = response.toJson();
            }
            if (response && response.data) {
                var schedulerItemHTML = '';
                for (var i in response.data) {
                    var calendarItem = response.data[i];
                    var startTime = calendarItem.StartTime.substr(0, 16);
                    var endTime = calendarItem.EndTime.substr(0, 16);
                    var startDate = calendarItem.StartTime.substr(0, 10).toDate();
                    var todayOrTomorrow = '';
                    var _today = new Date();
                    var _todayYear = parseInt(_today.getFullYear());
                    var _todayMonth = parseInt(_today.getMonth());
                    var _todayDay = parseInt(_today.getDate());
                    _today = new Date(_todayYear, _todayMonth, _todayDay);
                    if (startDate.valueOf() < new Date(_todayYear, _todayMonth, _todayDay).setDate(_today.getDate() - 2)) {
                        todayOrTomorrow = '古 ';
                    }
                    else if (startDate.valueOf() == new Date(_todayYear, _todayMonth, _todayDay).setDate(_today.getDate() - 2)) {
                        todayOrTomorrow = '前 ';
                    }
                    else if (startDate.valueOf() == new Date(_todayYear, _todayMonth, _todayDay).setDate(_today.getDate() - 1)) {
                        todayOrTomorrow = '昨 ';
                    }
                    else if (startDate.valueOf() == new Date(_todayYear, _todayMonth, _todayDay).valueOf()) {
                        todayOrTomorrow = '今 ';
                    }
                    else if (startDate.valueOf() == new Date(_todayYear, _todayMonth, _todayDay).setDate(_today.getDate() + 1)) {
                        todayOrTomorrow = '明 ';
                    }
                    else if (startDate.valueOf() == new Date(_todayYear, _todayMonth, _todayDay).setDate(_today.getDate() + 2)) {
                        todayOrTomorrow = '后 ';
                    }
                    else {
                        todayOrTomorrow = '未 ';
                    }

                    schedulerItemHTML += '<div class="myScaheduleTitle">';
                    schedulerItemHTML += todayOrTomorrow + startTime.split(' ')[1].substr(0, 5);
                    schedulerItemHTML += '<a href="';
                    schedulerItemHTML += calendarItem.Source == WebPart.ListTitle ? WebPart.ItemDetailUrlFormatString.replace('{0}', calendarItem.Identity) : ('#" onclick="openwin_Scheduler' + calendarItem.CategoryName);
                    schedulerItemHTML += '">';
                    schedulerItemHTML += calendarItem.Subject.SpecifiedLengthString(parseInt(WebPart.MaxCharSizePerItem));
                    schedulerItemHTML += '</a>';
                    schedulerItemHTML += '</div>';
                    $("#sSubject").append(schedulerItemHTML);
                    schedulerItemHTML = "";
                    //add by hai wang 
                    $("#sBody").append($('<div class="bg_total_div"><div class="top" ></div>' + '<div class="middle myScaheduleBody"><ul><li>标题：' + calendarItem.Subject + '</li><li>时间：' + startTime + '至' + endTime + '</li><li>地点：' + calendarItem.Location + '</li><li>内容：' + calendarItem.Body + '</li></ul></div>' + '<div class="down"></div></div>'));
                }
                var $subject = $("#sSubject").children();
                $.each($subject, function (index, sub) {
                    var $curS = $(sub);
                    var $curB = $("#sBody").children().eq(index);
                    var $wHeight = $(window).height(); //window height
                    var $bWidth = $("#sBody").outerWidth();
                    var $bHeight = $curB.outerHeight();
                    //var $curP = $wHeight - $curS.offset().top;
                    var $theHeight = 400; //设定上限高度
                    if ($curB.height() > $theHeight) {
                        $curB.css("height", $theHeight + "px");
                    }
                    var $left = $curS.offset().left - $bWidth;
                    if ($left < 0) {
                        $left = $curS.offset().left + $curS.width();
                    }

                    $(sub).mouseover(function (e) {
                        $curS.addClass('mouseoverCss');
                        //$("#sBody").css({ "top": (e.pageY) + "px", "left": (e.pageX) + "px" });//位置跟随鼠标移动
                        if ($bHeight < $theHeight) {
                            $("#sBody").offset({ top: ($curS.offset().top - $bHeight / 2), left: $left }); ; //绝对定位
                        } else {
                            $("#sBody").offset({ top: ($curS.offset().top - $theHeight / 2), left: $left }); ; //绝对定位
                        }
                        $curB.show();
                    }).mouseout(function () {
                        $curS.removeClass('mouseoverCss');
                        $curB.hide();
                    });
                    //鼠标放入详细面板显示
                    $curB.mouseover(function () {
                        $curS.addClass('mouseoverCss');
                        $curB.show();
                    }).mouseout(function () {
                        $curS.removeClass('mouseoverCss');
                        $curB.hide();
                    });
                });
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            Firebug.debug('Call RenderMyScheduler fail' + textStatus + '\r\n Request Url:' + this.url);
        }
    });
}