자체 작성 jQuery 둥근 모서리 플러그인_jquery

원칙은 1px div를 사용하는 것입니다. 특정 구현에 대한 코드를 참조하세요.
사용법:

코드 복사 코드는 다음과 같습니다.

$('. 테스트' ).rounder()

이렇게 하면 아래와 같이 기본 설정에 따라 둥근 상자가 생성됩니다.

둥근 모서리가 약간 들쭉날쭉해집니다.(
그렇다면 절대 부족합니다. 나만의 스타일을 추가하고 싶다면? 사용방법:

코드 복사 코드는 다음과 같습니다.

$('.test').rounder({borderColor:'red', backgroundColor :'# EEE',색상:'파란색'})

효과는 아래와 같습니다.

다음으로 구현 과정에 대해 이야기하겠습니다. 먼저 다음과 같이 jQuery 코드를 첨부합니다.

코드를 복사합니다

(function($){
$.fn.rounder=function(options){
var settings=$.extend({BackgroundColor:'#FFF' ,borderColor:' #AAA',color:'#000'},options||{})
this.each(function(){
var source=$(this);
var 컨테이너 =source.parents (".mapping_rounder");
if(container.size()<=0){
container=$('

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

< ;/div>

< /div>< ;div class="rounder_px0">

< div class=" rounder_px3">

');
container.find('.rounder_content').append(source)
//높이, 너비 등 원래 모양을 유지합니다. 등
container.width(source.width());
source.width(source.width()-12)
container.height(source.height()); .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에 스타일을 추가하세요.
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 파일 코드:

코드 복사 코드는 다음과 같습니다.

.rounder_content{padding:0 5px;border-left:1px solid;border-right:1px solid;}

.rounder_px0{margin:0; 높이: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: hide;}
.rounder_px3{margin:0 3px;높이:1px;배경:#AAA;오버플로우:숨김;}


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

코드 복사 코드

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

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

장점:

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

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