We'll work through examples of each of the out-of-the-box YUI containers that we have just looked at, so you can see exactly how easy they are to implement and work with. Creating custom containers is also possible, but won't be discussed in this book.
To showcase the ease with which Panel objects can be created, we will use our standard template and, besides the ever-present
yahoo-dom-events.js, we will include
container-min.js and its associated
container.css from their corresponding locations as the Dependency Configurator will instruct us. We will also add
dragdrop-min.js so we can drag the Panel around without any further coding on our part.
The page will contain a couple of image thumbnails and when clicking on them, a full sized version will pop up in a Panel. The actual example,
panel.html, that is included in the examples download, has some more decoration, supported by an ancillary CSS file, which we won't analyze here; however, the style of the Panel itself is...