Cornerz v0.6
Bullet Proof Corners plugin for jQuery using Canvas/VML
Usage:
$('.myclass').curve(options)
options is a hash with the following parameters. Bracketed is the default
- radius (10)
- borderWidth (read from BorderTopWidth or 0)
- background ("white"). Note that this is not calculated from the HTML as it is expensive
- borderColor (read from BorderTopColor)
- corners ("tl br tr bl"). Specify which borders to draw
- fixIE (true). Attempt to fix odd(2n+1) dimensions in IE
Why should you care?
- Antialiased
- Fast - this pages renders in 200ms on my Vaio in Firefox and there's quite a few corners!!
- Support for any size radius and border width with minimal performance increase
- No excanvas
- Current layout is maintained
- Works with many tested positions/display/floats (current limitation with inline)
- Supports fluid layouts.
- Original div still shows through, so can easily do hover effects
- Script is only 4.0k uncompressed
- Requires jQuery 1.2.6+
- Tested on :
- IE6 XP/Vista
- IE7 XP/Vista
- Firefox 2 Ubuntu/Windows
- Safari 3 Windows/Mac
- Opera 9 Windows/Linux
- Chrome
Limitations:
- Problem with some Inline elements in IE - due to incorrect reporting of width
- Update - the script now tries to fix this via the fixIE option
Examples
BORDER: 0
DISPLAY: BLOCK
BORDER: 5
DISPLAY: BLOCK
BORDER: 50
DISPLAY: BLOCK
BORDER: 1
DISPLAY: Block
WIDTH: 200px
BORDER: 1
DISPLAY: INLINE
floated tab
floated tab with long text
more tabs
....
a
more tabs
b
c