This plugin adds cross-browser support for rounded corners. For modern browsers the appropriate css attributes are used while
there is a fallback strategy for others.
Usage
JavaScript API
The javascript API:
corner()
takes a single string argument:
$('#myDiv').corner("effect corners width");
with
- effect: name of the effect to apply, such as round, bevel, notch, bite, etc (default is round).
- corners: one or more of: top, bottom, tr, tl, br, or bl.by default, all four corners are adorned.
- width: width of the effect; in the case of rounded corners this is the radius. specify this value using the px suffix such as 10px
Any element using the
jqCorner
class will be rounded. Options are extracted from the
data-corner
attribute of the markup.
Foswiki integration
Add the
jqCorner
class to elements that should be rounded. Additional parameter are provided via
the
data-corner
attribute of an HTML element. (Note, that this differs from other plugins where parameters
are provided inside the
class
attribute using
JQueryMetadata.)
Examples
No such plugin corner
1. Lorem ipsum dolor sit amet
Consectetuer adipiscing elit. Nulla dui turpis,
convallis eget, lacinia id, vulputate ut, ipsum. Donec sed sem. Ut tempus. Nunc
egestas consectetuer augue. Sed a nibh. Duis rutrum nibh. Sed in orci at arcu
molestie ultrices. Quisque a lectus. In mollis, nulla id rutrum tincidunt,
2. Lorem ipsum dolor sit amet
Consectetuer adipiscing elit. Nulla dui turpis,
convallis eget, lacinia id, vulputate ut, ipsum. Donec sed sem. Ut tempus. Nunc
egestas consectetuer augue. Sed a nibh. Duis rutrum nibh. Sed in orci at arcu
molestie ultrices. Quisque a lectus. In mollis, nulla id rutrum tincidunt,
3. Lorem ipsum dolor sit amet
Consectetuer adipiscing elit. Nulla dui turpis,
convallis eget, lacinia id, vulputate ut, ipsum. Donec sed sem. Ut tempus. Nunc
egestas consectetuer augue. Sed a nibh. Duis rutrum nibh. Sed in orci at arcu
molestie ultrices. Quisque a lectus. In mollis, nulla id rutrum tincidunt,
4. Lorem ipsum dolor sit amet
Consectetuer adipiscing elit. Nulla dui turpis,
convallis eget, lacinia id, vulputate ut, ipsum. Donec sed sem. Ut tempus. Nunc
egestas consectetuer augue. Sed a nibh. Duis rutrum nibh. Sed in orci at arcu
molestie ultrices. Quisque a lectus. In mollis, nulla id rutrum tincidunt,