SharePoint 2013 使用嵌入JavaScript方式实现一个垂直滚动列表

原创 2013年01月26日 22:27:13

本文介绍SharePoint 2013(其实也适用于2010,支持JavaScript OM) 中使用嵌入JavaScript方式实现一个垂直滚动列表:

当鼠标进入Item时停止滚动,当鼠标点击对应的Item时,显示对应的Item内容:

实现的大概思路是使用一段较短的JavaScript代码嵌入SharePoint页面,这个JavaScrip片段(可设置相关参数,如列表名,过滤条件等)调用另一个较大的JavaScript文件VerticalScrollingWebPart.js(存储到SharePoint 的SiteAssets/JavaScript中), VerticalScrollingWebPart.js 文件负责使用JavaScript OM 查询后台列表,并根据参数画出一个滚动列表:

嵌入的JavaScript 代码:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/SiteAssets/Javascript/VerticalScrollingWebPart.js"></script>
<script type="text/javascript">
init_fillScrollableDiv({'web':'',
    'listBaseUrl': 'http://MossHost/Lists/ReadMarkList/DispForm.aspx',
    'listName': 'ReadMarkList',	
	'viewFields':['Title','Body'],    
    'Filter':'<Where> <Or>  <IsNull> <FieldRef Name=\"Expires\" />  </IsNull>  <Geq> <FieldRef Name=\"Expires\"></FieldRef> <Value Type=\"DateTime\"> <Today></Today> </Value> </Geq> </Or> </Where>',
	'viewFieldsStyle':['font-weight:bold','padding:0 0 0 5'],	
	'divID':'myScrollableDiv',
	'divHeight':'250px',
	'divWidth':'500px',	
	'speed':4,
	'linkBack':true});    
</script>

主要参数说明:

1. web,如果取子站点的列表需要填

2. listBaseUrl, 显示list item的地址

3. listName,要读取的list 名称

4.viewFields, 要显示的字段

5.Filter 过滤条件(CAML结构的 Where 子句)

 

VerticalScrollingWebPart.js 代码:

/*
 A vertical scrolling web part for SharePoint 2013
*/
function init_fillScrollableDiv(obj) {
    // Build the div
    var myDivBuffer = [];
    myDivBuffer.push("<div style='vertical-align:top;position:relative;overflow:hidden;cursor:default;height:" + obj.divHeight + ";width:" + obj.divWidth + "'>");
    myDivBuffer.push("<div id='" + obj.divID + "' style='position:relative'></div>");
    myDivBuffer.push("</div>");
    myDivContainer = myDivBuffer.join('');
    document.write(myDivContainer);
    $(document).ready(function () {
        // fillScrollableDiv(obj)
        ExecuteOrDelayUntilScriptLoaded(function () { queryItemsByViewName(obj); }, "sp.js");
        //queryItemsByViewName(obj);
    });
}

function fillScrollableDiv(info, items) {    
    info.animBegin = 0;
    info.animPart = 0;
    if (items.length == -1) alert("An error occured - check the parameters \"listBaseUrl\", \"web\"......");
    var finalBuffer = [];
    var path = info.listBaseUrl;
    var res = new Object();
    res.items = items;
    $.each(res.items, function (i, item) {
        var partBuffer = [];       
        $.each(info.viewFields, function (idx, fin) {
            var style = '';
            var thisVal = (item[fin] == null) ? '' : item[fin];
            if (thisVal.indexOf(';#') > -1) {
                thisVal = thisVal.substring(thisVal.indexOf(';#') + 2);
            }
            if (info.viewFieldsStyle[idx] != undefined) {
                style = " style='" + info.viewFieldsStyle[idx] + "'";
            }
            partBuffer.push("<tr><td" + style + ">" + thisVal + "</td></tr>");
        });
        finalBuffer.push("<hr style='height:1px;color:black' />");
        if (info.linkBack) {
            finalBuffer.push("<table title='Go to item' style='cursor:pointer' ");
            finalBuffer.push("onclick='javascript:location.href=\"" + info.listBaseUrl + "?ID=" + item['ID'] + "&Source=" + location.href + "\"' ");
            finalBuffer.push("cellspacing='0' cellpadding='0'>" + partBuffer.join('') + "</table>");
        } else {
            finalBuffer.push("<table cellspacing='0' cellpadding='0'>" + partBuffer.join('') + "</table>");
        }
    });
    var myContents = finalBuffer.join('');
    // Update the content in the scrollable div
    $("#" + info.divID).html(myContents)
		.mouseenter(function () {
		    var now = new Date();
		    info.animPart += (now - info.animBegin);
		    $(this).stop();
		})
		.mouseleave(function () {
		    $(this).stop();
		    var partScr = parseInt($(this).css('top'));
		    scrollMyDiv(partScr, info);
		});

    // Call scroll function
    scrollMyDiv('', info);
}

function scrollMyDiv(scroll, info) {
    info.animBegin = new Date();
    var myDiv = $("#" + info.divID);
    var ch = myDiv.height();
    var chpHeight = myDiv.parent().height();
    if (scroll == '') {
        var scroll = chpHeight;
    }
    var duration = (ch * (info.speed * 10)) - info.animPart;
    myDiv.css({ 'top': scroll }).animate({ "top": -ch }, duration, 'linear', function () {
        info.animPart = 0;
        scrollMyDiv('', info);
    });
}


