需求背景:

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

Sharepoint页面项目展示画廊纯前端实现,后端用list/library简单维护的更多相关文章

  1. vue后台_纯前端实现excel导出/csv导出

    之前的文件下载功能一般是由前后端配合实现,由于项目需要,纯前端实现了一把excel的导出功能: 一.excel导出 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还 ...

  2. Http 前端向后端传递List参数

    场景 在日常项目开发中,前端向后端传参时,可能会遇到需要传 List 类型的参数.比如批量删除时将多个 ID 以集合的形式传给后台. 前端传参 此时前端传参有两种方式: 1.多个同名 key key ...

  3. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...

  4. 用github来展示你的前端页面吧

    前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先 ...

  5. git常用命令总结以及用github来展示你的前端页面

    命令小结 命令  功能 git init 把当前文件夹初始化为默认的git库 git add 文件名 向git库中添加一个文件 git rm 文件名 从git库中删除一个文件 git status 查 ...

  6. 纯前端实现词云展示+附微博热搜词云Demo代码

    前言 最近工作中做了几个数据可视化大屏项目,其中也有用到了词云展示,以前做词云都是用python库来生成图片显示的,这次用了纯前端的实现(Ctrl+V真好用),同时顺手做个微博热搜的词云然后记录一下~ ...

  7. 纯CSS实现项目展示遮罩详情效果

    本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYP ...

  8. 利用html5 canvas实现纯前端上传图片的裁剪

    今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...

  9. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...

随机推荐

  1. Matlab中double,im2double,mat2gray区别

    转载:http://blog.sina.com.cn/s/blog_6c41e2f30101559d.html ****************假设某图像数据A(uint8格式)*********** ...

  2. Android通过名称找图片

    开发中往往会遇到这种情况:在Drawable文件夹中有若干张相似的图片(这里的相似指的是不仅图片名称相似,用途也相似),现在要根据用户的某个操作选出其中的一张.例如,在类似微信语音功能的开发中,按住“ ...

  3. LYDSY模拟赛day1 Tourist Attractions

    /* 假设路径是 a − b − c − d,考虑枚举中间这条边 b − c,计 算有多少可行的 a 和 d. 设 degx 表示点 x 的度数,那么边 b − c 对答案的贡献为 (degb − 1 ...

  4. 练习:使用nmcli 配置网络连接

    显示所有连接 # nmcli con show 显示活动连接的所有配置信息 # nmcli con show "System eth0" --->引号内为连接的网卡名称 显示 ...

  5. linux磁盘分区模式

    linux磁盘分区模式 模式一:MBR 1)主分区不超过四个 2)单个分区容量最大2TB 模式二:GPT 1)主分区个数"几乎"没有限制(原因:在GPT的分区表中最多可以支持128 ...

  6. 逻辑回归LR

    逻辑回归算法相信很多人都很熟悉,也算是我比较熟悉的算法之一了,毕业论文当时的项目就是用的这个算法.这个算法可能不想随机森林.SVM.神经网络.GBDT等分类算法那么复杂那么高深的样子,可是绝对不能小看 ...

  7. C和指针 第四章 习题

    4.1正数的n的平方根可以通过: ai+1= (ai + n / ai ) / 2 得到,第一个a1是1,结果会越来越精确. #include <stdio.h> int main() { ...

  8. iOS如何跳到系统设置里的各种设置界面

    最近项目需要授权时候跳转到相关的设置页面,自己总结了一下,想写到简书上来,和大家分享一下. 在本人测试后,iOS8和9都没有问题,直接跳转到各个页面,这可能苹果对这方面开放了吧.第一步修改plist文 ...

  9. js 阻止事件冒泡

    function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的st ...

  10. XCTest各种断言

    XCTFail(format…) 生成一个失败的测试: XCTAssertNil(a1, format...)为空判断,a1为空时通过,反之不通过: XCTAssertNotNil(a1, forma ...