角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、
もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。
1 | new IERadius($( "main" )); |
角丸にしたい対象を指定すると、その要素内に次のようなspanが自動作成される。
1 2 3 4 | < span class = "radiusFix main-tLeft" style = "position: absolute; width: 5px; height: 5px; display: block; top: 0px; left: 0px;" ></ span > < span class = "radiusFix main-tRight" style = "position: absolute; width: 5px; height: 5px; display: block; top: 0px; right: 0px;" ></ span > < span class = "radiusFix main-bLeft" style = "position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; left: 0px;" ></ span > < span class = "radiusFix main-bRight" style = "position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; right: 0px;" ></ span > |
コーナーだけの画像を作って、
スタイルシートで背景指定する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | html { background-color : #113A57 ; } #main { border-radius : 5px ; -moz- border-radius : 5px ; -webkit- border-radius : 5px ; } #main{ background-color : #fff ; } .radiusFix { background : url (../images/radius_sprite.png) no-repeat left top ; } .main-tLeft{ background-position : 0px 0 ;} .main-tRight{ background-position : -5px 0 ;} .main-bRight{ background-position : -15px 0 ;} .main-bLeft{ background-position : -20px 0 ;} |
指定した親要素にはposition:relativeが付与される。
positionを使うのでIE6でCSSのバグが発生する事がある。(floatが中にある要素に使った場合など)
左:使用後 右:使用前
MooToolsのcoreが必要。
Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | ( function ($) { this .IERadius = new Class({ Implements: [Options], options: { size:5, //radius size 'classname' : null , border:0 }, initialize: function (element,options) { this .setOptions(options); this .element = element; if (! this .element) return ; this .element.setStyle( "position" , "relative" ); if (typeOf( this .element)== 'elements' ){ this .addCorners(); } else { this .addCorner(); } }, addCorners: function (){ this .element.each( function (el){ for (i=0;i<4;i++){ var span = this .createSpan(el,i); span.inject(el); } }.bind( this )); }, addCorner: function () { for (i=0;i<4;i++){ var span = this .createSpan( this .element,i); span.inject( this .element); } }, createSpan: function (obj, i){ var name = & #91;'tLeft','tRight','bLeft','bRight']; var id = this .options.classname ? this .options.classname : (obj.id ? obj.id : 'corner' ); var span = new Element( "span" ,{ "class" : "radiusFix " +id+ '-' +name& #91;i]}}); if ( this .options.size) span.setStyles({ 'position' : "absolute" , "width" : this .options.size, "height" : this .options.size, 'display' : 'block' , 'line-height' :0, 'font-size' :0); var border = ( this .options.border>0)? '-' + this .options.border+ 'px' : '0px' ; if (name[i]== 'tLeft' ||name[i]== 'tRight' ){span.style.top=border;} if (name[i]== 'bLeft' ||name[i]== 'bRight' ){span.style.bottom=border;} if (name[i]== 'tLeft' ||name[i]== 'bLeft' ){span.style.left =border;} if (name[i]== 'tRight' ||name[i]== 'bRight' ){span.style.right =border;} return span; } }); })(document.id); |
Options
- size
- コーナーのサイズ。nullにするとインラインCSSを設定しなくなる
- classname
- 通常は対象となる要素のIDにコーナー名(tLeftとか)をつけるが、このオプションを設定するとIDよりも優先して使用する。
- border
- 枠線がある場合はピクセルを除いた数値で指定。線幅分positionの位置をマイナスにする。
参考リンク: