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

川长思鸟来 2021-12-12 13:41 94阅读 0赞

需求背景：

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 + ');" οnclick="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