自作の 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 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')); 0);
container.css('marginLeft',source.css('marginLeft'));
source.css('marginLeft',0); .css('marginRight '));
source.css('marginRight',0)
}
// 丸い境界線効果を生成するスタイルを追加します
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});
//元のスタイル
ソースを削除します.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;ボーダー左:2px ソリッド;ボーダー右:2px ソリッド;オーバーフロー:非表示;} .rounder_px1{マージン:0 1px;高さ:1px;ボーダー左:2px ソリッド;ボーダー右:2pxソリッド;オーバーフロー:非表示;} .rounder_px2{マージン:0 2px;高さ:1px;ボーダー左:3ピクセルソリッド;ボーダー右:3ピクセルソリッド;オーバーフロー:非表示;} .rounder_px3{マージン:0 3px;高さ:1px;背景:#AAA;オーバーフロー:非表示;}
Originally, the styles of this CSS file can be added using jQuery, but that would require a lot more code, and I am lazy here - -||| The purpose of adding overflow:hidden; in the style is to be compatible with IE6, because in IE6 the DIV will have a default minimum height, which seems to be 13px.
The function is very simple, but it can be applied to our common applications, as follows:

Copy code The code is as follows:

That is, the text box has rounded corners and displays a style when it gets focus , and then display another style when it loses focus.

Of course, we can meet different needs by combining it with the powerful functions of jQuery itself.

Advantages:

Small size, the two files are only 2.23kb after compression
Easy to use
Disadvantages:

The curvature of the border and the thickness of the lines cannot be Adjustment (please refer to the jquery.corner plug-in if necessary)
The height and character size do not match well, sometimes the characters will be half covered
Tested by IE6, FF, Opera, Safari, Chrome