I’ve decided to start blogging more about the actual things I’m working on everyday, and in this series, I want to first talk about the updated and improved demos of jQuery UI. The first important thing to understand is that the demos that come with the development package, and that you can browse from the trunk, and the demos you see at the jQuery UI website are the same.
The standalone demos
To me, the new demos are truly outstanding. Let’s talk a bit about why. If you download the development package, or browse the trunk, you’ll see a demos/ folder, with sub directories for every individual plugin. If you open one of these sub-directories, you’ll see a index.html, a default.html and named individual demos, i.e. containment.html. Each of these demos:
- Is a standalone demo
- Displays a description of the current demo at the bottom
- If you click on a plugin in the left hand navigation, i.e. ‘draggable’,
- it fetches the content of demos/draggable/index.html using Ajax and displays it as right hand sub navigation
- if you click on one of those links, the created iframe in the middle updates itself
The website demos
For the website demos, it got a bit more sophisticated. We removed the beautiful but unusable demo carousel, and created a unified demo section that automatically pulls the standalone demo files from the repository, therefore it’s never out of sync. However, the simple iframe approach couldn’t be used because of the incredible amount of server requests made that way. Here’s the technique behind it:
- include the theme and jQuery UI once
- include demos/index.html using PHP, filter out any script/style tags and the header
This shows you the index file. Perfect. What happens if you click on a link in the left hand navigation now?
- A server-side rewrite rule resolves demos/draggable to demos/?load=draggable
- in PHP:
- we loop through all demo links in the right hand nav and define click events,so the link isn’t triggered, but instead, a hash is set (for easy bookmarking) and
- the selected file is pulled in via ajax – again, we filter out any script/style tags with src attributes, and the header/footer, and update the frame div
- at last, we pull out the description at bottom of every file, and display it below the ‘frame’
So, with a little more work involved, we not only made the demos extremely responsive and fast, but also reduced the requests to the server dramatically. Every time you click on a demo, only one single request is made, to fetch the actual html page.
Pretty cool eh? Enjoy!