マウススライド表示

バックアップの下で、後で使うことができます
          

/***********************************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:4668 px;height:auto;border-left:1 px#a 3 d 5 e 5 solid;border-right:1 px#a 3 d 5 e 5 solid;padding-left:10 px;filter:progid:DXImageTransform.Microsoft.gradient(startcoloorstr=# e 1 f 0 f 5,endcolorstr=# ffff,gradientType=0)/*IE閲覧器*/;backround:-webkit-gradient(lineaarlinearlinearchit-gradient)0%,0%,0%,100%,from(#e 1 f 0 f 5),to(#ffffff)/*Googleブラウザ*/;background:-moz-linear-gradient(top,#e 1 f 0 f 5,#ffff)/*火狐ブラウザ*/;}.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
 Request Url:' + this.url);

        }

    });

}