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;
}
});
}
});
Sharepoint页面项目展示画廊纯前端实现,后端用list/library简单维护的更多相关文章
- vue后台_纯前端实现excel导出/csv导出
之前的文件下载功能一般是由前后端配合实现,由于项目需要,纯前端实现了一把excel的导出功能: 一.excel导出 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还 ...
- Http 前端向后端传递List参数
场景 在日常项目开发中,前端向后端传参时,可能会遇到需要传 List 类型的参数.比如批量删除时将多个 ID 以集合的形式传给后台. 前端传参 此时前端传参有两种方式: 1.多个同名 key key ...
- Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...
- 用github来展示你的前端页面吧
前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先 ...
- git常用命令总结以及用github来展示你的前端页面
命令小结 命令 功能 git init 把当前文件夹初始化为默认的git库 git add 文件名 向git库中添加一个文件 git rm 文件名 从git库中删除一个文件 git status 查 ...
- 纯前端实现词云展示+附微博热搜词云Demo代码
前言 最近工作中做了几个数据可视化大屏项目,其中也有用到了词云展示,以前做词云都是用python库来生成图片显示的,这次用了纯前端的实现(Ctrl+V真好用),同时顺手做个微博热搜的词云然后记录一下~ ...
- 纯CSS实现项目展示遮罩详情效果
本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYP ...
- 利用html5 canvas实现纯前端上传图片的裁剪
今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...
- Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...
随机推荐
- 深入理解springAOP
概念:AOP(Aspect-Oriented Programming)即面向切面编程.它是对传统的OOP(面向对象)编程的一种补充,在OOP中往往一个对象有什么行为我们就定义什么方法,对象与对象之间存 ...
- 20145204&20145212信息安全系统实验一
信息安全系统实验报告 博客链接
- ES5语法
ES5新语法主要是体现在Object和.Array操作,同时涉及到JSON. Function.Date 和 String类型上. 1.Object ES5最大的特点是对象扩展很多方法. 新建对象:c ...
- Charles抓Android的数据包
1. 获得Mac OS的IP地址 2. 对Android手机设置代理,主机IP是步骤1中获得的IP,端口8888
- Tomcat SSL的安装及配置中遇到问题
配置tomcat服务器利用SSL进行加密. 一.生成密钥库 具体生成方式就不讲了,tomcat支持的keystore的格式有JKS,PKCS11和PKCS12 JKS是jdk /bin目录下keyto ...
- UIScrollView的其他属性
@property(nonatomic) BOOL bounces; 设置UIScrollView是否需要弹簧效果 @property(nonatomic,getter=isScrollEnabled ...
- ACM 计算几何中的精度问题(转)
http://www.cnblogs.com/acsmile/archive/2011/05/09/2040918.html 计算几何头疼的地方一般在于代码量大和精度问题,代码量问题只要平时注意积累模 ...
- BZOJ2007——[Noi2010]海拔
1.题意:一个裸的最小割 2.分析:直接转成对偶图最短路就好了,水爆了!(雾) #include <queue> #include <cstdio> #include < ...
- iOS上架ipa上传问题那些事
iOS上架ipa上传问题那些事 原文: http://www.jianshu.com/p/1e22543285c2 字数513 阅读312 评论0 喜欢1 通过xcode直接打包上传,不会提示你的ip ...
- iOS 获取沙盒路径方法
//获取家目录路径的函数: NSString *homeDir = NSHomeDirectory(); //获取Documents目录路径的方法: NSArray *paths = NSSearch ...