Easy jQuery

Blog about jQuery - next generation JavaScript library.

Archive for November, 2008

Nov
16

jQuery Corner plugin.

AlexHow-to, Plugins

I would like to tell you about one outstanding plugin - jQuery Corner. With this plugin you can easy draw different styles corners. You can draw rounded, with different radius corners, shaped corners, you can apply different styles to different corners.

For using this plugin you should include jQuery library and plugin file:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

And here is the most simple example of using this plugin, which make round corners for div with id #example:

<script type="text/javascript">
$(document).ready(function() {
  $("#example").corner("round");
});
</script>

Open example with different style corners in separate window and view source code.

Using keywords top, bottom, tl, tr, bl, br you can change view only for some of corenrs:

  $("#example").corner("cool tl br");

Open this example in separate window and view source code.

Changing size of corners in pixels is also very easy:

  $("#example").corner("5px");

Open this example in separate window and view source code.

Using “chains” you can apply different styles of corners to the same element:

  $("#example").corner( "br top").corner("notch bl 20px");

Open this example in separate window and view source code.

You can download plugin source code from it home page: jQuery corner source code