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

SharePoint JavaScript jQuery

jQuery プラグインとして Ticker としてリスト(ul要素など)を表示するものは結構あったけど、下記を満たすものがなかったので自前で作成することに。

  • 定期的(30分とか)に最新のアイテムを取りに行く
  • アイテムが右から流れてきて、左端で停止、しばらく表示したら消えて、次のアイテムへといったような動き
  • アイテムにマウスを乗せると詳細が表示される

まずは Ticker として表示させるデータを前回までに作成した MOSS Client jQuery Plugin で表示させてみる。定義リスト(dl)を使って、アイテムのタイトルと dt として、本文を dd として作成する。

MOSS.Lists.getListItems({
    listName: '{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}',
    query: '<Query><OrderBy><FieldRef Name="Modified" Ascending="FALSE"></FieldRef></OrderBy></Query>',
    fields: '<ViewFields><FieldRef Name="ID" /><FieldRef Name="Title" /><FieldRef Name="Body" /><FieldRef Name="ServerUrl" /><FieldRef Name="Modified" /></ViewFields>',
    rowLimit: '5',
    callback: function(result) {
        if ( result.error ) {
            alert('Code : ' + result.error.code + '\nReason : ' + result.error.reason + '\nDetail' + result.error.detail);
        }
        var html = '<dl>';
        for ( var i = 0; i < result.rows.length; i++ )
        {
            var r = result.rows[i];
            var vals = r.getAttribute('ows_ServerUrl').split('/');    vals.pop();
            var url = vals.join("/") + '/DispForm.aspx?ID=' + r.getAttribute('ows_ID');    //    アイテムへのリンク
            html += '<dt><a href="' + url + '">' + r.getAttribute('ows_Title') + 
                    '</a><span>(' + r.getAttribute('ows_Modified') + ')</span></dt>'
            html += '<dd>' + r.getAttribute('ows_Body') + '</dd>';
        }
        html += '</dl>';
        $('body').html(html);
    }});

こんな感じで。あとは作成した定義リストから前述のような動きを実装していく。