jQuery is a fairly easy to use if you understand CSS or been working with HTML for a while, but what if you are a drag & drop developer? Who never has done that? Or if you want to just whip up a nice effect quickly? Well the guys from Microsoft have recently launched Glimmer which is a free jQuery effects IDE.
When you launch the very good looking WPF application (read:SLOW) you get four templates, which 3 of them have a wizard interface to set it up.
- Image Sequencer (click here for the demo of this effect): This creates a rotating image box. Think of use for banners where you want to have each image go to a different URL or for a picture rotate/slide show. This one has four steps:
- Description (where is the “Do not show this again” checkbox)
- Select the images and set the URL for them
. What is nice here is the live preview window on the right hand side. - Set how long to delay between images and what the image size should be (say if you need to resize)
- Lastly the save page. The UI is a little odd here, since there is no finish button. You need to use the (large) save button. When you save it you get a folder with an images sub folder (containing your images), a CSS file, an image for the button (to manually switch between images), jQuery 1.3.2, a minified js file of the effect you have done and a html page for testing/usage
- Dropdown Menu Wizard (click here for the demo of this effect): This creates a drop down menu. It has 3 steps:
- Description (no “Do not show this again” check box again)
- Set up the top level menu options
- Add second level options and save. The output is pretty much the same as with image sequencer - minified js file of your effect, jQuery and an HTML page.
- Custom: The non-wizard of the group. This guy is powerful and will let you build a lot of effects together, but you need to have an HTML file to start with as it will give you a list of the tags/id’s available - no page, no tags, nothing to work with: . If gives you a single page to wire up the events and I think this would be useful for people needing something special.
- Tooltip Wizard (click here for the demo of this effect): Two step wizard to add tool tips to text/images.
- Description (no “Do not show this again” check box again)
- On step two you put in the text/image and the tool tip and save it.
I do like the menu option “Clean Code Mode” (under the options menu) which disables the minifi-ing of the code it generates. This will be very useful for people using this to learn from.
Overall this is a good first drop, although it should be viewed as a beta. The performance is terrible, there is so much more you could do with jQuery that it doesn’t do, it is unaware of plug-in’s which is important for jQuery and the UI has many things that aren’t logical (there is no hint that the Custom needs a HTML page to actually do anything). However as a tool to train people, or give designers a tool to work with jQuery this will be very valuable and I will be demo’ing it at my jQuery talk.