Use jquery to customize SharePoint webpart styles

Come on, Big Brother art wants to make every webpart like this (no matter which part is inside, we will focus on the border and the title bar for now ):

 

What should I do? Change CSS? Okay? Shot down

What should I do? There is a way to remove the borders and titles of webparts in Moss, and then use code one by one. Oh, my God, count the number of webparts on our website .....

Hey, don't cry first!

Isn't it a webpart? Look at the definition in CSS. Oh, the class of the title of each webpart is MS-wpheader. Well, if you have an idea, first find the table where each webpart is located, then use JavaScript to generate a border, and then change the title. Good, Big Brother art, work with me to create a border for me. I don't want to make a deep table, 3 rows and 3 columns. The content in the middle is the content of the webpart. You can use several other diagrams to create a border. Right, don't go. There are also small arcs on both sides of the title. Kao, have opinions, who asked you to design it like this?

I wrote JavaScript below, core. js? Cool, it's so long that I don't want to read it, and I don't want to take advantage of it. Oh, use a library, right, jquery. This is really useful, more than 20 K, let's use him. Let's talk about it. With him, we can give our moss some Ajax stuff when we are free.

1. Add jquery first. Well, default. Master, <SCRIPT src = "jquery. js" type = "text/JavaScript"/> OK.

2. Still default. master. Start to write the script.

$ (Function (){

...}); Write it in it; why? Check the jquery manual.

3. First find the large table of the webpart. The title is the first line.

$ ("Tr. MS-wpheader "). parent (). parent (). parent (). parent (). parent (). parent (); // This is the table to operate the webpart.

4. Create borders first

F_setborder
Function f_setborder (ELEM ){

VaR id = f_generatetempdivid ();
$ (ELEM). Wrap ("<Div id = '" + ID + "'> </div> ");
VaR html = $ ("#" + id).html ();
Html = "<Table width = '000000' 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> <TD class = 'webpart _ botlbg '> & nbsp; </TD> <TD class = 'webpart _ botbg'> & nbsp; </TD> <TD class = 'webpart _ botrbg '> & nbsp; </TD> </tr> </table> ";
$ ("#" + Id).html (HTML );
}

 

5. the logic is to find the original title first. If there is a connection, there will be more in the generated TR; otherwise, no, hide the old title and use the code.

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> <a href = '" + u + "'> <span style = 'color: # ffff'> more </span> </a> </TD> </tr> ";
Html = "<tr> <TD colspan = 2 class = 'barnner _ BG '>"
+ "<Table width = '000000' border = '0' cellspacing = '0' cellpadding = '0' align = 'center'>"
+ "<Tr> <TD class = 'barnner _ LBG '> & nbsp; </TD>"
+ "<TD align = 'center' class = 'barnner _ BG '> <Table width = '000000' border = '0' cellspacing = '2' cellpadding = '0'>"
+ "<Tr>"
+ "<TD width = '000000' class = 'LIST-title'>" + TD. Text () + "</TD>"
+ "<TD width = '000000' align = 'right'> <a href = '" + u + "'class = 'more'> <span style = 'color: # ffff'> more </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 = '000000' border = '0' cellspacing = '0' cellpadding = '0' align = 'center'>"
+ "<Tr> <TD class = 'barnner _ LBG '> & nbsp; </TD>"
+ "<TD align = 'center' class = 'barnner _ BG '> <Table width = '000000' border = '0' cellspacing = '2' cellpadding = '0'>"
+ "<Tr>"
+ "<TD width = '000000' class = 'LIST-title'>" + TD. Text () + "</TD>"
+ "<TD width = '000000' align = 'right'> & nbsp; </TD>"
+ "</Tr>"
+ "</Table> </TD>"
+ "<TD class = 'barnner _ rbg'> & nbsp; </TD>"
+ "</Tr> </table>"
+ "</TD> </tr> ";

}
ELEM. Hide ();
ELEM. Before (HTML );
}

 

6. There is also a function, which should be placed at the very beginning. It is used to generate the ID.

Code
VaR _ tempdivid = 1;

Function f_generatetempdivid (){

_ Tempdivid ++;
Return "tempdiv" + _ tempdivid;
}

7. The final jquery load function

Code
$ (Function (){
$ ("Tr. MS-wpheader"). Each (function (){
VaR ELEM = $ (this );
F_setheader (ELEM );
ELEM = $ (this). Parent (). Parent (); // This is the table of the webpart.
F_setborder (ELEM );
});
});

 

Preview, OK? What, you are not normal, why? Oh, it turned out to be a problem with CSS. Dizzy, pictures and CSS are made by the artist. I can't mess up people's work results. Let's do it by yourself .....

 

Right. There are some consequences when I change the title. What are the consequences? You will know after you change it...