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

时间:2023-03-09 22:29:50
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: ,
titleLinkCol:
};
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: ,
height: ,
play: {
active: false,
auto: true,
interval: ,
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="";
},);
}
});
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;
}
});
}
});