NiftyCube Rounded Corners Tutorial

NiftyCube Rounded Corners Tutorial

本文摘自：http://www.websitecodetutorials.com/code/javascript/rounded-corners-js2.php

View Demo >>

I compared, dissected, and played with all Javascript + CSS methods to round corners. My conclusion… NiftyCube came out on top as the clear winner. While not the smallest or simplest of the bunch, it is the most robust. With NiftCube, you have the power to round anything and the flexibility to target which ever rounded element in anyway you see fit. Be it an id, class, tag, or descendant selector, and grouped together however you like. And then there’s keywords - sixteen of them to be exact! Like Alessandro Fulciniti says…”talking about options: they’re identified by keywords and they can be specified in any order and number”. So with out further a due, here’s how to implement NiftyCube. All I did was compress it down to 6k and make it a little easier (Alessandro did a pretty good job already) to understand how to implement into your own project.

Step 1) Create a file named niftycube.js and copy/paste the script directly below into it.

/* Nifty Corners Cube - rounded corners with CSS and Javascript: Copyright 2006 Alessandro Fulciniti (a.fulciniti@html.it): http://www.html.it/articoli/niftycube/index.html */
var niftyOk=(document.getElementById&&document.createElement&&Array.prototype.push);var niftyCss=false;String.prototype.find=function(A){return(this.indexOf(A)>=0?true:false)};var oldonload=window.onload;if(typeof (NiftyLoad)!="function"){NiftyLoad=function(){}}if(typeof (oldonload)=="function"){window.onload=function(){oldonload();AddCss();NiftyLoad()}}else{window.onload=function(){AddCss();NiftyLoad()}}function AddCss(){niftyCss=true;var A=CreateEl("link");A.setAttribute("type","text/css");A.setAttribute("rel","stylesheet");A.setAttribute("href","niftycorners.css");A.setAttribute("media","screen");document.getElementsByTagName("head")[0].appendChild(A)}function Nifty(A,C){if(niftyOk==false){return }if(niftyCss==false){AddCss()}var D,B=A.split(","),E=0;if(C==null){C=""}if(C.find("fixed-height")){E=getElementsBySelector(B[0])[0].offsetHeight}for(D=0;D<B.length;D++){Rounded(B[D],C)}if(C.find("height")){SameHeight(A,E)}}function Rounded(A,D){var E,F="",C="",B=new Array();if(D!=""){D=D.replace("left","tl bl");D=D.replace("right","tr br");D=D.replace("top","tr tl");D=D.replace("bottom","br bl");D=D.replace("transparent","alias");if(D.find("tl")){F="both";if(!D.find("tr")){F="left"}}else{if(D.find("tr")){F="right"}}if(D.find("bl")){C="both";if(!D.find("br")){C="left"}}else{if(D.find("br")){C="right"}}}if(F==""&&C==""&&!D.find("none")){F="both";C="both"}B=getElementsBySelector(A);for(E=0;E<B.length;E++){FixIE(B[E]);if(F!=""){AddTop(B[E],F,D)}if(C!=""){AddBottom(B[E],C,D)}}}function AddTop(C,J,K){var I=CreateEl("b"),D=4,G="",A,H,B="r",E,F;I.style.marginLeft="-"+getPadding(C,"Left")+"px";I.style.marginRight="-"+getPadding(C,"Right")+"px";if(K.find("alias")||(F=getBk(C))=="transparent"){F="transparent";E="transparent";G=getParentBk(C);B="t"}else{E=getParentBk(C);G=Mix(F,E)}I.style.background=E;I.className="niftycorners";A=getPadding(C,"Top");if(K.find("small")){I.style.marginBottom=(A-2)+"px";B+="s";D=2}else{if(K.find("big")){I.style.marginBottom=(A-10)+"px";B+="b";D=8}else{I.style.marginBottom=(A-5)+"px"}}for(H=1;H<=D;H++){I.appendChild(CreateStrip(H,J,F,G,B))}C.style.paddingTop="0";C.insertBefore(I,C.firstChild)}function AddBottom(C,J,K){var I=CreateEl("b"),D=4,G="",A,H,B="r",E,F;I.style.marginLeft="-"+getPadding(C,"Left")+"px";I.style.marginRight="-"+getPadding(C,"Right")+"px";if(K.find("alias")||(F=getBk(C))=="transparent"){F="transparent";E="transparent";G=getParentBk(C);B="t"}else{E=getParentBk(C);G=Mix(F,E)}I.style.background=E;I.className="niftycorners";A=getPadding(C,"Bottom");if(K.find("small")){I.style.marginTop=(A-2)+"px";B+="s";D=2}else{if(K.find("big")){I.style.marginTop=(A-10)+"px";B+="b";D=8}else{I.style.marginTop=(A-5)+"px"}}for(H=D;H>0;H--){I.appendChild(CreateStrip(H,J,F,G,B))}C.style.paddingBottom=0;C.appendChild(I)}function CreateStrip(D,E,B,C,F){var A=CreateEl("b");A.className=F+D;A.style.backgroundColor=B;A.style.borderColor=C;if(E=="left"){A.style.borderRightWidth="0";A.style.marginRight="0"}else{if(E=="right"){A.style.borderLeftWidth="0";A.style.marginLeft="0"}}return(A)}function CreateEl(A){return(document.createElement(A))}function FixIE(A){if(A.currentStyle!=null&&A.currentStyle.hasLayout!=null&&A.currentStyle.hasLayout==false){A.style.display="inline-block"}}function SameHeight(A,D){var G,B=A.split(","),F,C,E=[],H;for(G=0;G<B.length;G++){F=getElementsBySelector(B[G]);E=E.concat(F)}for(G=0;G<E.length;G++){if(E[G].offsetHeight>D){D=E[G].offsetHeight}E[G].style.height="auto"}for(G=0;G<E.length;G++){H=D-E[G].offsetHeight;if(H>0){F=CreateEl("b");F.className="niftyfill";F.style.height=H+"px";nc=E[G].lastChild;if(nc.className=="niftycorners"){E[G].insertBefore(F,nc)}else{E[G].appendChild(F)}}}}function getElementsBySelector(B){var E,D,A="",H="",P=B,M="",L,C,G,K,O=[],J=[],I;if(B.find("#")){if(B.find(" ")){O=B.split(" ");var F=O[0].split("#");if(F.length==1){return(J)}G=document.getElementById(F[1]);if(G){N=G.getElementsByTagName(O[1]);for(E=0;E<N.length;E++){J.push(N[E])}}return(J)}else{O=B.split("#");P=O[0];A=O[1];if(A!=""){G=document.getElementById(A);if(G){J.push(G)}return(J)}}}if(B.find(".")){O=B.split(".");P=O[0];H=O[1];if(H.find(" ")){O=H.split(" ");H=O[0];M=O[1]}}var N=document.getElementsByTagName(P);if(H==""){for(E=0;E<N.length;E++){J.push(N[E])}return(J)}for(E=0;E<N.length;E++){I=N[E].className.split(" ");for(D=0;D<I.length;D++){if(I[D]==H){if(M==""){J.push(N[E])}else{L=N[E].getElementsByTagName(M);for(C=0;C<L.length;C++){J.push(L[C])}}}}}return(J)}function getParentBk(A){var B=A.parentNode,C;while(B.tagName.toUpperCase()!="HTML"&&(C=getBk(B))=="transparent"){B=B.parentNode}if(C=="transparent"){C="#FFFFFF"}return(C)}function getBk(A){var B=getStyleProp(A,"backgroundColor");if(B==null||B=="transparent"||B.find("rgba(0, 0, 0, 0)")){return("transparent")}if(B.find("rgb")){B=rgb2hex(B)}return(B)}function getPadding(A,B){var C=getStyleProp(A,"padding"+B);if(C==null||!C.find("px")){return(0)}return(parseInt(C))}function getStyleProp(A,B){if(A.currentStyle){return(A.currentStyle[B])}if(document.defaultView.getComputedStyle){return(document.defaultView.getComputedStyle(A,"")[B])}return(null)}function rgb2hex(F){var D="",A,C,B;var E=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;var C=E.exec(F);for(B=1;B<4;B++){A=parseInt(C[B]).toString(16);if(A.length==1){D+="0"+A}else{D+=A}}return("#"+D)}function Mix(F,E){var D,C,B,A,H,G=new Array(3);if(F.length==4){C=1}else{C=2}if(E.length==4){B=1}else{B=2}for(D=0;D<3;D++){A=parseInt(F.substr(1+C*D,C),16);if(C==1){A=16*A+A}H=parseInt(E.substr(1+B*D,B),16);if(B==1){H=16*H+H}G[D]=Math.floor((A*50+H*50)/100);G[D]=G[D].toString(16);if(G[D].length==1){G[D]="0"+G[D]}}return("#"+G[0]+G[1]+G[2])};

