/*(You must include this commment) * Round Corners jQuery Plugin version - 1.0.1 * written by Avinoam Henig * special thanks to Dan Blaisdell for help and mentoring (http://manifestwebdesign.com/) * * for more information go to: * roundCorners.avinoam.info * or email me at: contact@avinoam.info * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Needed files: * jQuery 1.3 Core Javascirpt File * Explorer Canvas Release 2 Javascript File */ (function($){ var emFuncs = new Array(); $.fn.fontchange = function(func){ emFuncs[emFuncs.length] = func; return this; }; function checkEM(){ var nLeft = $emEL.offset().left; if(nLeft!=oLeft){ for(var func in emFuncs) emFuncs[func](); } oLeft = nLeft; }; $(window).bind('load', function(){ emFuncs = []; $emEL = $('
').css({ 'position' : 'absolute', 'left' : '-100em', 'width' : '0px', 'height' : '0px', 'background' : 'none', 'border:' : 'none', 'padding' : '0px', 'margin' : '0px' }).prependTo('body'); oLeft = $emEL.offset().left; $(window).keyup(function(){ checkEM(); }); }); $.fn._html = $.fn.html; $.fn.html = function(val){ $(this).each(function(){ if(this.canvas) $('span.inner', this)._html(val); else $(this)._html(val); }); return this; }; $.fn._offset = $.fn.offset; $.fn.offset = function(newXY){ return newXY ? this.setXY(newXY) : this._offset(); }; $.fn.setXY = function(newXY){ $(this).each(function(){ var el = this; var hide = false; if($(el).css('display')=='none'){ hide = true; $(el).show(); }; var style_pos = $(el).css('position'); if (style_pos == 'static') { $(el).css('position','relative'); style_pos = 'relative'; }; var pageXY = $(el).offset(); if(pageXY){ var delta = { left : parseInt($(el).css('left')), top : parseInt($(el).css('top')) }; if (isNaN(delta.left)) delta.left = (style_pos == 'relative') ? 0 : el.offsetLeft; if (isNaN(delta.top)) delta.top = (style_pos == 'relative') ? 0 : el.offsetTop; if (newXY.left || newXY.left===0) $(el).css('left',newXY.left - pageXY.left + delta.left + 'px'); if (newXY.top || newXY.top===0) $(el).css('top',newXY.top - pageXY.top + delta.top + 'px'); }; if(hide) $(el).show(); }); return this; }; $.fn._css = $.fn.css; $.fn.css = function(one, two){ var el = this; var theResult = el; if(arguments.length==1 && typeof one=='string'){ var type, style, result = false; if(one.search(':')!=-1){ type = one.split(':')[0].replace(' ', ''); style = one.split(':')[1].replace(' ', ''); } else{ theResult = el._css(one, two); }; if(type && style){ var styleSplits = style.split('-'); style = styleSplits[0]; for(var s=1; s') .css('display', $(el).css('display')); if($.browser.safari) $('span.inner', el).children().css('position', 'relative'); if($.browser.msie) funcName = 'appendTo'; else funcName = 'prependTo'; }; var canvas = $('')[funcName](el).attr({ 'width': $(el).outerWidth(), 'height': $(el).outerHeight() }).css({ 'position' : 'absolute', 'background' : 'none', 'border' : 'none', 'padding' : '0px' }).offset($(el).offset()); if(close) $(el).css('position', 'relative'); el.canvas = canvas[0]; if ($.browser.msie) el.canvas = G_vmlCanvasManager.initElement(el.canvas); el.canvas.ctx = el.canvas.getContext('2d'); el.canvas.roundCornersEvent = false; el.canvas.ctx.roundRect = function(width, height, x, y , tl, tr, bl, br){ this.beginPath(); if(tl>0) this.moveTo(tl + x, y); else this.moveTo(x, y); if(tl>0) this.quadraticCurveTo(x, y, x, tl + y); if(bl>0) this.lineTo(x, (height + y) - bl); else this.lineTo(x, height + y); if(bl>0) this.quadraticCurveTo(x, height + y, bl + x, height + y); if(br>0) this.lineTo((width + x) - br, height + y); else this.lineTo(width + x, height + y); if(br>0) this.quadraticCurveTo(width + x, height + y, width + x, (height + y) - br); if(tr>0) this.lineTo(width + x, tr + y); else this.lineTo(width + x, y); if(tr>0) this.quadraticCurveTo(width + x, y, width + x - tr, y); if(tl>0) this.lineTo(tl, y); else this.lineTo(x, y); }; el.focused = false; el.styles = { bgColor : $(el).css('background-color'), radius : [0, 0, 0, 0], border : { top : { width : parseInt($(el).css('border-top-width')), color : $(el).css('border-top-color') }, left : { width : parseInt($(el).css('border-left-width')), color : $(el).css('border-left-color') }, bottom : { width : parseInt($(el).css('border-bottom-width')), color : $(el).css('border-bottom-color') }, right : { width : parseInt($(el).css('border-right-width')), color : $(el).css('border-right-color') } }, hover : { bgColor: $(el).css('hover:background-color'), border : { top : { width : parseInt($(el).css('hover:border-top-width')), color : $(el).css('hover:border-top-color') }, left : { width : parseInt($(el).css('hover:border-left-width')), color : $(el).css('hover:border-left-color') }, bottom : { width : parseInt($(el).css('hover:border-bottom-width')), color : $(el).css('hover:border-bottom-color') }, right : { width : parseInt($(el).css('hover:border-right-width')), color : $(el).css('hover:border-right-color') } } }, active : { bgColor: $(el).css('active:background-color'), border : { top : { width : parseInt($(el).css('active:border-top-width')), color : $(el).css('active:border-top-color') }, left : { width : parseInt($(el).css('active:border-left-width')), color : $(el).css('active:border-left-color') }, bottom : { width : parseInt($(el).css('active:border-bottom-width')), color : $(el).css('active:border-bottom-color') }, right : { width : parseInt($(el).css('active:border-right-width')), color : $(el).css('active:border-right-color') } } }, focus : { bgColor: $(el).css('focus:background-color'), opacity : $(el).css('opacity'), border : { top : { width : parseInt($(el).css('focus:border-top-width')), color : $(el).css('focus:border-top-color') }, left : { width : parseInt($(el).css('focus:border-left-width')), color : $(el).css('focus:border-left-color') }, bottom : { width : parseInt($(el).css('focus:border-bottom-width')), color : $(el).css('focus:border-bottom-color') }, right : { width : parseInt($(el).css('focus:border-right-width')), color : $(el).css('focus:border-right-color') } } } }; if(hide) $(el).hide(); }); return this; }; $.fn.getCanvas = function(){ var el = this; $(el).canvas(); var cvs = $(el)[0].canvas; if ($.browser.msie) { $(cvs).children().css({ 'position': 'relative', 'background': 'none', 'border': 'none', 'padding': '0px', 'margin': '0px', 'left': '0px', 'top': '0px' }); }; return cvs; }; $.fn.draw = function(specialStyle){ $(this).each(function(){ var el = this; var hide = false; if($(el).css('display')=='none'){ hide = true; $(el).show(); }; var canvas = $(el).getCanvas(tl, tr, br, bl, width, height); var tl = el.styles.radius[0]; var tr = el.styles.radius[1]; var br = el.styles.radius[2]; var bl = el.styles.radius[3]; var border, bgColor; switch(specialStyle){ case 'hover': border = el.styles.hover.border; bgColor = el.styles.hover.bgColor; break; case 'active': border = el.styles.active.border; bgColor = el.styles.active.bgColor; break; case 'focus': border = el.styles.focus.border; bgColor = el.styles.focus.bgColor; break; default: border = el.styles.border; bgColor = el.styles.bgColor; }; var width = $(el).outerWidth(); var height = $(el).outerHeight(); $(canvas).attr({ 'width' : width, 'height' : height }).offset($(el).offset()); var ctx = canvas.ctx; if(canvas.oldWidth && canvas.oldHeight) ctx.clearRect(0, 0, canvas.oldWidth, canvas.oldHeight); canvas.oldWidth = width; canvas.oldHeight = height; var bWidth = border.top.width; if(border.right.width>bWidth) bWidth = border.right.width; if(border.bottom.width>bWidth) bWidth = border.bottom.width; if(border.left.width>bWidth) bWidth = border.left.width; if (bWidth > 0) { ctx.roundRect(width, height, 0, 0, tl, tr, bl, br); ctx.fillStyle = border.top.color; ctx.fill(); if(bWidth>tl && bWidth>tr && bWidth>br && bWidth>bl){ ctx.roundRect(width - (border.right.width+border.left.width), height - (border.bottom.width+border.top.width), border.left.width, border.top.width, 0, 0, 0, 0); } else{ ctx.roundRect(width - (border.right.width+border.left.width), height - (border.bottom.width+border.top.width), border.left.width, border.top.width, tl - border.left.width, tr - border.right.width, bl - border.left.width, br - border.right.width); }; if(bgColor=='rgba(0, 0, 0, 0)' || bgColor=='transparent'){ var parBgColor = '#ffffff'; $(el).parents().each(function(){ if($(this).css('background-color')!='rgba(0, 0, 0, 0)' && $(this).css('background-color')!='transparent'){ parBgColor = $(this).css('background-color'); return false; }; }); ctx.fillStyle = parBgColor; } else{ ctx.fillStyle = bgColor; }; } else{ ctx.roundRect(width, height, 0, 0, tl, tr, bl, br); ctx.fillStyle = bgColor; }; ctx.fill(); $(el).css({ 'background' : 'none', 'border-color' : 'transparent' }); if($.browser.msie && parseInt($.browser.version)==6){ $(el).css({ 'padding-top' : parseInt($(el).css('padding-top')+border.top.width)+'px', 'padding-left' : parseInt($(el).css('padding-left')+border.left.width)+'px', 'border' : 'none' }); }; if(hide) $(el).hide(); }); return this; }; function getGradient(ctx, colors, height){ var grad = ctx.createLinearGradient(0, 0, 0, height); var g = 0; for(var i=0; i0) var colorsHover = gradient[1]; else colorsHover = colors; }; if(gradient[2]){ if (gradient[2].length>0) var colorsClick = gradient[2]; else{ if(colorsHover) var colorsClick = colorsHover; else var colorsClick = colors; }; }; if(gradient[3]){ if (gradient[3].length>0) var colorsFocus = gradient[3]; else{ var colorsFocus = colors; }; }; } else{ var colors = gradient; var colorsHover = gradient; var colorsClick = gradient; var colorsFocus = gradient; }; if(colors) el.styles.bgColor = getGradient(el.canvas.ctx, colors, $el.outerHeight()); if(colorsHover) el.styles.hover.bgColor = getGradient(el.canvas.ctx, colorsHover, $el.outerHeight()); if(colorsClick) el.styles.active.bgColor = getGradient(el.canvas.ctx, colorsClick, $el.outerHeight()); if(colorsFocus) el.styles.focus.bgColor = getGradient(el.canvas.ctx, colorsFocus, $el.outerHeight()); }; if(radius){ if(typeof radius != 'object') radius = [radius, radius, radius, radius]; } else{ radius = [0, 0, 0, 0]; }; if(radius[0]==null){ radius[0] = 14; }; for(var i=0; i<4; i++){ if(radius[i]==null){ radius[i] = radius[0]; }; if(typeof radius[i] == 'string'){ if (radius[i].search('em')!=-1) { radius[i] = parseFloat(radius[i]); radius[i] = radius[i] * 14; }; radius[i] = parseInt(radius[i]); }; }; el.styles.radius = radius; var canvas = el.canvas; if (!canvas.roundCornersEvent) { canvas.roundCornersEvent = true; $(window).resize(function(){ $(el).bg(radius, gradient); }); $(el).hover(function(){ if(!el.focused) $(el).bg(radius, gradient, 'hover'); }, function(){ if(!el.focused) $(el).bg(radius, gradient); }); $(el).mousedown(function(){ if(!el.focused) $(el).bg(radius, gradient, 'active'); }); $(el).mouseup(function(){ if(!el.focused) $(el).bg(radius, gradient, 'hover'); }); $(el).focus(function(){ el.focused = true; $(el).bg(radius, gradient, 'focus'); }); $(el).blur(function(){ el.focused = false; $(el).bg(radius, gradient); }); emFuncs[emFuncs.length] = function(){ if(!el.focused) $(el).bg(radius, gradient); else $(el).bg(radius, gradient, 'focus'); }; }; $(el).draw(specialStyle); }); return this; }; $.fn.roundCorners = function(tl, tr, br, bl){ return $(this).bg([tl, tr, br, bl]); }; })(jQuery);