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

渐进式圆角组件

11 4月 2010

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冰糖橙子jsHook</title>
<link rel="stylesheet" href="style/master.css" type="text/css" charset="utf-8" title="main" />
<script type="text/javascript" language="javascript">
var addEvent = function( obj, type, fn ) {
    if (obj.addEventListener){
        obj.addEventListener( type, fn, false );
	}
    else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj.attachEvent( "on"+type, function() {
			obj["e"+type+fn]();
		} );
    }
};
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);
    }
}
addEvent(window, "load", function(){
	load_hook_event(document);
});
Orange ={};
Orange.init_corner= function(o){
	alert("id or class [ "+(o.id||o.className)+" ] call this");
}
</script>
</head>
<body>
<div class="king j_corner" data_corner="left" data_cornerRadius="30px" ></div>
</body>
</html>

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

现在正式的做圆角组件，代码如下
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下面就没有准备用来做圆角的背景图了，用了青蓝色的背景色代表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冰糖橙子Corner Test</title>
<link rel="stylesheet" href="style/master.css" type="text/css" charset="utf-8" title="main" />
<style>
.king
{
margin:30px;
width:400px;
height:200px;
border:1px #ccc solid;
background:#666;
}
.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;}
</style>
<script type="text/javascript" language="javascript">
var addEvent = function( obj, type, fn ) {
    if (obj.addEventListener){
        obj.addEventListener( type, fn, false );
	}
    else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj.attachEvent( "on"+type, function() {
			obj["e"+type+fn]();
		} );
    }
};
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);
    }
}
addEvent(window, "load", function(){
	load_hook_event(document);
});
Orange ={};
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);
	}
}
</script>
</head>
<body>
<div class="king j_corner" data_corner="left" data_cornerRadius="30px" ></div>
</body>
</html>

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

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

作者：ariesjia

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

查看由ariesjia发表的所有文章 →

继续八卦

已经5条留言

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

虽然看不懂，但是支持你哈，加油~
ps：URL是什么意思啊？

回复
lq On 2010年04月11日1:43 下午

日期不对~

回复
Ariesjia On 2010年04月11日11:12 下午

回复 lq :

虽然看不懂，但是支持你哈，加油~
ps：URL是什么意思啊？

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

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

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

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

博主,不错

回复

留言万岁！吹水有益健康！取消回复

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

联系我

腾讯微博:
新浪微博:
QQ:

渐进式圆角组件

继续八卦

已经5条留言

留言万岁！吹水有益健康！取消回复

联系我

最新吐槽

吐槽排行

文章归档

分类目录

功能

冰糖橙子ariesjia

你们都在学前端，少先队员来围观

渐进式圆角组件

继续八卦

已经5条留言

留言万岁！吹水有益健康！ 取消回复

联系我

最新吐槽

吐槽排行

标签云集

文章归档

分类目录

友情链接

功能

冰糖橙子ariesjia

你们都在学前端，少先队员来围观

留言万岁！吹水有益健康！取消回复