topical media & game development
lib-present-jquery-desktop-index.htm / htm
<html>
<head>
<title>Index</title>
</head>
<body>
<h1>Basic Steps</h1>
<p>These links guide your through the various steps that compose a compelling spatial desktop:</p>
<ul>
<li><a href="@htm-lib-present-jquery-desktop-basic-steps-basic.html">Basic template</a>: the basic template you'll work on. This is just a skeleton for your experiments. Nothing is implemented here.</li>
<li><a href="@htm-lib-present-jquery-desktop-basic-steps-draggable-single.html">Single draggable</a>: how to make single elements moveable so that you can reposition them on the screen.</li>
<li><a href="@htm-lib-present-jquery-desktop-basic-steps-draggable-group.html">Group draggable</a>: as above, with elements grouping, so many of them move around together.</li>
<li><a href="@htm-lib-present-jquery-desktop-basic-steps-selectable.html">Selection</a>: how to make elements selectable.</li>
<li><a href="@htm-lib-present-jquery-desktop-basic-steps-selectable-draggable.html">Selection and Dragging</a>: the composition of the previous two functionalities, item moving and selection. You can select multiple items and move them together.</li>
<li><a href="@htm-lib-present-jquery-desktop-basic-steps-endless-desktop.html">Panning</a>: create viewports that show only a partial view of the space and allow panning around.</li>
<li><a href="@htm-lib-present-jquery-desktop-basic-steps-zooming.html">Zooming</a>: make your items zoom-aware and allow zooming in and out using the mousewheel.</li>
<li><a href="@htm-lib-present-jquery-desktop-basic-steps-complete-example.html">All of the above</a>: a complete example that composes all the previous example together in a coherent whole: move, drag, zoom, pan and select.</li>
</ul>
<h1>An interesting example</h1>
<p><a href="@htm-lib-present-jquery-desktop-complete-case-complete.html">Play with Magic Cards!</a> Put all the previous examples together, along with a bit of CSS animation into a fictional card organizer for Magic The Gathering(tm).</p>
<h2>Compatibility</h2>
<p>All the above examples have been tested on Firefox and Safari (on a mac, although the platform shouldn't affect the results).</p>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.