您的位置:主页 > HTML/JS > 渐进式圆角组件

渐进式圆角组件

目前主流的浏览器除了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的函数,

  1.  
  2. function getHook(root,type){
  3. var r =[];
  4. var re = /j_(\w+)/;
  5. var e = (root||document).getElementsByTagName(type || "*");
  6. for(var i = 0;i<e.length;i++)
  7. {
  8. var m = re.exec(e[i].className)||re.exec(e[i].id);
  9. if(m)r.push({'node':e[i],'hook':m[1]});
  10. }
  11. return r;
  12. }
  13. function load_hook_event(root) {
  14. var re = /j_(\w+)/;
  15. var fns = {};
  16. k = getHook();
  17. for(var i = 0;i<k.length;i++)
  18. {
  19. var f = fns[k[i].hook];
  20. if (!f) {
  21. f = eval("Orange.init_"+k[i].hook);
  22. fns[k[i].hook] = f;
  23. }
  24. f && f(k[i].node);
  25. }
  26. }
  27.  

提示:你可以先修改部分代码再运行。

现在正式的做圆角组件,代码如下

  1. Orange.init_corner= function(o){
  2. var k,bs=[],i,j;
  3. var BorderRadius ={
  4. mozilla:{
  5. tl:'-moz-border-radius-topleft',
  6. tr:'-moz-border-radius-topright',
  7. br:'-moz-border-radius-bottomright',
  8. bl:'-moz-border-radius-bottomleft'
  9. },
  10. webkit:{
  11. tl:'-webkit-border-top-left-radius',
  12. tr:'-webkit-border-top-right-radius',
  13. br:'-webkit-border-bottom-right-radius',
  14. bl:'-webkit-border-bottom-left-radius'
  15. },
  16. opera:{
  17. tl:'border-top-left-radius',
  18. tr:'border-top-right-radius',
  19. br:'border-bottom-right-radius',
  20. bl:'border-bottom-left-radius'
  21. }
  22. }
  23. var cheakCss = function(s){return s.replace(/-([a-z])/g,function(k){return k.toUpperCase();}).replace(/-/g,"");}
  24. var getattr = function(elem,name){return elem[name] || elem.getAttribute(name) || '';}
  25. var creat = function(type){return document.createElement(type);}
  26. if(getattr(o,'data_corner')&&(k=getattr(o,'data_corner').split(" ")))
  27. {
  28. for(i=0;i<k.length;i++)
  29. {
  30. switch(k[i]){
  31. case 'top':
  32. bs.push("tl",'tr');
  33. break;
  34. case 'bottom':
  35. bs.push("bl",'br');
  36. break;
  37. case 'left':
  38. bs.push("tl",'bl');
  39. break;
  40. case 'right':
  41. bs.push("tr",'br');
  42. break;
  43. case 'topLeft':
  44. bs.push("tl");
  45. break;
  46. case 'topRight':
  47. bs.push("tr");
  48. break;
  49. case 'bottomLeft':
  50. bs.push("bl");
  51. break;
  52. case 'bottomRight':
  53. bs.push("br");
  54. break;
  55. default:
  56. bs.push('tl','tr','bl','br');
  57. }
  58. }
  59. }
  60. if(document.getBoxObjectFor)
  61. for(i=0;i<bs.length;i++)
  62. o.style[cheakCss(BorderRadius.mozilla[bs[i]])]= getattr(o,'data_cornerRadius')||'4px';
  63. else if(window.google||window.openDatabase)
  64. for(i=0;i<bs.length;i++)
  65. o.style[cheakCss(BorderRadius.webkit[bs[i]])]= getattr(o,'data_cornerRadius')||'4px';
  66. else if(window.opera)
  67. for(i=0;i<bs.length;i++)
  68. o.style[cheakCss(BorderRadius.opera[bs[i]])]= getattr(o,'data_cornerRadius')||'4px';
  69. else if(window.ActiveXObject)
  70. for(i=0;i<bs.length;i++)
  71. {
  72. var s = creat("span");
  73. s.className=bs[i];
  74. o.style.position='relative';
  75. s.style.width=s.style.height = getattr(o,'data_cornerRadius')||'4px';
  76. o.appendChild(s);
  77. }
  78. }

IE下面需要我采用4个span贴脚方式,需要CSS辅助.当然具体的使用中添加背景图需要自己额外写了

  1. .tl,.tr,.bl,.br{
  2. position:absolute;
  3. display:block;
  4. background:aqua;
  5. }
  6. .tl{left:0px;top:0px;}
  7. .tr{right:0px;top:0px;}
  8. .bl{left:0px;bottom:0px;}
  9. .br{right:0px;bottom:0px;}

具体的使用
data_corner :定义圆角的位置top,bottom,left,right,topLeft,topRight,bottomLeft,bottomRight
data_cornerRadius:定义圆角的半径

  1. <div class="j_corner" data_corner="" data_cornerRadius="" ></div>

下面测试一个例子,IE下面就没有准备用来做圆角的背景图了,用了青蓝色的背景色代表

提示:你可以先修改部分代码再运行。

好了,文字就不多写了,Code中见,急着回寝室了,拜,各位晚安。

作者:ariesjia

前端少先队员,光荣的红领巾在胸前飘扬

继续八卦

已经5条留言

  1. lq On 2010年04月11日1:42 下午

    虽然看不懂,但是支持你哈,加油~
    ps:URL是什么意思啊?

  2. lq On 2010年04月11日1:43 下午

    日期不对~

  3. Ariesjia On 2010年04月11日11:12 下午

    回复 lq :

    虽然看不懂,但是支持你哈,加油~
    ps:URL是什么意思啊?

    呵呵你可是我开博得第一评哦,谢谢支持。我已经帮你修改了,URL就是你的网站网址

  4. 海阔天空 On 2010年04月16日9:54 下午

    哈哈, 不错不错,好好干,有前途…..

  5. 手机用户 On 2010年04月18日9:19 下午

    博主,不错

留言万岁!吹水有益健康!