SharePointにJavaScriptでTickerを実装する - Tickerの作成(2)

Ticker を表示させる jQuery プラグインを探していた際に見つけた、jQuery liScroll - a jQuery News Ticker を参考にしながら目的の動作を実装してみる。

////////////////////////////////////////////////////////////////////////////////

//    jQuery Plugin - dl Ticker (by Kz)

jQuery.fn.dlTicker = function ( settings ) {

    settings = jQuery.extend({

        moveDuration: 1000,

        showDuration: 5000,

        hoverTip: true

    }, settings);

    return this.each ( function() {

        var dl = $(this);

        dl.addClass('dlTicker_base');                                //    <dl class="dlTicker_base">***</dl>へ

        dl.wrap('<div class="dlTikcer_mask"></div>');                //    <div class="dlTikcer_mask"><dl>***</dl></div>へ

        dl.parent().wrap('<div class="dlTicker_container"></div>');    //    <div class="dlTicker_container"><div class="dlTikcer_mask"><dl>***</dl></div></div>へ

        var containerWidth = dl.parent().parent().width();            //    dlTikcer_maskのwidth

        if ( settings.hoverTip ) {

            dl.parent().parent().parent().append('<div class="dlTicker_tips" id="dlTicker_tips" style="left: -9000; top: -9000;"></div>');        

            $('#dlTicker_tips').html($('dd:eq(0)', dl).html());

            $('#dlTicker_tips').hide();

        }        

        dl.find('dt').hide();

        dl.find('dd').hide();

        $('dt:eq(0)', dl).show();

        dl.width(containerWidth);

        var itemCount = 0;

        var eventTimer = null

        function endAnimate() {

            eventTimer = null;

            var oldItemCount = itemCount;

            if ( (++itemCount) >= dl.find('dt').length ) {

                itemCount = 0;

            }

            $('dt:eq(' + oldItemCount + ')', dl).hide();

            $('dt:eq(' + itemCount + ')', dl).show();

            $('#dlTicker_tips').html($('dd:eq(' + itemCount + ')', dl).html());

            //dl.animate({left: '-'+containerWidth}, 'fast');

            dl.css('left', containerWidth);

            scroll();

        }

        function scroll() {

            dl.animate(

                { left: 0 },

                settings.moveDuration,

                'swing',

                function() {    //    アニメーションが終わったら

                    eventTimer = setTimeout(endAnimate, settings.showDuration);

                }

            );

        }

        scroll();

        if ( settings.hoverTip ) {

            dl.hover(

                function() {

                    var pos = dl.offset();

                    var height = dl.height();

                    $('#dlTicker_tips').css('left', pos.left).css('top', pos.top + height);

                    $('#dlTicker_tips').fadeIn('normal');

                    if ( eventTimer ) {

                        clearTimeout(eventTimer);

                        eventTimer = null;

                    }

                },

                function() {

                    $('#dlTicker_tips').fadeOut('normal');

                    $('#dlTicker_tips').css('left', -9000).css('top', -9000);

                    $('#dlTicker_tips').hide();

                    eventTimer = setTimeout(endAnimate, settings.showDuration);

                }

            );

        }

    });

};

んで、↓のように使う。setInterval を使って定期的に dl を再構築していく。

<div id="tickerPlace" />

<script type="text/javascript">
   1:  
   2: <!--
   3: setInterval('createTicker()', 30 * 60 * 1000);
   4: function createTicker()
   5: {
   6:     MOSS.Lists.getListItems({
   7:         listName: '{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}',
   8:         query: '<Query><OrderBy><FieldRef Name="Modified" Ascending="FALSE"></FieldRef></OrderBy></Query>',
   9:         fields: '<ViewFields><FieldRef Name="ID" /><FieldRef Name="Title" /><FieldRef Name="Body" /><FieldRef Name="ServerUrl" /><FieldRef Name="Modified" /></ViewFields>',
  10:         rowLimit: '5',
  11:         callback: function(result) {
  12:             if ( result.error ) {
  13:                 alert('Code : ' + result.error.code + '\nReason : ' + result.error.reason + '\nDetail' + result.error.detail);
  14:             }
  15:             var html = '<dl id="ticker">';
  16:             for ( var i = 0; i < result.rows.length; i++ )
  17:             {
  18:                 var r = result.rows[i];
  19:                 var vals = r.getAttribute('ows_ServerUrl').split('/');    vals.pop();
  20:                 var url = vals.join("/") + '/DispForm.aspx?ID=' + r.getAttribute('ows_ID');    //    アイテムへのリンク
  21:                 html += '<dt><a href="' + url + '">' + r.getAttribute('ows_Title') + 
  22:                         '</a><span>(' + r.getAttribute('ows_Modified') + ')</span></dt>'
  23:                 html += '<dd>' + r.getAttribute('ows_Body') + '</dd>';
  24:             }
  25:             html += '</dl>';
  26:             $('#tickerPlace').html(html);
  27:             $('#ticker').dlTicker();
  28:         }});
  29: }
  30: //-->
</script>

<style type="text/css">

.dlTicker_container

{

    border: 1px slolid #000;

    background-color: #fff;

    width: 738px;

    height: 30px;

    margin: 0;

    padding: 0;

    overflow: hidden;

}

.dlTikcer_mask

{

    position: relative;

    left: 10px;

    top: 8px;

    width: 718px;

    overflow: hidden;

}

.dlTicker_base

{

    position: relative;

    left: 750px;

    list-style-type: none;

    margin: 0px;

    padding: 0px;

}

.dlTicker_tips

{

    display: block;

    overflow: auto;

    position: absolute;

    border: 1px #000 solid;

    background-color: #eee;

    padding: 5px 10px 5px 10px;

    color: #000;

    width: 500px;

    max-height: 200px;

}

</style>