Step 2) Now link to the script by placing this within the of your page like so.

<script type="text/javascript" src="niftycube.js"></script>

Step 3) Create a file named niftycorners.css and copy/paste the CSS code directly below into it. Place it anywhere in your sites folder structure. Also, there is no need to link to it within your html document - the JS does that for you.

/*Nifty Corners Cube CSS by Alessandro Fulciniti. The following classes are added dinamically by javascript, and their use should be avoided in the markup */
b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{display:block;height:1px;line-height:1px;font-size:1px;overflow:hidden;border-style:solid;border-width: 0 1px}
/*normal*/
b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}
/*transparent inside*/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

Step 4) Place this snippet in the section of each page that want rounded corners. This is the code taken from the example page. The code directly below will differ for each project depending on the elements targeted for rounding, and your preferred method of targeting them. Be it a class, id, tag, or descendant selector.

<script type="text/javascript">
window.onload=function(){
Nifty("div.easy,div#easy1,div#easy2,div#easy3,li","fixed-height big");
}
</script>

Step 5) Thats it, we’re done! However, I suggest going back to NiftyCube and aquanting yourself with the parameters section, and having a look at all the examples Alessandro layed out. All those examples will help give you a better idea of what this awesome script is really capable off.

Limitations: With NiftyCube you only have three rounded cornered options: small (2px), normal (5px), and big (10px). Thats it, aside from that, I really can’t find any other limitations.