鼠标滑动显示具体内容 - hardy_Wang

鼠标滑动显示具体内容

        备份下，以后会用得着

          

/***********************************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);
        }
    });
}