jQuery Tools v jQueryUI

There is a debate whether to choose one javascript library or the other in order to have richer interface widgets in your web applications. From my point of view, there is no reason to conclude that on is better than the other.

Each jQuery libray has its own advantages and drawbacks. For example, to date, jQuery Tools lacks drag & drop functionality and jQueryUI lacks tooltips. However, jQueryUI has great theming support while jQuery Tools has a more hancrafted system to create themes.

Future releases of jQueryUI will include tooltip support, and many other enhancement. It's a matter of preference. Both of them are very easy to integrate in your web applications and keep the principle of separation between HTML, CSS and behaviour.

What is best: Prototype or JQuery?

Over time, the evolution of Javascript Frameworks has changed dramatically. When I started this blog, prototype was my best choice at the moment. However, nowadays I've changed my mind and I prefer the use of JQuery. I just wanted to make you know that from now on, the JS examples used in this blog will use JQuery.

These are some of the reasons that made me change the javascript framework from Prototype to JQuery:

1. Available plugins
2. Shorter learning curve
3. It is lightweight
4. Consistency with CSS syntax
5. Very well documented

Unobtrusive js classes

jsPopup

We'll use this class to open a popup centered both horizontally and vertically. The URL of the popup is the href target of the html a tag.

Example:

<a class="jsPopup" href="www.google.es">Google</a>

To stablish other values for the opened window other that the default we can add a new attribute to the html a tag called aPopup using a json syntax:

Example:

<a class="jsPopup" href="www.google.es" aPopup="( 'width':'500 ','height':'500')">Google</a>

If you don't establish the size, a default value of 800x600 pixels will be assigned to the width and height respectively.

jsHideShow

For all element with class jsHideShow, clicking on one of these elements will toggle the maximize/minimize state of a certain div. Both elements have an id.

Example:

<img id="buttonXXX" class="jsHideShow" src ="..." aHideShow="('imgExpand:'...','ImgCollapse:'...') "/>
<div id="contentXXX">...</ div>

Example:

<img id="buttonSearch" class="jsHideShow" src="expand.gif' aHideShow="{'imgExpand':'expand.gif','imgCollapse':'collapse.gif'}" />
<div id="contentSearch">...</ div>

We can stablish an initial state for a block. Example of a block initially minimized:

<img id ="buttonDocs" class="jsHideShow" src ="expand.gif" aHideShow="('imgExpand:expand.gif','imgCollapse:collapse.gif','start:min'}" />
<div id="contentDocs">...</div>