JavaScript Extensions & JQuery Utilities

Some people cringe at the thought of writing JavaScript. A JavaScript colleague of mine says this to those people: “If you hate JavaScript, then you’re doing it wrong” (Dirty Steve). I can honestly say that I use to write JavaScript the wrong way. Since this colleague introduced me to JQuery and some of the associated tools, it has taken on a whole new life. There are a couple of tools / Utilities / extensions (whatever you want to call them) that really shape JavaScript into something loveable and maintainable. Here is small overview of some of the scripts and add-ons that I use on a regular basis, and a few other JQuery plug-ins (although I am not providing demo’s, all these components contain lots of example code pieces and demo’s on their home site).

1. JQuery 1.4.2 Corewww.jquery.com

So right out of the start, the core framework for JQuery is a must. Simply having the power of the selectors and being able to traverse the object model with ease is a major win in the JavaScript real in my opinion. At time of the writing these notes the latest version is 1.4.2, and all the components and scripts from here on in I know at least work with this version of JQuery. For those that are completely new to JavaScript get over and checkout JQuery: www.jquery.com

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript” (jquery.com).

2. JQuery UIwww.jqueryui.com

A lot of the javascript you write is in some form related to driving the UI of your web application. In the same way the JQuery framework provides an easy way to manipulate and traverse the DOM, JQuery UI provides an easy way to add a full feaured level of user interaction controls without much work. You’ll find a plethora of  useful interactions, widgets, effects and utililities built into this framework, all of which you generate a custom theme for the control and a custom script (with only the components you need) all in a couple of minutes of work (you even get images and CSS sheets ready to go).

A couple of things provided in this include:

  • Draggable, Droppable, Sortable framework that all works in conjunction with each other.
  • Accordians, Autocompletes, Datepickers, Progress bars, Sliders, and Tabs.
  • Color Animations, Toggle Classes, Hide and Show Effects.

3. JQuery Toolshttp://flowplayer.org/tools/

JQuery Tools is very similar to JQuery UI, but provides some very specific types of control interfaces for very specific purposes. However, keep in mind that JQuery Tools and JQuery UI can be used in conjunction with each other to build even more powerful controls. JQuery Tools consist of the following components you will love:

  • Tabs – similar to JQueryUI tabs but provide a little more flexibility and animation effects.
  • Tooltip – provides out of the box control for creating custom hover over tooltips in a single line of code.
  • Overlay – easy to use modal like boxes that appear over top of other page content. Has complete modal functionality and much more.
  • Scrollable – everything you need to create scrollable user friendly graphic interfaces.
  • Form – tools for building forms, validation and inputs (HTML 5!)
  • Toolbox – a small group of awesome js tools for controlling browsers back button, button clicks, mousewheel, etc.

Example

In this example there are a lot of the above tools in use in order to create a custom PowerPoint Report generator by allowing the users to drag and drop slides they want in their presentation to include:

                1. The arrows on the left and right hand side (top and bottom – 4 in total) are used to scroll between multiple pages – this uses the JQuery Tools Scrollable

                2. The bubble description that is opened in the center is a JQuery Tools Tooltip.

                3. The Box in the center of the image that is in the middle of nowhere – a dragging item being moved from the bottom level to the top level to be dropped in place (and of course sorted too) – from JQuery UI Draggables, Droppables, and Sortables.

                4. Not shown in the image, but lots of drag and drop effects used as well from the JQuery UI.

 example

4. JSON Serializationwww.json.org/js.html

If your anything like me, then integration between .NET and JavaScript is a must. The fastest easiest way I’ve found to do that is through JSON serialization. JQuery 1.4.2 Core has built in the ability to deserialize JSON as follows:

