Moving Pictures : A JQuery Accordion Tutorial
At the recent Adobe MAX conference in San Francisco, I had the pleasure to show off Dreamweaver CS4 and it’s improved support for Ajax in the Day 2 keynote. In addition to continued support of the Spry Framework for Ajax, Dreamweaver CS4 also now provides the ability to add jQuery, YUI and MooTools web widgets to your pages. This ability, combined with the new Live Preview and Live Code features, means that you can see and style these widgets without needing to run to the browser. In fact, due to these enhancements, lots of folks who had even “given up” on Dreamweaver in favor of hand-coding are taking another look.
If you’re already using Dreamweaver CS4 and you’ve not yet visited the Dreamweaver Exchange to download any of the widgets already available, I’d encourage you to do so. You can even head over to the exchange directly from within Dreamweaver by clicking upon the “gear” icon in the Application bar and choosing “Get More Web Widgets”. By working with the OAA (Open Ajax Alliance), we’ve made it easy for developers to package any widget which conforms to the widget specification. You can read more about all of this by checking out the Dreamweaver Widget Packager on Adobe Labs.
Among the 20 initial widgets available, one of my favorites is the phatfusion “Image Menu”. This menu uses images that slide open to expose more of the selected image, which a potential visitor could then click to head off to that section of the site.
When I saw this for the first time, I was really amazed – the only problem being that I don’t use the MooTools framework very often. Instead, I spend my time with either Spry or jQuery.
So, I decided to build the same basic functionality (in a vertical orientation) using the jQuery accordion widget – which is also what I showed during the keynote at MAX. (If you’d like to try this yourself, you’ll first need to head over to the exchange and grab the jQuery Accordion widget. And if you need the files, you can download the finished version.)
(more…)
2 Comments »