Well in true fashion, they're CSS corners.
Instead of loading up one of the many css corner library, i decided to take the opportunity to write my own. The other plus is that as this is a blogger account, i have no real file storage, so linking against the jquery lib makes way more sense.
//Corner rounding function
roundCorners = function( pElement, pSize, pForeground, pBackground ){
//Logging
/*
console.log( 'Corner size ' + pSize);
console.log( 'Fore color ' + pForeground );
console.log( 'Back color ' + pBackground );
*/
if( pBackground.match('none') != null ){
pBackground = 'transparent';
//console.log('transparent background');
}
//constants
containerStr = '<div class="cornerContainer" style="margin:0px 0px;height:auto;background:'+ pBackground +'"></div>';
cornerAttributesStr = 'border:none;overflow:hidden;height:1px;background-color:'+ pForeground +';';
//Reset the parent element
$( pElement).parent().css('padding','none');
//Insert container Div and set background color
$(pElement).prepend( containerStr );
$(pElement).append( containerStr );
for(i=1;i < pSize; i++){
$('div.cornerContainer').eq(0).append('<div style="' + cornerAttributesStr + 'margin: 0 '+ Math.round(pSize/i) +'pt"></div>');
//console.log('Insert element ' + pSize/i);
}
for(i=pSize; i > 1; i--){
$('div.cornerContainer').eq(1).append('<div style="' + cornerAttributesStr + 'margin: 0 '+ Math.round(pSize/i) +'pt"></div>');
}
}
Currently it doesn't support chaining, however according to my understanding, you just have to encapsulated within a jquery.extend, and change the passed object references call and your good to go.
No comments:
Post a Comment