Sharepoint页面项目展示画廊纯前端实现，后端用list/library简单维护

需求背景：

Sharepoint页面项目展示画廊。图片+文字，要求图片与文字用Sharepoint Library维护，然后在sharepoint页面上被调用，生成项目展示画廊。

解决方案（纯前端），用ajax异步请求Sharepoint Library(allitems.aspx页面)的数据返回初始化slidesjs jQuery插件

$(function () {
    /**
     * @create: nelson 20150323
     * @initSlideshow :Project Slideshow initialization
     * @usage:
       $("#main_content").initSlideshow(options);
     */
    $.fn.initSlideshow = function (options) {
        var defaults = {
            url: "",
            contentId: "#onetidDoclibViewTbl0",
            nameCol: 2,
            titleLinkCol: 3
        };
        options = $.extend({}, defaults, options);
        this.each(function () {
            var This = $(this);
            $.ajax({
                type: "GET",
                url: options.url,
                dataType: "html",
                success: function (data) {
                    rawData = $(data).find(options.contentId).html();
                    setTimeout(function(){
                     if (rawData != "") {
                        This.html(formHtml(rawData, options.nameCol, options.titleLinkCol)).slidesjs({
                            width: 627,
                            height: 418,
                            play: {
                                active: false,
                                auto: true,
                                interval: 6000,
                                swap: true
                            },
                            callback: {
                                loaded: function (number) {
                                    This.find(".s_item").each(function () {
                                    var style = $(this).attr("style");
                                    $(this).attr("style", style + $(this).attr("bgImage").replace("Project Slideshow Images", "Project%20Slideshow%20Images"));
                                   });
                                },
                                start: function (number) {
                                    This.find(".s_item").each(function () {
                                     var style = $(this).attr("style");
                                     $(this).attr("style", style + $(this).attr("bgImage").replace("Project Slideshow Images", "Project%20Slideshow%20Images"));
                                    });
                                 },
                                 complete: function (number) {
                                     This.find(".s_item").each(function () {
                                         var style = $(this).attr("style");
                                         $(this).attr("style", style + $(this).attr("bgImage").replace("Project Slideshow Images", "Project%20Slideshow%20Images"));
                                     });
                                 }
                            }
                        });
                     }
                     data="";
                    },1000);
                }
            });
            function formHtml(rawData, nameCol, titleLinkCol) {
                var html = "";
                var _rawData = $(rawData);
                _rawData.find(".ms-itmhover").each(function () {
                    var _row = $(this);
                    var imgUrl = _row.find(">td:eq(" + nameCol + ")").find("a:eq(0)").attr("href"),
                        title = _row.find(">td:eq(" + titleLinkCol + ")").find("a:eq(0)").text(),
                        link = _row.find(">td:eq(" + titleLinkCol + ")").find("a:eq(0)").attr("href");
                    html += '<div class="s_item" bgImage=";background-image: url(' + imgUrl + ');" onclick="location=\'' + link + '\'"><div class="slides_desc"><span class="slides_desc_t">' + title + '</span></div></div>';
                });
                return html;
            }
        });
    }
});

 

转载于:https://www.cnblogs.com/fastmover/p/4361942.html