自寫(xiě)的一個(gè)jQuery圓角插件

更新時(shí)間：2010年10月26日 12:56:16 作者：

下面介紹自己寫(xiě)的一個(gè)jQuery圓角的插件，功能非常簡(jiǎn)單。目前只能實(shí)現(xiàn)1px的固定弧度的圓角矩形邊框。

原理是利用1px的div，具體實(shí)現(xiàn)看代碼。
使用方法：

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

$('.test').rounder();

這樣會(huì)根據(jù)默認(rèn)的設(shè)置產(chǎn)生一個(gè)圓角框，效果如圖：

圓角處會(huì)有點(diǎn)鋸齒:(
如果僅此而已，那肯定是不夠的。我們會(huì)想加上自己的一個(gè)樣式該怎么辦？使用方法：

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

$('.test').rounder({borderColor:'red',backgroundColor:'#EEE',color:'blue'});

效果如圖：

接下來(lái)我就來(lái)講講實(shí)現(xiàn)過(guò)程了，先附上jQuery代碼如下：

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

 
(function($){ 
$.fn.rounder=function(options){ 
var setting=$.extend({backgroundColor:'#FFF',borderColor:'#AAA',color:'#000'},options||{}); 
this.each(function(){ 
var source=$(this); 
var container=source.parents(".mapping_rounder"); 
if(container.size()<=0){ 
container=$('<div class="mapping_rounder"></div>'); 
source.before(container); 
//添加1pxDIV 
container.append('<div class="rounder_px3"></div><div class="rounder_px2"></div><div class="rounder_px1"></div><div class="rounder_px0"></div><div class="rounder_content"></div><div class="rounder_px0"></div><div class="rounder_px1"></div><div class="rounder_px2"></div><div class="rounder_px3"></div>'); 
container.find('.rounder_content').append(source); 
//保持原有的形態(tài)，如：高度、寬度等 
container.width(source.width()); 
source.width(source.width()-12); 
container.height(source.height()); 
source.height(source.height()-8); 
source.css('lineHeight',source.height()+'px'); 
container.css('marginTop',source.css('marginTop')); 
source.css('marginTop',0); 
container.css('marginBottom',source.css('marginBottom')); 
source.css('marginBottom',0); 
container.css('marginLeft',source.css('marginLeft')); 
source.css('marginLeft',0); 
container.css('marginRight',source.css('marginRight')); 
source.css('marginRight',0); 
} 
//給1pxDIV添加樣式以產(chǎn)生圓角邊框的效果 
container.find('.rounder_px3').css('backgroundColor',setting.borderColor); 
container.find('.rounder_px2').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}); 
container.find('.rounder_px1').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}); 
container.find('.rounder_px0').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}); 
container.find('.rounder_content').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}); 
//去除原有的樣式 
source.css('borderStyle','none'); 
source.css('backgroundColor',setting.backgroundColor); 
source.css('color',setting.color); 
}); 
} 
})(jQuery); 

CSS文件代碼：

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

 
.rounder_content{padding:0 5px;border-left:1px solid;border-right:1px solid;} 
.rounder_px0{margin:0;height:2px;border-left:2px solid;border-right:2px solid;overflow:hidden;} 
.rounder_px1{margin:0 1px;height:1px;border-left:2px solid;border-right:2px solid;overflow:hidden;} 
.rounder_px2{margin:0 2px;height:1px;border-left:3px solid;border-right:3px solid;overflow: hidden;} 
.rounder_px3{margin:0 3px;height:1px;background:#AAA;overflow:hidden;} 

本來(lái)這個(gè)CSS文件的樣式都可以用jQuery加上去，但那樣會(huì)多很多代碼，且讓我在此偷下懶- -|||。樣式里面加上overflow:hidden;的目的是為了兼容IE6，因?yàn)樵贗E6里面DIV會(huì)有個(gè)默認(rèn)的最小高度，好像是13px。
功能非常簡(jiǎn)單，但可以應(yīng)用到我們常見(jiàn)的應(yīng)用中，如下：

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

 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.test').rounder({borderColor:'#AAA',color:'#000'}); 
$('.test').focus(function(event){$(event.target).rounder({borderColor:'red',backgroundColor:'#EEE',color:'blue'});}); 
$('.test').blur(function(event){$(event.target).rounder({borderColor:'#AAA',color:'#000'});}); 
}); 
</script> 

即文本框加上圓角，獲取焦點(diǎn)時(shí)呈現(xiàn)一種樣式，失去焦點(diǎn)時(shí)再呈現(xiàn)另一種樣式。

當(dāng)然，我們可以通過(guò)和jQuery本身強(qiáng)大的功能結(jié)合來(lái)滿(mǎn)足不同的需求。

優(yōu)點(diǎn)：

體積小，兩個(gè)文件經(jīng)過(guò)壓縮后只有2.23kb
簡(jiǎn)單易用
不足：

邊框弧度和線(xiàn)條的粗細(xì)不能調(diào)節(jié)（如果需要請(qǐng)參考jquery.corner插件）
高度和字符大小配合的不是很好，有時(shí)字符會(huì)被遮住一半
測(cè)試通過(guò)IE6、FF、Opera、Safari、Chrome

您可能感興趣的文章: