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多页面框架系列文章的第二篇,上一篇(纯前 ...
随机推荐
- 6种php发送get、post请求的方法简明归纳与示例
方法1: 用file_get_contents 以get方式获取内容: <?php $url='http://www.jb51.net/'; $html = file_get_contents( ...
- Flash调用麦克风
import flash.events.ActivityEvent;import flash.media.Microphone;var deviceArray:Array = Microphone.n ...
- JS控制flash的方法
JS控制flash的一些方法:Play() ---------------------------------------- 播放动画 StopPlay()---------------------- ...
- 11月6日下午PHP分页查询(查询结果也显示为分页)
1.先把数据库里所有的数据分页显示在页面,并在显示数据的表格上方加上查询表单. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- 微信电脑版-微信for windows客户端发布
12月份微信Windows版客户端1.0 Alpha推出,昨天微信for windows 1.0客户端(测试版)发布更新,超过三亿人使用的聊天应用,现在登录Windows桌面.你可以在Windows上 ...
- 《征服 C 指针》摘录4:函数 与 指针
一.指向函数的指针 函数名可以在表达式中被解读成“指向函数的指针”,因此,正如代码清单 2-2 的实验那样,写成 func 就可以取得指向函数的指针. “指向函数的指针”本质上也是指针(地址),所以可 ...
- C和指针 第十二章 结构体 整体赋值 error: expected expression
定义结构体后整体赋值时发生错误 typedef struct NODE { struct NODE *fwd; struct NODE *bwd; int value; } Node; //声明变量 ...
- BitMap算法应用:Redis队列滤重优化
工作中有用到Redis滤重队列. 原来的方法如下: 方法一 为了保证操作原子性,使用Redis执行Lua脚本. 在脚本中的逻辑是,如果队列不超过某个数值,进行一次lrem操作(队列使用list结构), ...
- NOIp2014 解题报告
有史以来第一届面向社会征题的NOIp结束了.最开始以为面向社会征题会很难,但是这是我参加的最水的一次NOIp了. 由于停了两月的课,所以现在正在补文化科目就没时间打代码了.所以所有的题目就均不给出代码 ...
- android studio--百度定位集成001
安卓现在的大趋势已经是普遍使用androidstudio(安装包[https://yunpan.cn/ckc54idj3JVJb 访问密码 664f])了.这个是集成的一个好的环境. 今天来搞个百度 ...