// Function to pull items from view
function queryItemsByViewName(info) {
    // ToDo Invoke JavaScript OM query the items
    var ctx = new SP.ClientContext();
    var caml = "<View><Query>" + info.Filter + "</Query></View>";
    var list = ctx.get_web(info.web).get_lists().getByTitle(info.listName);
    var query = new SP.CamlQuery();
    query.set_viewXml(caml);

    // Contact include from viewFields
    var include = "";
    for (i = 0; i < info.viewFields.length; i++) {
        include += info.viewFields[i] + ","
    }

    include += include + 'ID';

    var listItems = list.getItems(query);
    ctx.load(listItems, "Include(" + include + ")")

    var delegateParameter = new Object();
    delegateParameter.info = info;
    delegateParameter.listItems = listItems;
    ctx.executeQueryAsync(
       Function.createDelegate(this, function () { onCamlQuerySuccessedForVerticalScrollingWebpart(delegateParameter); }),
       Function.createDelegate(this, onCamlQueryFailedForVerticalScrollingWebpart)
    );
}

function onCamlQuerySuccessedForVerticalScrollingWebpart(delegateParameter) {    
    var itemsEnumerator = delegateParameter.listItems.getEnumerator();
    var count = delegateParameter.listItems.get_count();
    var items = new Array(count);
    var j=0;
    while (itemsEnumerator.moveNext()) {
        var currentItem = new Object();
        var currentListItem = itemsEnumerator.get_current();       
        for(i=0; i< delegateParameter.info.viewFields.length; i++)
        {
            var fieldName = delegateParameter.info.viewFields[i];
            currentItem[fieldName] = currentListItem.get_item(fieldName);
            if (currentItem[fieldName].length > 200) {
                var index = currentItem[fieldName].indexOf(" ", 200);
                currentItem[fieldName] = currentItem[fieldName].substring(0, index) + "......";
            }
        }

        currentItem['ID'] = currentListItem.get_item('ID');
        items[j] = currentItem;
        j++;
    }

    fillScrollableDiv(delegateParameter.info, items); 
}

function onCamlQueryFailedForVerticalScrollingWebpart(sender, args) {
    alert('Request failed. ' + args.get_message() +
      '\n' + args.get_stackTrace());
}

 

SharePoint Online 创建门户网站系列之图片滚动

前 言  创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式、自带WebPart方式和JavaScript读取后台数据前台做展示的三种;  但是,对于复杂的展示...
  • linyustar
  • linyustar
  • 2015年03月03日 22:08
  • 1665

SharePoint 2013 使用嵌入JavaScript方式实现一个垂直滚动列表

本文介绍SharePoint 2013(其实也适用于2010,支持JavaScript OM) 中使用嵌入JavaScript方式实现一个垂直滚动列表: 当鼠标进入Item时停止滚动,当鼠标点击...
  • farawayplace613
  • farawayplace613
  • 2013年01月26日 22:27
  • 2233

sharepoint 2013 在office 365中 如何嵌入JS代码实现搜索功能

先写标题,开会后手敲文字。           function show() {             var msg = document.getElementById('topsearch...
  • jason_dct
  • jason_dct
  • 2014年05月07日 10:29
  • 929

sharepoint2013列表实现项目级权限控制

在sharepoint2013权限控制中,有时候会
  • zhuifeng1024
  • zhuifeng1024
  • 2014年07月07日 22:30
  • 1009

Sharepoint 2013 页面置顶(Topbar)小插件

Sharepoint  2013 页面置顶(Topbar)小插件 Topbar功能,当滚动条滑过一个页面高度时,出现Topbar图标,回滚到页面顶部。 当滚动到底边栏时,TopBar要跟着底边栏一起移...
  • Tristan_Dong
  • Tristan_Dong
  • 2014年03月10日 11:23
  • 1448

SharePoint定制开发个性皮肤

使用 SharePoint 2010 发布网站实际打造品牌  摘要:了解一些基本概念,以帮助您在 Microsoft SharePoint Server 2010 发布网站中创建引人注目的用户界...
  • jason_dct
  • jason_dct
  • 2013年07月25日 10:06
  • 1934

实现类似天猫列表消息自动垂直滚动效果

一、先看效果 前段时间在交流群里看到有小伙伴在问一个消息滚动列表怎么做,正好最近在学校准备毕业答辩,公司请了两周假,忙里偷闲把这个效果实现了,整体感觉还是不错的,代码量也比较少,练练手的同时也给小...
  • zhangke3016
  • zhangke3016
  • 2016年05月31日 22:00
  • 4784

SharePoint 2010 PowerShell(3)使用PowerShell管理列表

先让我来看一下我们有哪些列表模板可以使用,我们可以在SPWeb对象下使用ListTemplates参数来设置列表模板。首先,让我们先来初始化一个SPWeb的对象。PS>$spWeb=Get-SPWeb...
  • yun_liang1028
  • yun_liang1028
  • 2011年05月14日 21:55
  • 2697

js两种实现网页图片滚动的方法 和一种切换的方法

第一种用js的window.onload() 先随便来几个图片 路径自己设一下 ...
  • u014571132
  • u014571132
  • 2016年04月22日 10:03
  • 747

sharepoint母版页

SharePoint 2010母版页所用的还是ASP.NET 2.0中的技术。通过该功能,实现了页面框架布局与实际内容的分离。虽然在本质上自定义母版页的过程和以前版本的SharePoint大致相同,但...
  • wyaspnet
  • wyaspnet
  • 2011年02月24日 13:49
  • 1394
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SharePoint 2013 使用嵌入JavaScript方式实现一个垂直滚动列表
举报原因:
原因补充:

(最多只允许输入30个字)