快捷導(dǎo)航

基于mootools的圓角邊框擴展代碼

更新時間：2010年02月07日 11:10:20 作者：

做圓角邊框一般有兩種方法，背景圖片或者DIV+CSS拼出來。

JQuery下面有個擴展是用純JS生成的圓角，不過和DIV+CSS拼出來是一樣的道理，圓角看上去都比較粗糙。

用背景圖片要好看得多，問題是不能拉伸，最簡單做法就是用四個角小圖片加邊框拼出來。不過這樣多出N多圖片，一堆亂七八糟的代碼，相當(dāng)不爽。

有一個很有技巧的方法，用一張大圖片+CSS來做，原理如下。

用一張大的背景圖片做圓角，用CSS分別取四個角和邊再拼成一個DIV。這樣不僅可以解決圓角，還可以生成其它特殊的邊框（比如陰影）。
但是每次使用都要加CSS也很不爽，于是用mootools寫了一個Element類的擴展。

復(fù)制代碼代碼如下:

 
setBorder 
Element.implement({ 
setBorder: function(pic, len) { 
/// <summary> 
/// 設(shè)定容器邊框（圖片）. 
/// 已測div 
/// </summary> 
/// <param name="pic">圖片地址</param> 
/// <param name="len">邊框?qū)挾?lt;/param> 
/// <returns type="Element" /> 
var content = this.clone(); 
var width = this.getSize().x + len * 2; 
var height = this.getSize().y + len * 2; 
this.empty().setStyles({ 'width': width, 'height': height }); 
var lt = new Element('div', { 
'styles': { 
'width': len, 
'height': len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat left top' 
} 
}); 
var rt = new Element('div', { 
'styles': { 
'width': width - len, 
'height': len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat right top' 
} 
}); 
var lb = new Element('div', { 
'styles': { 
'width': len, 
'height': height - len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat left bottom' 
} 
}); 
var rb = new Element('div', { 
'styles': { 
'width': width - len, 
'height': height - len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat right bottom' 
} 
}); 
content.inject(rb, 'top'); 
lt.inject(this, 'top'); 
rt.injectBottom(this); 
lb.injectBottom(this); 
rb.injectBottom(this); 
return this; 
} 
}); 

這樣在頁面上直接調(diào)用setBorder方法傳個背景圖片，邊框?qū)挾冗M(jìn)去就行了。

HTML代碼

復(fù)制代碼代碼如下:

 
<!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> 
<title>Untitled Page</title> 
<script type="text/javascript" src="mootools.js"></script> 
<script type="text/javascript"> 
Element.implement({ 
setBorder: function(pic, len) { 
/// <summary> 
/// 設(shè)定容器邊框（圖片）. 
/// 已測div 
/// </summary> 
/// <param name="pic">圖片地址</param> 
/// <param name="len">邊框?qū)挾?lt;/param> 
/// <returns type="Element" /> 
var content = this.clone(); 
var width = this.getSize().x + len * 2; 
var height = this.getSize().y + len * 2; 
this.empty().setStyles({ 'width': width, 'height': height }); 
var lt = new Element('div', { 
'styles': { 
'width': len, 
'height': len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat left top' 
} 
}); 
var rt = new Element('div', { 
'styles': { 
'width': width - len, 
'height': len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat right top' 
} 
}); 
var lb = new Element('div', { 
'styles': { 
'width': len, 
'height': height - len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat left bottom' 
} 
}); 
var rb = new Element('div', { 
'styles': { 
'width': width - len, 
'height': height - len, 
'float': 'left', 
'background': 'url(' + pic + ') no-repeat right bottom' 
} 
}); 
content.inject(rb, 'top'); 
lt.inject(this, 'top'); 
rt.injectBottom(this); 
lb.injectBottom(this); 
rb.injectBottom(this); 
return this; 
} 
}); 
window.addEvent('domready', function() { 
$('demo').getElements('div').each(function(d) { 
d.setBorder('border.png', 8); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="demo"> 
<div style="width:150px; height:100px;"> 
<div style="width:100%; height:100%; background-color:Red;"></div> 
</div> 
<div style="width:80px; height:130px;"> 
<div style="width:100%; height:100%; background-color:Green;"></div> 
</div> 
</div> 
</body> 
</html> 