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.

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

All three div tags will be wrapped with the rounded corner div tags and will be rendered with rounded corners.

In an earlier post I described how you can call jQuery from within a Silverlight application. The process is rather simple as was the example. Please refer to the original post for further details.

Afterwards I began to think about calling more complex jQuery constructs from within Silverlight. What about registering events and using anonymous functions? At first glance it didn’t seem it was going to work at least not with the technique I described in my earlier post. Then I discovered the dark side of Javascript the Eval function. The Silverlight HtmlPage.Window object exposes the Eval function that allows you to evaluate any string.

I added the following line of code to my the Page constructor for the example from my previous post.

This code basically registers a click event with the DOM element with id of #hello. When the DOM element is clicked an alert is displayed and it works perfectly well.

As with raw Javascript all the pros and cons with the use of Eval exist when used from within Silverlight. But it’s good to know that if required complex Javascript functionality can be implemented from within Silverlight.

Last night I gave a jQuery presentation at TVBUG and I was asked whether you could call the jQuery API directly from within Silverlight. My initial response was yes, but I had promise the person that I would create a demo and blog about it.

Calling Javascript from within Silverlight control involves the following steps;

1. Add a using System.Windows.Browser namespace to the code behind of the Silverlight control.
2. Creating a ScriptObject by calling HtmlPage.Window.CreateInstance.
3. Calling the Invoke method off the ScriptObject from step 2.

Let’s look at some code.

The listing below contains a code snippet that is run when a Silverlight button is clicked.

Notice the parameters to the HtmlPage.Window.CreateInstance static member shown on line 25 contains the call to jQuery function $() and the selector #hello. This call returns a ScriptObject and can subsequently be used to invoke functions off the jQuery object. In this example, I am first setting the background of the DOM element with id of hello to red and then setting it’s border.

I have a working demo of this just navigate to this site.  

I had one of two options, drink green beer on St. Patrick's Day or give a JQuery presentation a TVBUG. Silly me I chose to give the presentation. All kidding aside, today, I had the privilege to speak at the Toronto Visual Basic User's Group. I decided to give the talk a St. Patrick’s theme and provided green food colouring for the water. I also gave the talk while wearing a St. Patrick’s hat.

The topic was on jQuery a technology that I have embraced for the last few months. As ASP.NET developers we need to upgrade our skill sets and be able to provide rich internet applications. jQuery is one such technology that delivers Web 2.0 type functionality. The audience was quite engaged and at the end of the presentation I got some very positive feedback and interest in jQuery. If you want to see the presentation online then visit the site. 

Here are some photos from the meeting.