A self-written jQuery rounded corner plug-in_jquery

The principle is to use a 1px div, see the code for the specific implementation.
Usage:

Copy code The code is as follows:

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

This will generate a rounded box based on the default settings, as shown below:

The rounded corners will be a little jagged:(
If that’s all, it’s definitely not enough. What if we want to add a style of our own? How to use:

Copy code The code is as follows:

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

The effect is as shown below:

Next I will talk about the implementation process. First, attach the jQuery code as follows:

Copy the code The code is as follows:

(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()container=$('

');
source.before(container);
//Add 1pxDIV
container.append('

< ;/div>

< ;div class="rounder_px0">

');
container.find('.rounder_content').append(source);
//Maintain the original shape, such as height, width, etc.
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);
}
//Add a style to 1pxDIV to produce a rounded border effect
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});
//Remove the original style
source.css(' borderStyle','none');
source.css('backgroundColor',setting.backgroundColor);
source.css('color',setting.color);
});
}
})(jQuery);

CSS file code:

Copy code The code is as follows :

.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;}

원래 이 CSS 파일의 스타일은 jQuery를 사용하여 추가할 수 있지만 그렇게 하려면 더 많은 코드가 필요하고 여기서는 게으릅니다. -||| 스타일에 Overflow:hidden;을 추가하는 목적은 IE6과 호환되도록 하는 것입니다. 왜냐하면 IE6에서는 DIV의 기본 최소 높이가 13px인 것으로 보입니다.
이 기능은 매우 간단하지만 다음과 같이 일반적인 애플리케이션에 적용할 수 있습니다.

코드 복사 코드

즉, 텍스트 상자의 모서리가 둥글게 되었습니다. 포커스를 받으면 스타일을 표시하고 포커스를 잃으면 다른 스타일을 표시합니다.

물론 jQuery 자체의 강력한 기능과 결합하면 다양한 요구 사항을 충족할 수 있습니다.

장점:

작은 크기, 압축 후 두 파일의 크기가 2.23kb에 불과합니다.
사용하기 쉬움
단점:

테두리의 곡률과 선 굵기 조정 불가 (필요시 jquery.corner 플러그인 참고)
높이와 글자 크기가 잘 맞지 않아 글자가 반쯤 가려지는 경우도 있습니다
IE6, FF에서 테스트, 오페라, 사파리, 크롬