YUI Container Primer Tutorial

YUI Container Primer Tutorial

We’ve quite often visited Yahoo’s YUI library of JavaScript functionality for useful front-end web application ideas.

Today we continue with ideas thanks to the great ideas in JavaScript and Ajax (seventh edition … ISBN: 9780321564085) by Tom Negrino and Dori Smith (page 371-375), and look at the YUI library concept of a “container” as “an object that encloses any kind of content” (to quote from this book).

Sounds pretty open-ended, and it is, and reminds one (or even more than one) of the idea of a “widget”, perhaps.

To categorize these “container” types we have …

1. Module … can appear anywhere on webpage
2. Overlay … floats above webpage inline content
• Tooltip … small floating (informational) boxes
• Panel … mimics operating system window
• Simple Dialog … yes/no
• Dialog … standard dialog

… so today we do a little “converter” program … you know the sort … feet to metres, fahrenheit to celcius degrees etcetera etcetera etcetera … that uses an YUI Overlay Dialog “container” arrangement.

Here are some programming source code links to supplement the live run …

• yui_container.html … HTML code calls …
• ourcontainer.css … CSS (for local styling)
• ourcontainer.js … JavaScript (for local purposes, in Object Literal form)

Link to YUI Library information … via Wikipedia.
Link to YUI Library spiritual home page … via Yahoo!
Link to YUI Library download page … download YUI Library here.
Link to YUI Library container information page … … via Yahoo!

If this was interesting you may be interested in this too.