Log inRegister
You are here: System » JQueryPlugin » JQueryCorner

JQueryCorner

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,