Thursday, July 02, 2009

jQuery UI ThemeRollerReady IFRAME in a dialog box

Whilst making preparations for upgrading to uPortal 3.1.x from uPortal 2.5.x I came into contact with jQuery UI themes.

In our previous portal the help screens were displayed using Cody Lindley's ThickBox. At the time I first introduced Thickbox to our portal I thought this was pretty revolutionary, clicking on a link made the background dim and the help text (via an IFRAME) was shown in sharp contrast in the foreground of the page (very Web 2.0!).

The interface for uPortal 3.1 has evolved considerably from 2.5.x. The fluid project have worked on uPortal 3.1 to improve the user experience. jQuery and jQuery UI have become an integral part of the uPortal interface. uPortal 3.1 makes good use of jQuery UI dialog and tab widgets. (Incidentally, when did dialogue become dialog?) As the range of jQuery UI widgetry expands so too will the options for portal improvement, all with a common look and feel and easily themed.

In our new portal I would still like to access the help pages in a Thickbox/IFRAME style. However, the jQuery plugins that provide this kind of functionality (Thickbox and jqModal) do not look like the other jQuery UI widgets and are not themeable via jQuery UI themes. I could probably map the plugin CSS to the jQuery UI theme CSS but this seems like it could be a lot of work. So I have produced my own version of a dialog using an IFRAME.

I am fairly new to jQuery and what I have produced isn't quite up to jQuery plugin standard but if somebody out there wanted to apply some finishes touches to it I would be happy to contribute it back to the jQuery effort. The main difference between my effort and Thickbox and jqModal is that I am only interested in IFRAMEs and my version should be ThemeRollerReady. All being well you should see the themeswitcher below and a click on the link below that should give you a dalog box IFRAME:

jQuery UI IFRAME dialog box example

alternatively you can see it at standalone jQuery UI IFRAME dialog box example.