First attempt with jQuery UI

15 Feb

Its been quite some time that I’ve wanted to try out jQuery UI. I admit I did not bother to check if jQuery UI is the “official” library for jQuery, but the demonstrated theme-able widgets looked so amazing, plus the fact that this was based on jQuery – I really wanted to give it a shot. I know, i know – there are many libraries out there. I usually use AjaxControlToolkit, for the past several years actually, alongside other 3rd party controls (which were usually a necessary compromise), alongside jQuery and custom plug-ins.

BTW: At the current time, jQuery UI (1.8.9) has less than ten widgets available, lots of themes and other impressive effects. I only wish it had more widgets available.

In order to quick start with jQuery UI, you simple have to download a jQuery UI + theme, and follow the simple instructions here. The download page consists of many options, so I’ll simply recommend using the box on the right (labeled “Theme”), select a theme and hit the “Download” button. This will download a zip file with the complete package + the selected theme.

Of the different widgets I usually use, having a Modal Dialog is one of my preferred ones. Following the documentation and samples, simply displaying a Modal dialog message is quite simple. If you need a fill-out form, you’ll require a little more help from the documentation (or samples which are embedded within the downloaded file). What I did was a simple copy-paste of the HTML+JavaScript of the Modal Form sample, and started to change them according to my specific needs. I required a single textarea field with a simple validation, so I made the appropriate changes and the dialog worked without any problems. I was quite amazed how easy it is to add buttons to the dialog, with their callback functions.

1: <div  id="dlgNickName"  title="Nickname"  style='display:none;'
2:     <p> 
3:         Creating a nickname makes it easy to ....</p> 
4:     <br /> 
5:     <p class="validateTips"> 
6:         Enter a nickname</p> 
7:     <p> 
8:         <textarea rows="1"  style='width: 450px' name="name" id="name"
                        class="text ui-widget-content ui-corner-all"></textarea></p> 
9: </div>
1: $("#dlgNickName" ).dialog({
2:    height: 240,
3:     width: 500,
4:    modal: true ,
5:     autoOpen: false ,
6:     resizable: false ,
7:     buttons: {
8: 		"Apply" : function () {
9: 			$( "#nickname" ).text(name.val()); 
10: 			$( this ).dialog( "close" );
11: 		},
12: 		Cancel: function () {
13: 			$( this ).dialog( "close" );
14: 		}
15: 	},
16: 	close: function () {
17: 		allFields.val( "" ).removeClass( "ui-state-error" );
18: 	}
19: });

Finally, and without having anything to do with jQuery UI, I used the “what seems to be fantastic” TEXTAREA jQuery Textarea Counter Plugin (which also optionally limits the text and not only counts). This was the better plugin I found for this purpose. Other plugins I’ve looked at did either limit or either count, and those who combined both features didn’t looks as good as this one. It is also very customizable and simple to use.

The result looks like this (I used jQuery UI’s “sunny” theme):

In short, the jQuery UI Dialog Modal Form proved successful, at least for now. jQuery has other powerful widgets I’ll probably use later on. I’m already looking forward to using the ToolTip widget in the oncoming 1.9 release.

Leave a comment

Posted by on 15/02/2011 in Software Development


Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: