利用jQuery定制Sharepoint的WebPart样式

来啦，美工大哥要把每个WebPart做成这样（里面的先不管，咱们暂时focus在边框和标题栏上）：

 

怎么搞？改CSS？呵呵，行吗？枪毙掉了

那怎么办，有办法，有办法，先在moss里面把webpart的边框和标题去掉，然后一个个都用代码来做，oh, my god, 数数咱们网站有多少个webpart吧，我欲哭无泪啊.....


嘿嘿，先别哭！ 

   也不就是一个个的webpart吗？看看css中的定义，哦，每个webpart的标题的class都是ms-wpheader，呵呵，想法有了，先通过这个找到每个webpart的所在的table，然后用javascript来生成边框，再把标题改掉；好，美工大哥，再配合一下，帮我做个边框吧，咱不搞高深的，搞个table, 3行3列，中间是webpart的内容，其他的你用几个图凑个边框吧；对啦，别走，还有标题两边的小圆弧，kao，有意见，谁让你这么设计的？

   下面写js了，core.js? 乖乖那个隆地冬，那么长，不想看了，也不想利用他啥了，呵呵，用个库吧，对啦,jQuery，这小玩意还真好用，20多K，就用他了，再说了，有了他，以后有空还方便顺便再给咱们的moss来点ajax啥的.

1. 废话少说，先把jQuery加进去吧，好，default.master, <script src="jquery.js" type="text/javascript" /> OK.

2. 还是default.master，开始写脚本啦

 $(function(){

...}); 在这个里面写吧；干嘛的？查查jQuery手册哦

3. 先找到webpart的大table吧，标题就是第一行

 $("tr.ms-WPHeader").parent().parent().parent().parent().parent().parent(); //这个是要操作webpart的table

4. 先搞边框

f_SetBorder

 

5. 再搞标题，这个烦了，逻辑是先找到原来的标题，如果有连接的，生成的tr中就有后面的更多，否则就没有，再把老的标题隐藏，上代码吧

f_setHeader

 

6. 还有个函数，放在最前面吧，是生成id用的

Code


7. 最后写好的jQuery load函数

Code

 

preview一下，OK? 啥，你的不正常，为啥？哦，原来是css那边的问题，晕，图片和css可是美工大哥做的，我可不能乱贴人家的劳动成果哦，自己搞一下吧.....

 

对啦，改了标题是有一些后果的哦，啥后果？改了你就知道啦...

 

posted @ 2008-10-09 10:34  billqian  阅读(1787)  评论(3)    收藏  举报