您的位置:主页 > 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的函数,

function getHook(root,type){
	var r =[];
	var re = /j_(\w+)/;
	var e = (root||document).getElementsByTagName(type || "*");
	for(var i = 0;i

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

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

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

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:定义圆角的半径

下面测试一个例子,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 下午

    博主,不错

lq的回复 取消回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据