Posts Tagged ‘JQuery’

I have been really into JQuery the last few months. Can’t you tell? ^_^ Their plugins and documentation are amazing. I only wish I could quantify how much development time this framework has saved me. Not only does it reduce development time but it helps with the user experience by allowing manipulation of elements and allowing them to do things like drag and drop.

It is important to know that all JQuery plugins are tested for compatibility and currently have been tested in: IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome. You should always test for your target audience. That being said, I have never had the problem of a plugin or function not working properly in modern browsers.

One of my favorite plugins is the Datepicker. It is very simple to implement, yet very, very customizable. I have used this plugin in different projects. They look and act so different that if you were to visit each site (to the untrained eye) you could not tell they are the same code base.

Another very useful plugin that I use a lot is the Validate plugin. Again, we have an easy implementation. Use a selector and select your form. Let’s say we have a form with the ID of  “myForm” and we want to ensure that the fields are validated. Just add the following line and that’s it:

$("#myForm").validate(); - Simple, uh?

“A single line of jQuery to select the form and apply the validation plugin. And a bit of metadata on each element to specify the validation rules. Of course that isn’t the only way to specify rules. You also don’t have to rely on those default messages, but they come in handy when starting to setup validation for a form.” – Validator Documentation

There are a ton more plugins out there. These are just the ones I use most on my projects.

These, and a lot more of them, can be seen on their demo and documentation.

I made a small presentation today about JQuery. It was meant to help people that haven’t been exposed to JQuery before get familiar with it.

You may view and download the presentation here.

In my recent development endeavors there has been an increased amount of UI design. One of my good friends, (and amazing developer) Omar suggested I try JQuery. He was kind enough to send me some samples of the things he had done so I could get a “taste”.

Now that I have tasted the good of the gods, I am hooked. JQuery is extremly simple to implement and use. The syntax is very friendly and the documentation couldn’t be clearer.

My two favorite UI elements that I have implemented are the DatePicker and the Show/Hide functions.

Let’s talk first about the Show/Hide functions. I used to use CSS to achieve this effect. One of my favorite implementations is, when a user clicks a button, a form area will “appear”. CSS does this really well. However, implementing transition effects like “blinds” is another story. With JQuery, just a couple of simple lines of code and you’re done. Plus, you can even set things like speed and opacity.

The other element I love is a plugin called DatePicker, which is now included in the JQuery UI library. I used to use an old Javascript calendar to allow users to select dates. It did work, but implementing it was always a pain and if someone were to come and debug my code, I would end up having to give them a crash course in Javascript so that they would understand how it worked. With DatePicker there is no guessing. What is even better is that you may have multiple stylesheets for the DatePicker. This feature comes in especially handy when you handle multiple sites. Just load a CSS file of your choosing, load DatePicker and you have a fully customized calendar style of your site. Change the CSS file you loaded and you don’t have to change anything else. You will get a totally differently styled calender with very little effort.

I am still experimenting with the extent of usage of this library. I look forward to seeing the many implementations I know I will use it for.

On a final note: I was fortunate to find this great jquery cheat sheet. It’s great for a nice quick reference. You may download it here.