渐进式圆角组件
类别: HTML/JS
标签: Corner, JavaScript, JsHook
目前主流的浏览器除了msie内核的几乎都能支持CSS3的属性，而过去对于页面圆角的制作有这么几种方法：背景图，滑动门，通过js叠加很多小的div构成圆角，或者4个无语义的节点贴4个脚等等。
一方面在页面中增加了很多无语意得节点，不利于SEO等种种弊端，如果用js插入也增加了大量费时DOM操作。如果页面上有几十个圆角，所消耗的时间可想而知。如今有了CSS3这套方案，可以采用多背景图很轻松地解决这个问题，或者使用border-radius。
对于Mozilla内核的我们使用私有属性-moz-border-radius，对于Webkit内核的我们采用其私有属性-webkit-border-radius，对于Opera内核的我们采用border-radius，Msie我们就用传统方案解决它。
今天我们构建一个JsHook触发方式,并按HTML5,使用自定义属性Js数据源
对于JsHook的说明：Hook仅能出现在id和class中，命名规则是j_UppCamelCase
对于Js数据源的约定：使用HTML元素的自定义属性：data-xxxxx
上面这2条可以看看 前端JavaScript相关的小Tips
那么我们首先编写一个绑定Hook的函数，
function getHook(root,type){ var r =[]; var re = /j_(\w+)/; var e = (root||document).getElementsByTagName(type || "*"); for(var i = 0;i<e.length;i++) { var m = re.exec(e[i].className)||re.exec(e[i].id); if(m)r.push({'node':e[i],'hook':m[1]}); } return r; } function load_hook_event(root) { var re = /j_(\w+)/; var fns = {}; k = getHook(); for(var i = 0;i<k.length;i++) { var f = fns[k[i].hook]; if (!f) { f = eval("Orange.init_"+k[i].hook); fns[k[i].hook] = f; } f && f(k[i].node); } }
提示：你可以先修改部分代码再运行。
现在正式的做圆角组件，代码如下
Orange.init_corner= function(o){ var k,bs=[],i,j; var BorderRadius ={ mozilla:{ tl:'-moz-border-radius-topleft', tr:'-moz-border-radius-topright', br:'-moz-border-radius-bottomright', bl:'-moz-border-radius-bottomleft' }, webkit:{ tl:'-webkit-border-top-left-radius', tr:'-webkit-border-top-right-radius', br:'-webkit-border-bottom-right-radius', bl:'-webkit-border-bottom-left-radius' }, opera:{ tl:'border-top-left-radius', tr:'border-top-right-radius', br:'border-bottom-right-radius', bl:'border-bottom-left-radius' } } var cheakCss = function(s){return s.replace(/-([a-z])/g,function(k){return k.toUpperCase();}).replace(/-/g,"");} var getattr = function(elem,name){return elem[name] || elem.getAttribute(name) || '';} var creat = function(type){return document.createElement(type);} if(getattr(o,'data_corner')&&(k=getattr(o,'data_corner').split(" "))) { for(i=0;i<k.length;i++) { switch(k[i]){ case 'top': bs.push("tl",'tr'); break; case 'bottom': bs.push("bl",'br'); break; case 'left': bs.push("tl",'bl'); break; case 'right': bs.push("tr",'br'); break; case 'topLeft': bs.push("tl"); break; case 'topRight': bs.push("tr"); break; case 'bottomLeft': bs.push("bl"); break; case 'bottomRight': bs.push("br"); break; default: bs.push('tl','tr','bl','br'); } } } if(document.getBoxObjectFor) for(i=0;i<bs.length;i++) o.style[cheakCss(BorderRadius.mozilla[bs[i]])]= getattr(o,'data_cornerRadius')||'4px'; else if(window.google||window.openDatabase) for(i=0;i<bs.length;i++) o.style[cheakCss(BorderRadius.webkit[bs[i]])]= getattr(o,'data_cornerRadius')||'4px'; else if(window.opera) for(i=0;i<bs.length;i++) o.style[cheakCss(BorderRadius.opera[bs[i]])]= getattr(o,'data_cornerRadius')||'4px'; else if(window.ActiveXObject) for(i=0;i<bs.length;i++) { var s = creat("span"); s.className=bs[i]; o.style.position='relative'; s.style.width=s.style.height = getattr(o,'data_cornerRadius')||'4px'; o.appendChild(s); } }
IE下面需要我采用4个span贴脚方式,需要CSS辅助.当然具体的使用中添加背景图需要自己额外写了
.tl,.tr,.bl,.br{ position:absolute; display:block; background:aqua; } .tl{left:0px;top:0px;} .tr{right:0px;top:0px;} .bl{left:0px;bottom:0px;} .br{right:0px;bottom:0px;}
具体的使用
data_corner ：定义圆角的位置top,bottom,left,right,topLeft,topRight,bottomLeft,bottomRight
data_cornerRadius：定义圆角的半径
<div class="j_corner" data_corner="" data_cornerRadius="" ></div>
下面测试一个例子,IE下面就没有准备用来做圆角的背景图了，用了青蓝色的背景色代表
提示：你可以先修改部分代码再运行。
好了，文字就不多写了，Code中见，急着回寝室了，拜，各位晚安。
虽然看不懂，但是支持你哈，加油~
ps：URL是什么意思啊？
日期不对~
呵呵你可是我开博得第一评哦，谢谢支持。我已经帮你修改了，URL就是你的网站网址
哈哈, 不错不错,好好干,有前途…..
博主,不错