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

时间:2022-11-26 16:23:50

这个想法是自己突然的一个想法,想想我们经常用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实现图片轮播也就马山可以做了!好了,大家试试看吧。不管你信不信,反正我是信了。下面是我测试的图片轮播,哎,我的样式太差了,好吧,这不是重点。

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

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

 

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