需求背景:

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. linux系统的学习

    通过<鸟哥的linux私房菜>的学习,自己得到的收获! 关机与重启 shutdown -k now "message" 用以发送所有信息,并不是真的关机.还可以登录新的 ...

  2. js 常用函数收集(基础)

    (1).判断是否为数值 function isNum(obj){ return !isNaN(parseFloat(obj)) && isFinite(obj); } (2).判断是否 ...

  3. 最简单的STM32入门教程----闪烁LED

    本文讲述的是如何从零开始,使用keil建立一个简单的STM32的工程,并闪烁LED灯,给小白看. 第零步,当然首先你得有一个STM32的板子,其IO口上接了一个LED... 第一步,建立一个文件夹0. ...

  4. Spring 入门知识

    ------------------------------------------------------------------------------------- Spring是什么? Spr ...

  5. Node.js Stream-进阶篇

    作者:美团点评技术团队链接:https://zhuanlan.zhihu.com/p/21681115来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 上篇(基础篇)主要 ...

  6. tyvj1087 sumsets

    背景 广东汕头聿怀初中 Train#2 Problem1 描述     正整数N可以被表示成若干2的幂次之和.例如,N = 7时,共有下列6种不同的方案:1) 1+1+1+1+1+1+12) 1+1+ ...

  7. AssetBundle loading failed because.....已解决

    http://blog.csdn.net/ldghd/article/details/9632455 *****************************      一      ******* ...

  8. Hibernate参数一览表

    参考文章地址:http://www.blogjava.net/i369/articles/194855.html Hibernate 参数设置一览表 属性名 用途 hibernate.dialect ...

  9. 学习JVM GarbageCollection

    前言 Java和C++之间显著的一个区别就是对内存的管理.Java和C++把内存管理的权利赋予给开发人员的方式不同,Java拥有一套自动的内存回收系统(Garbage Collection,GC)简称 ...

  10. [Linux][PHP]安装swoole扩展

    1.下载swoole 2.解压并配置 /usr/local/php/bin/phpize ./configure --enable-swoole-debug --enable-sockets --en ...