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;
            }
        });
    }
});
复制代码

 

posted @   Fast Mover  阅读(402)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
友情链接: A4纸尺寸 | 卡通头像 | +申请友情链接
点击右上角即可分享
微信分享提示