Five Ways to Spice Up Your Site with jQuery
By Akash Mehta2008-11-05
If you use rounded corners on your site, you're probably currently dealing with a mess of <div>s and CSS declarations. Your pages might have something like this:
<div class="dialog">
<div class="hd">
<div class="c"></div>
</div>
<div class="bd">
<div class="c">
<div class="s">
(content)
</div>
</div>
</div>
<div class="ft">
<div class="c"></div>
</div>
</div>
It's a mess, and it doesn't help when you change a single property elsewhere and your various content areas start breaking out of the box. Luckily, the jQuery Corner plugin can take a target element and give it rounded corners, automatically, without a single image on your server!
To get started, download the library, add it alongside jQuery on your server and include it in your page. Next, work out what you give rounded corners - ideally something with a background color that stands out on the element behind it. The library demo page uses this HTML:
<div class="round">
<h1>Round</h1>
<p>$(this).corner();</p>
</div>
As the text suggests, we can easily give it rounded corners using a single line of code, calling the corner() method on a jQuery object of that element. We can simply use this code to round the corner:
$(".round").round();
The plugin author, Dave Methvin, uses this to demonstrate the realistic results of the jQuery brand of simplicity:
For more details, check out the documentation page.
Tutorial pages:
|
|
|||||||||
You might also want to check these out:
|
Link to This Tutorial Page!
