基于mootools的圓角邊框擴(kuò)展代碼
更新時(shí)間：2010年02月07日 11:10:20 作者：
做圓角邊框一般有兩種方法，背景圖片或者DIV+CSS拼出來。
JQuery下面有個(gè)擴(kuò)展是用純JS生成的圓角，不過和DIV+CSS拼出來是一樣的道理，圓角看上去都比較粗糙。
用背景圖片要好看得多，問題是不能拉伸，最簡單做法就是用四個(gè)角小圖片加邊框拼出來。不過這樣多出N多圖片，一堆亂七八糟的代碼，相當(dāng)不爽。
有一個(gè)很有技巧的方法，用一張大圖片+CSS來做，原理如下。
用一張大的背景圖片做圓角，用CSS分別取四個(gè)角和邊再拼成一個(gè)DIV。這樣不僅可以解決圓角，還可以生成其它特殊的邊框（比如陰影）。
但是每次使用都要加CSS也很不爽，于是用mootools寫了一個(gè)Element類的擴(kuò)展。
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方法傳個(gè)背景圖片，邊框?qū)挾冗M(jìn)去就行了。
HTML代碼
<!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>
顯顯示效果
mootools邊框demo http://demo.jb51.net/js/mootools_yj/demo.htm
打包下載
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
以前用Jquery也寫過一個(gè)，居然找不著了，不過原理是一樣的。
用背景圖片要好看得多，問題是不能拉伸，最簡單做法就是用四個(gè)角小圖片加邊框拼出來。不過這樣多出N多圖片，一堆亂七八糟的代碼，相當(dāng)不爽。
有一個(gè)很有技巧的方法，用一張大圖片+CSS來做，原理如下。
用一張大的背景圖片做圓角，用CSS分別取四個(gè)角和邊再拼成一個(gè)DIV。這樣不僅可以解決圓角，還可以生成其它特殊的邊框（比如陰影）。
但是每次使用都要加CSS也很不爽，于是用mootools寫了一個(gè)Element類的擴(kuò)展。
復(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方法傳個(gè)背景圖片，邊框?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>
顯顯示效果
mootools邊框demo http://demo.jb51.net/js/mootools_yj/demo.htm
打包下載
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
以前用Jquery也寫過一個(gè)，居然找不著了，不過原理是一樣的。
相關(guān)文章
Mootools 1.2 手風(fēng)琴（Accordion）教程
繼續(xù)我們的“更多”（More）庫里面的插件教程，今天我們來學(xué)習(xí)一下可能是最流行最受歡迎的插件——手風(fēng)琴。2009-09-09
今天我們來看一看MooTools給我們提供的額外的一些處理字符函數(shù)。這只是MooTools字符串處理中的一部分，并不包含一些神秘的函數(shù)（比如toCamelCase()）和使用正則表達(dá)式處理字符串的函數(shù)。2009-09-09
用Mootools獲得操作索引的兩種方法分享，需要的朋友可以參考下。2011-12-12
Mootools 1.2教程 滑動(dòng)效果（Slide）
今天繼續(xù)我們的Mootools 1.2教程的第23課，我們今天來講一下Fx插件中的Fx.Slide。通過該插件，可以讓你把內(nèi)容以滑動(dòng)的方式顯示出來。它使用起來非常簡單，是你UI工具箱中一個(gè)很好的工具。2009-09-09
背景圖跟隨鼠標(biāo)移動(dòng)的Mootools插件實(shí)現(xiàn)代碼
背景圖跟隨鼠標(biāo)移動(dòng)的Mootools插件實(shí)現(xiàn)代碼，學(xué)習(xí)mootools的朋友可以參考下。2011-12-12
Mootools 1.2教程 滾動(dòng)條（Slider）
到現(xiàn)在為止，初始化這些MooTools插件對(duì)象就會(huì)開始變得越來越熟悉。滾動(dòng)條（Slider）沒有任何不同，你要?jiǎng)?chuàng)建一個(gè)新的滾動(dòng)條，定義滾動(dòng)條和滑塊相關(guān)的元素，然后設(shè)置你的選項(xiàng)，再創(chuàng)建一些回調(diào)事件的控制函數(shù)。2009-09-09
基于mootools插件實(shí)現(xiàn)遮罩層新手引導(dǎo)
公司項(xiàng)目有這個(gè)需求，剛好這段時(shí)間在學(xué)習(xí)了mootools，于是把功能寫成了mootools插件，個(gè)人感覺mootools在這方面比jquery強(qiáng)多了2012-05-05
從今天開始，我們將開始講解“更多”（more）庫里面的更多插件。Sortables是一個(gè)非常強(qiáng)大的插件，能夠真正地?cái)U(kuò)大你的用戶界面設(shè)計(jì)的選擇面。2009-09-09
有人最近要求我們寫一個(gè)關(guān)于MooTools 1.2的30天的教程，這似乎也是個(gè)很不錯(cuò)的主意，于是我們決定現(xiàn)在就開始。在這些教程中，我們假設(shè)用戶沒有任何MooTools或者是JavaScript經(jīng)驗(yàn)，但是至少有基本的HTML和CSS知識(shí)。2009-09-09
今天我們來深入地學(xué)習(xí)一下如果操縱HTML元素。通過MooTools 1.2，你可以添加新元素到一個(gè)HTML頁面中，也可以刪除元素，以及改變?nèi)魏螛邮交蛘咴貐?shù)，這些都非常容易。2009-09-09