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; } }); } });