topical media & game development

talk show tell print

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.