SharePoint 门户网站的图片轮播-页面定制

简介: 这个想法是自己突然的一个想法,想想我们经常用SharePoint做门户网站,不知道你们多数项目都是怎么完成的,我们客户要求的效果都还是很严格的,所有展现起来,还是很漂亮的,但是很多时候的效果,还是难以展现,实在让人头疼。

这个想法是自己突然的一个想法,想想我们经常用SharePoint做门户网站,不知道你们多数项目都是怎么完成的,我们客户要求的效果都还是很严格的,所有展现起来,还是很漂亮的,但是很多时候的效果,还是难以展现,实在让人头疼。好在SharePoint还给我们提供了对象模型,我们可以使用web部件来完成展现,不过这不是我们今天的主题,web部件的基本功要求比较高,尤其编程能力,我的编程不好,大学学的C++就不好,自学的asp.net更加一知半解,好了,废话又多了,大家不要见怪啊!我们今天要做的,是通过js脚本来实现图片轮播,看看新浪首页的图片轮播吧,还是可以的,我们呢就用一段js实现,好了,废话不说了,开始动手去做!Come on!!

1、还记得上次我们讨论的SharePoint四个定制页么?!什么。。不记得了,自己回去找找。。

http://www.cnblogs.com/jianyus/archive/2011/10/13/2210977.html

大家参考一下AllItems页得定制,这个我就不多说了,看看,所有的图片都在上面,我们让它动起来!

2、想想js轮播至少需要src,貌似也只需要src,好了,问题就在这,图片都在这了,我们怎么让他轮播呢?!好吧,不卖关子了,就是简单的

document.getElementById("").src;//js语句

这样的js语句就行了,然后我嫩需要做的就是双引号里面的ID了,对吧。好,开动脑筋,怎么获取这个ID,经过很长时间的思考,多张时间呢?!我也不记得了。。反正很长!其实,页面上显示的是四张图片,每张图片都是有xsl语句循环出来的,我们要做的,就是在img标签上,添加一个ID的属性。

<img  src="{@_x76f8__x7247_}" width="95" height="140"/>

就像昨天的img标签,还记得么?!在id上加上 id="p{@ID}" 就是<img id="p{@ID}" src="{@_x76f8__x7247_}" width="95" height="140"/>

我用js alert了一下document.getElementById("p1").src;,确实是图片的路径,没有问题。好了,第一张图片是p1,第二张是p2...类推

3、相信得到这个结果了,大家的js实现图片轮播也就马山可以做了!好了,大家试试看吧。不管你信不信,反正我是信了。下面是我测试的图片轮播,哎,我的样式太差了,好吧,这不是重点。

ps:话说我的水平有限,大家觉得简单不要见笑啊,就是给大家提供一个不同的思路,我的理念是将定制进行到底!拒绝代码!

 

作者:霖雨
出处:http://www.cnblogs.com/jianyus
本文版权归 霖雨和博客园共有,欢迎转载,但请注明出处。

目录
相关文章
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
11月前
|
前端开发 数据库
Discuz实现tab切换版块
昨天闲得没事,就去重构了整个discuz.htm的文件。但是, 并没有这么顺利,于是去了空间吐槽了一波。 最神奇地就是,早上打开本地,tab切换突然活了,思索了一下,大概是存缓的问题了吧。
47 0
|
存储 前端开发 数据可视化
WordPress 网站开发需要的十大联系表单插件
WordPress网站建设常遇见客户的表单需求,那么如何在众多插件中选择一款,就要对所有插件有所了解,北京六翼信息技术有限公司的开发工程师总结了WordPress建站十大插件,参考地址:joowp。com让我们来看看一些最好的 WordPress 表单插件,它们每个都提供高级选项,例如自定义表单、拖放字段、条件逻辑、条目管理等等。
WordPress 网站开发需要的十大联系表单插件
|
Web App开发 前端开发 JavaScript
SharePoint Online 创建门户网站系列之定制栏目
前 言   SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受。   下面,我们就开始学习如何定制SPO的二级页面和详细页面。
1417 0
|
存储 JavaScript 数据可视化
SharePoint Online 创建门户网站系列之图片滚动
前 言   创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式、自带WebPart方式和JavaScript读取后台数据前台做展示的三种;   但是,对于复杂的展示来说,这些方式还是会比较难以实现,虽然对于首页的图片轮播来说,通过JavaScript方式已经完全能够胜任,但是,我还是想通过这个栏目,为大家介绍如何使用沙盒解决方案创建WebPart,来完成更加复杂的前台展示。
1568 0
|
JavaScript 前端开发
SharePoint Online 创建门户网站系列之导航
前 言   关于SharePoint Online中的导航,基本是由Html + Css + JavaScript组成效果以及样式,然后在后台列表或者SharePoint Online元数据导航当做数据源进行展示,通常数据源为列表的我们称之为自定义导航。
1451 0
|
XML 数据格式
SharePoint 2013 图文开发系列之网站栏
原文:SharePoint 2013 图文开发系列之网站栏   网站栏的本质,就是一个xml的描述文件,所以创建过程,基本就是通过Feature部署一个Xml文件,然后修改Xml文件的网站栏描述。 1、添加新项目,选择SharePoint 2013 空项目,如下图: 2、选择调试网站和解决方...
902 0