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; } }); } });
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?