NiftyCube Rounded Corners Tutorial
来源:互联网 发布:java封装继承多态例子 编辑:程序博客网 时间:2024/05/16 08:02
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.
- NiftyCube Rounded Corners Tutorial
- NSWindow with rounded corners
- An Experiment in Rounded Corners
- create rounded corners with CSS
- 25 Rounded Corners Techniques with CSS
- Border-radius: create rounded corners with CSS!
- IE8 Rounded Corners (With No Images)
- [Java FX 2] Stage with rounded corners and background image
- Rounded Image
- Rounded Numbers
- Corners检测
- Check Corners
- Harris corners
- Rounded Corner Test
- Glide库加载rounded图片
- Rounded corner bitmaps on Android
- tutorial
- Tutorial
- JSON 盘点
- CXF生成客户端代码,两个声明导致 ObjectFactory 类中发生冲突
- 关于网关、DNS、DHCP、路由表、ARP表等的形象解释说明
- anoconda设置清华镜像
- AppleScript发送邮件
- NiftyCube Rounded Corners Tutorial
- 【黑科技】在alv中设置字体样式
- 全球首批通过Kubernetes认证,阿里云容器服务之最新解读
- 功能
- Bootstrap模态框
- [C++]深拷贝与浅拷贝
- 每日一练22
- java定时任务
- 《人民日报》刊文 | 王坚博士谈“云计算之后,我为什么要做城市大脑?”