UIZE JavaScript Framework

JavaScript Touch Examples

The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 13 JavaScript touch examples.
TAKE A STEP-BY-STEP TOUR...
You can take a step-by-step tour through the examples listed on this page. When you get into the tour, you can use the tour navigation bar that will appear just under the title bar to navigate through the examples. Use the arrows to go forward or back, or click on a "notch" on the progress bar to jump straight to an example.
3D Rotation Viewer  Easily create a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad. Basic Marquee  See a basic example of the marquee widget in action. Some test links provided let you change some of the widget's configuration options dynamically. Color Grid With Color Pickers  See an example of a color grid, with RGB color pickers for editing corner colors, and the ability to click-and-drag in the grid to "smear" its colors. Color Picker  See how three RGB sliders widgets - with sliders for red, green, and blue - can be used to tweak text color, background color, and border color. Different Marquee Modes  See how to configure the marquee widget. Learn how to contrain to area, have a fixed aspect ratio, minimum dimensions, non-resizable sides, and more. Drag-to-move  Learn about drag-and-drop in this basic example where you'll see how to wire up a bunch of image thumbnails so they can be dragged around a workspace. Draggable Image Port  See how a draggable image port is wired up to a set of sliders. Use the image port and the sliders update. Use the sliders and the image port updates. Dynamic Collection  See an example of a dynamic grid of images, where you can select one or more, drag-and-drop to rearrange, remove, select all, clear selection, etc. Image Port Inside a Marquee  See this demo, where an image port is resizable by a marquee, to better understand how the logical sizing and positiong of the image port widget work. Marquee and Image Port  See this demo for a drag-and-drop image crop interface, with an enlarged display of the cropped region. Drag to move it, or drag its edges to resize. Multiple Sliders From a Template  See how to supply your own HTML template for widgets. Seven sliders in a row - all using the same HTML, but each with its own unique configuration. Sliders in a Color Blender  Three sliders for one RGB color selector. Three sliders for another. One slider to blend between the colors. Three sliders to show the blended color. Transferring State  UIZE makes it easy to transfer state from one widget to another. See how to copy state from one marquee to another - or even how to keep them coupled.