var obj = jQuery.parseJSON(‘{“name”:”John”}’);               (see http://api.jquery.com/jQuery.parseJSON/)

However, what 1.4.2 does not have is the ability to serialize or “stringify” a JavaScript object back to JSON, which seems incredibly ridiculous to have the ability to serialize in one direction. Thank goodness, you can always use the standard JSON2.js methods for stringifying and deserializing. Download the script and include it, and it looks something like this:

var myObject = JSON.parse(myJSONtext);

var myJSONtext = JSON.stringify(myObject);

*Note: This is not a JQuery dependent inclusion. You require no other files or JS Libraries to take advantage of these JSON Serialization functions.

5. Array Functionshttp://4umi.com/web/javascript/array.php

Sometimes working with arrays and collections in JavaScript just ain’t what it should be. JQuery doesn’t provide too much in the way of this either. A small include of this nice Array library will fix that for you. Some of the things included in there are functions like:

  • Array.concat() – Join two arrays
  • Array.copy() – Copy an array
  • Array.pop() – Remove and return the last element of an array
  • Array.shift() – Remove and return the first element
  • Array.slice() – Copy and return several elements
  • Array.unshift() – Add an element to the beginning of an array
  • Array.forEach( function ) – Apply a function to each element
  • Array.insert( index, value ) – Insert value at index, without overwriting existing keys
  • Array.lastIndexOf( value, begin, strict ) – Return index of the last element that matches value
  • Array.random( range ) – Return a random element, optionally up to or from range
  • Array.shuffle( deep ) – Randomly interchange elements
  • Array.map() – Change each value according to a callback function

*Note: This is not a JQuery dependent inclusion. You require no other files or JS Libraries to take advantage of these Array functions.

6. Underscorehttp://documentcloud.github.com/underscore/

Underscore is a great addon to the JQuery library that provides a couple of additional enhancements to JavaScript that you may expect to see and don’t. I won’t speak too much to this library as I am not that familiar with:

“Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux.

Underscore provides 60-odd functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so modern browsers will use the native implementations of forEach, map, reduce, filter, every, some and indexOf” (http://documentcloud.github.com/underscore/).

You will notice some duplicate functions in terms of implementation in this Library and Array.js library, however both scripts can work together on the same page, no issues. Pick and choose what you like!

7. JQuery Tablesorterhttp://tablesorter.com/docs/

This is a JQuery plug-in that provides an easy to use interface for client side table sorting. This is an amazing little utility that works quite well. See my previous blog post on this for more information: “Client Side Table Sorting in JavaScript”.

8. JQuery Parsequeryhttp://plugins.jquery.com/project/parseQuery

This is a great little JQuery plug-in that allows you to parse the querystring into a JavaScript object, or visa-versa, and stringify a JavaScript Object into the querystring. Take a look at this example:

Url: http://www.test.com/index.htm?test=hi&val=45

var querystring = $.parseQuery();

alert(querystring.test);

alert(querystring.val);

This becomes very nice when passing around some variables via the querystring. Brings you down to a single line call at the start of your app, then you can use a nice object to pass around.

9. JQuery ContextMenuhttp://www.trendskitchens.co.nz/jquery/contextmenu/

Context menu’s are always nice….since..well… they are contextual!!! You can always throw together a context menu on your own with the proper mouse clicks etc, or use this handy JQuery plugin that will create the menu for you (and take care of positioning and all!!). Its quite easy to use, and seems quite flexible, take a look:

$(‘#objecttorightclick’).contextMenu(‘rightClickMenu’, {

            onContextMenu: contextClick,

            bindings: {

                ‘bulkcopy’: function(e) { alert(‘hi’); }

            }

        });

In this example, you bind the contextMenu to a selected object. Then the “onContextMenu” determines the function to call on initiation, and the bindings section determines the buttons and their associated click events that get called when that right click item is selected. Check out the example for yourself on the demo website: http://www.trendskitchens.co.nz/jquery/contextmenu/

Example

This example basically generates a large grid of data that allows each cell to be individually clicked and edited, including context menu’s, tabbing, and more.

                1. You notice a pop-up right click menu that allows the user to copy a cells context to the entire column.

                2. The user can edit an individual cell by double clicking it – it automatically changes to a textbox and saves it when the user clicks away (after client side validation).

                3. The user can tab through and edit the cells (also shift + tab to go backwards) in a very simplistic and standard way.

 example2

Conclusion

In the end, libraries and frameworks like those above make the difference between light and day in writing JavaScript. There are tons more where these come from, take a look around!