jQuery UI is a standard way to add some fancy Javascript effects to your theme and is now included in Drupal 7 core. You can manually add some jQuery UI effects now.

There is a jQuery UI module to add jQuery UI to Drupal 6. You can add the module now to start practising with jQuery UI effects on Drupal 6.

Compatibility

jQuery UI is tested in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome.

Effects

The effects include drag and drop, resizing, selection, sorting, an accordion, autocompletion, a datepicker, a progressbar, a slider, tabs, show, hide, toggle, animate with colour, add classes, remove classes, toggle classes, and switch classes.

jQuery compatibility

The current jQuery in Drupal 6 is jQuery 1.2 and Drupal 7 includes jQuery 1.4. jQuery UI effects depend on both the version of jQuery and the version of jQuery UI. You may find your favourite effect is not available until you move to D7.

Drupal 7

D7 stores the jQuery UI library in the /misc/ directory. You could copy jQuery UI direct to /misc/ now but you would have to reload each time you replace a version of Drupal 6 with a later version of Drupal 6. You may also find that your jQuery UI does some strange things with the older version of jQuery. You can manually replace the older version of jQuery in /misc/ and you would have to continue manually maintaining it and the change does not appear to create problems with Drupal core but you can have problems with add on modules and themes.

Manually adding jQuery UI to /misc/ appears to be the easiest way to implement UI effects in a Drupal 6 theme for a site that is close to conversion to Drupal 7. If you are using the theme on multiple sites or a site that will not be converted for a long time, use the jQuery UI module.

jQuery UI module

.info file

After you install the jQuery UI module and the jQuery UI library as described in the jQuery UI readme file, add the following line to your Drupal 6 theme. This line is removed for Drupal 7.

template.php

The jQuery UI library contains lots of files with each file providing an effect. In Drupal 6 you can add one file using the following code.

In Drupal 6 you can add several files using a list as shown in the following line.

The Drupal 6 code can be inserted in template.php using a copy of the $d7 code from page.tpl.php. Add the code to the Drupal 6 part of the conditional statement.

In Drupal 7 you use drupal_add_js() as shown in the following lines. Place this code in the D7 part of the $d7 conditional statement.

Paid modification

If jQuery is more work than you want to bite into right now, D-theme can add jQuery to your choice of theme for a modest fee. If your current theme is open source, the result can be contributed back to the community. D-theme tests with the latest Firefox on a separate site where you can see the results before using the modified theme on your site.