| 1 |
/* |
| 2 |
* jQuery corner plugin |
| 3 |
* |
| 4 |
* version 1.7 (1/26/2007) |
| 5 |
* |
| 6 |
* Dual licensed under the MIT and GPL licenses: |
| 7 |
* http://www.opensource.org/licenses/mit-license.php |
| 8 |
* http://www.gnu.org/licenses/gpl.html |
| 9 |
*/ |
| 10 |
|
| 11 |
/** |
| 12 |
* The corner() method provides a simple way of styling DOM elements. |
| 13 |
* |
| 14 |
* corner() takes a single string argument: $().corner("effect corners width") |
| 15 |
* |
| 16 |
* effect: The name of the effect to apply, such as round or bevel. |
| 17 |
* If you don't specify an effect, rounding is used. |
| 18 |
* |
| 19 |
* corners: The corners can be one or more of top, bottom, tr, tl, br, or bl. |
| 20 |
* By default, all four corners are adorned. |
| 21 |
* |
| 22 |
* width: The width specifies the width of the effect; in the case of rounded corners this |
| 23 |
* will be the radius of the width. |
| 24 |
* Specify this value using the px suffix such as 10px, and yes it must be pixels. |
| 25 |
* |
| 26 |
* For more details see: http://methvin.com/jquery/jq-corner.html |
| 27 |
* For a full demo see: http://malsup.com/jquery/corner/ |
| 28 |
* |
| 29 |
* |
| 30 |
* @example $('.adorn').corner(); |
| 31 |
* @desc Create round, 10px corners |
| 32 |
* |
| 33 |
* @example $('.adorn').corner("25px"); |
| 34 |
* @desc Create round, 25px corners |
| 35 |
* |
| 36 |
* @example $('.adorn').corner("notch bottom"); |
| 37 |
* @desc Create notched, 10px corners on bottom only |
| 38 |
* |
| 39 |
* @example $('.adorn').corner("tr dog 25px"); |
| 40 |
* @desc Create dogeared, 25px corner on the top-right corner only |
| 41 |
* |
| 42 |
* @example $('.adorn').corner("round 8px").parent().css('padding', '4px').corner("round 10px"); |
| 43 |
* @desc Create a rounded border effect by styling both the element and its parent |
| 44 |
* |
| 45 |
* @name corner |
| 46 |
* @type jQuery |
| 47 |
* @param String options Options which control the corner style |
| 48 |
* @cat Plugins/Corner |
| 49 |
* @return jQuery |
| 50 |
* @author Dave Methvin (dave.methvin@gmail.com) |
| 51 |
* @author Mike Alsup (malsup@gmail.com) |
| 52 |
*/ |
| 53 |
jQuery.fn.corner = function(o) { |
| 54 |
function hex2(s) { |
| 55 |
var s = parseInt(s).toString(16); |
| 56 |
return ( s.length < 2 ) ? '0'+s : s; |
| 57 |
}; |
| 58 |
function gpc(node) { |
| 59 |
for ( ; node && node.nodeName.toLowerCase() != 'html'; node = node.parentNode ) { |
| 60 |
var v = jQuery.css(node,'backgroundColor'); |
| 61 |
if ( v.indexOf('rgb') >= 0 ) { |
| 62 |
rgb = v.match(/\d+/g); |
| 63 |
return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]); |
| 64 |
} |
| 65 |
if ( v && v != 'transparent' ) |
| 66 |
return v; |
| 67 |
} |
| 68 |
return '#ffffff'; |
| 69 |
}; |
| 70 |
function getW(i) { |
| 71 |
switch(fx) { |
| 72 |
case 'round': return Math.round(width*(1-Math.cos(Math.asin(i/width)))); |
| 73 |
case 'cool': return Math.round(width*(1+Math.cos(Math.asin(i/width)))); |
| 74 |
case 'sharp': return Math.round(width*(1-Math.cos(Math.acos(i/width)))); |
| 75 |
case 'bite': return Math.round(width*(Math.cos(Math.asin((width-i-1)/width)))); |
| 76 |
case 'slide': return Math.round(width*(Math.atan2(i,width/i))); |
| 77 |
case 'jut': return Math.round(width*(Math.atan2(width,(width-i-1)))); |
| 78 |
case 'curl': return Math.round(width*(Math.atan(i))); |
| 79 |
case 'tear': return Math.round(width*(Math.cos(i))); |
| 80 |
case 'wicked': return Math.round(width*(Math.tan(i))); |
| 81 |
case 'long': return Math.round(width*(Math.sqrt(i))); |
| 82 |
case 'sculpt': return Math.round(width*(Math.log((width-i-1),width))); |
| 83 |
case 'dog': return (i&1) ? (i+1) : width; |
| 84 |
case 'dog2': return (i&2) ? (i+1) : width; |
| 85 |
case 'dog3': return (i&3) ? (i+1) : width; |
| 86 |
case 'fray': return (i%2)*width; |
| 87 |
case 'notch': return width; |
| 88 |
case 'bevel': return i+1; |
| 89 |
} |
| 90 |
}; |
| 91 |
o = (o||"").toLowerCase(); |
| 92 |
var keep = /keep/.test(o); // keep borders? |
| 93 |
var cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]); // corner color |
| 94 |
var sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]); // strip color |
| 95 |
var width = parseInt((o.match(/(\d+)px/)||[])[1]) || 10; // corner width |
| 96 |
var re = /round|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dog/; |
| 97 |
var fx = ((o.match(re)||['round'])[0]); |
| 98 |
var edges = { T:0, B:1 }; |
| 99 |
var opts = { |
| 100 |
TL: /top|tl/.test(o), TR: /top|tr/.test(o), |
| 101 |
BL: /bottom|bl/.test(o), BR: /bottom|br/.test(o) |
| 102 |
}; |
| 103 |
if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR ) |
| 104 |
opts = { TL:1, TR:1, BL:1, BR:1 }; |
| 105 |
var strip = document.createElement('div'); |
| 106 |
strip.style.overflow = 'hidden'; |
| 107 |
strip.style.height = '1px'; |
| 108 |
strip.style.backgroundColor = sc || 'transparent'; |
| 109 |
strip.style.borderStyle = 'solid'; |
| 110 |
return this.each(function(index){ |
| 111 |
var pad = { |
| 112 |
T: parseInt(jQuery.css(this,'paddingTop'))||0, R: parseInt(jQuery.css(this,'paddingRight'))||0, |
| 113 |
B: parseInt(jQuery.css(this,'paddingBottom'))||0, L: parseInt(jQuery.css(this,'paddingLeft'))||0 |
| 114 |
}; |
| 115 |
|
| 116 |
if (jQuery.browser.msie) this.style.zoom = 1; // force 'hasLayout' in IE |
| 117 |
if (!keep) this.style.border = 'none'; |
| 118 |
strip.style.borderColor = cc || gpc(this.parentNode); |
| 119 |
var cssHeight = jQuery.curCSS(this, 'height'); |
| 120 |
|
| 121 |
for (var j in edges) { |
| 122 |
var bot = edges[j]; |
| 123 |
strip.style.borderStyle = 'none '+(opts[j+'R']?'solid':'none')+' none '+(opts[j+'L']?'solid':'none'); |
| 124 |
var d = document.createElement('div'); |
| 125 |
var ds = d.style; |
| 126 |
|
| 127 |
bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild); |
| 128 |
|
| 129 |
if (bot && cssHeight != 'auto') { |
| 130 |
if (jQuery.css(this,'position') == 'static') |
| 131 |
this.style.position = 'relative'; |
| 132 |
ds.position = 'absolute'; |
| 133 |
ds.bottom = ds.left = ds.padding = ds.margin = '0'; |
| 134 |
if (jQuery.browser.msie) |
| 135 |
ds.setExpression('width', 'this.parentNode.offsetWidth'); |
| 136 |
else |
| 137 |
ds.width = '100%'; |
| 138 |
} |
| 139 |
else { |
| 140 |
ds.margin = !bot ? '-'+pad.T+'px -'+pad.R+'px '+(pad.T-width)+'px -'+pad.L+'px' : |
| 141 |
(pad.B-width)+'px -'+pad.R+'px -'+pad.B+'px -'+pad.L+'px'; |
| 142 |
} |
| 143 |
|
| 144 |
for (var i=0; i < width; i++) { |
| 145 |
var w = Math.max(0,getW(i)); |
| 146 |
var e = strip.cloneNode(false); |
| 147 |
e.style.borderWidth = '0 '+(opts[j+'R']?w:0)+'px 0 '+(opts[j+'L']?w:0)+'px'; |
| 148 |
bot ? d.appendChild(e) : d.insertBefore(e, d.firstChild); |
| 149 |
} |
| 150 |
} |
| 151 |
}); |
| 152 |
}; |
| 153 |
|
