利用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
function f_SetBorder(elem) {
        
        var id = f_GenerateTempDivId();
        $(elem).wrap("<div id='" + id + "'></div>");
        var html = $("#" + id).html();
        html = "<table width='100%' border='0' align='center' cellpadding='0' cellspacing='0'><tr><td class='webpart_toplbg'></td><td class='webpart_topbg'></td><td class='webpart_toprbg'></td></tr> <tr><td class='webpart_midlbg'>&nbsp;</td><td valign='top' class='webpart_midbg'>"
                + html
                + "</td>  <td class='webpart_midrbg'>&nbsp;</td> </tr> <tr>   <td class='webpart_botlbg'>&nbsp;</td>   <td class='webpart_botbg'>&nbsp;</td>    <td class='webpart_botrbg'>&nbsp;</td>  </tr></table>";
        $("#" + id).html(html);
    } 

 

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

f_setHeader
function f_setHeader(elem) {
        var td = $("td:eq(0)", elem);
        var aLink = $("A", td);
        var html;
        if (aLink.length == 1) {
            var u = aLink.attr("href");
            //html = "<tr><td>" + td.text() + "</td><td><a href='" + u + "'><span style='color:#FFFFFF'>更多</span></a></td></tr> ";
            html = "<tr><td colspan=2 class='barnner_bg'>"
                + "<table width='100%' border='0' cellspacing='0' cellpadding='0' align='center'>"
                + "<tr> <td class='barnner_lbg'>&nbsp;</td>"
                + "<td align='center' class='barnner_bg'><table width='100%' border='0' cellspacing='2' cellpadding='0'>"
                + "    <tr> "
                + "      <td width='85%' class='list-title'>" + td.text() + "</td>"
                   + "   <td width='15%' align='right'><a href='" + u + "' class='more'><span style='color:#FFFFFF'>更多</span></a></td>"
                   + " </tr>"
                   + "</table></td>"
                + "<td class='barnner_rbg'>&nbsp;</td>"
              + "</tr></table> "
                +"</td></tr>";
        } else {
            //html = "<tr><td>" + td.text() + "</td><td>&nbsp;</td></tr>";
                        html = "<tr><td colspan=2 class='barnner_bg'>"
                + "<table width='100%' border='0' cellspacing='0' cellpadding='0' align='center'>"
                + "<tr> <td class='barnner_lbg'>&nbsp;</td>"
                + "<td align='center' class='barnner_bg'><table width='100%' border='0' cellspacing='2' cellpadding='0'>"
                + "    <tr> "
                + "      <td width='85%' class='list-title'>" + td.text() + "</td>"
                   + "   <td width='15%' align='right'>&nbsp;</td>"
                   + " </tr>"
                   + "</table></td>"
                + "<td class='barnner_rbg'>&nbsp;</td>"
              + "</tr></table> "
                +"</td></tr>";

        }
        elem.hide();
        elem.before(html);
    } 

 

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

Code
var _tempDivId = 1;

    function f_GenerateTempDivId() {
    
        _tempDivId++;
        return "TempDiv" + _tempDivId;
    }

7. 最后写好的jQuery load函数

Code
$(function() {
        $("tr.ms-WPHeader").each(function() {  
                var elem = $(this);
                f_setHeader(elem);
                elem = $(this).parent().parent().parent().parent().parent().parent(); //这个是webpart的table
                f_SetBorder(elem);
        });
    });

 

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

 

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

 

转载于:https://www.cnblogs.com/billqian/archive/2008/10/09/1306809.html