I’ve been using jQuery for quite some time and eventually after enough time you will end up writing your own custom plug-in. Fortunately, the mechanics of writing a jQuery plug-in is rather simple. Perhaps that is why we see so many plug-ins for jQuery. The jQuery site alone has some 1500+ of them.
Recently, I decided to redo my site using ASP.NET MVC and decided to use rounded corners for the resume module. I found an excellent CSS implementation and so realized that surrounding existing tag with the necessary mark-up to implement rounded corners was cumbersome and problematic. Custom jQuery plug-in to the rescue.
The CSS rounded corner implementation can be found at the following site http://www.schillmania.com/projects/dialog/png/ Basically, the technique wraps the following mark-up around the desired content you want add rounded corners to.
<div class="rounded-corners">
<div class="hd"><div class="c"></div></div>
<div class="bd">
<div class="c">
<div class="s">
<!-- Your content goes here -->
</div>
</div>
</div>
<div class="ft"><div class="c"></div></div>
</div>
Basically, this mark-up along with some CSS and images will render rounded corner container around your content. This works fine for the odd content that you want rounded corners for. But what if you have dozens of places where you want rounded corners? Do you really want to pollute the mark-up with all those div tags. In my case I decided that a jQuery plug-in would solve the problem. Rather than manually add all the above div tags why not write a jQuery plug-in that will wrap an element with the rounded corner div tags. The jQuery call would look like $(selector).roundedCorners(); This plug-in would take the DOM elements that are matched by the selector and dynamically add these div tags.
Creating a jQuery plug-in is as simple as creating a function;
$.fn.roundeCorners = function() {
//your code goes here
}
One problem with this approach is it assumes that $ is an alias for jQuery. What if a call is made to $.noConflict(); which removes the $ alias. You could use the jQuery function directly jQuery programmers are so use to to using the $ alias. To get around this the following code is used
(function($) {
$.fn.roundeCorners = function() {
//your code goes here
}
})(jQuery);
This syntax is difficult to get your head around but what it does is call an anonymous function with a parameter $ and passes jQuery to the function, that is, for the duration of the function $ represents the function jQuery.
That’s all there is to creating a jQuery plug-in. Now let’s write a jQuery plug-in that dynamically adds the rounded corner div tags.
1 (function($) {
2
3 $.fn.roundedCorners = function() {
4
5 //wrap the element with div tags required to round the corners
6 $(this)
7 .wrap("<div class='rounded-corners'></div>")
8 .wrap("<div class='rounded-corners-bd'></div>")
9 .wrap("<div class='rounded-corners-c'></div>")
10 .wrap("<div class='rounded-corners-s'></div>");
11
12 //need to add header and footer div tags before and after the body div tag
13 var selector = '.rounded-corners ' + this.selector;
14 var bd = $(selector).parents('.rounded-corners-bd');
15 $("<div class='rounded-corners-hd'><div class='rounded-corners-c'></div></div>").insertBefore(bd);
16 $("<div class='rounded-corners-ft'><div class='rounded-corners-c'></div></div>").insertAfter(bd);
17
18 return this;
19 }
20
21 })(jQuery);
The above code wraps all matched DOM elements with the rounded corner div tags. The following shows how to make use of this plug-in
5 <script type="text/javascript">
6 $(function() {
7 $('#foo").roundedCorners();
8 $('.moo").roundedCorners();
9 });
10 </script>
11
12 <div id="foo">Hello foo</div>
13
14 <div class="moo">Hello moo 1</div>
15
16 <div class="moo">Hello moo 2</div>
All three div tags will be wrapped with the rounded corner div tags and will be rendered with rounded corners.