UIZE JavaScript Framework

JavaScript Examples

The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists all 113 JavaScript 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. Animate Position in JavaScript  See how to animate the position of an HTML element and how to apply amazingly realistic motion effects like easing, elasticity, bounce, and many more. Animate Size in JavaScript  See how to animate the size of an HTML element and how to apply amazingly realistic physics effects like easing, elasticity, bounce, and many more. Animated Buttons with Box Shadow  See how to animate CSS3 box-shadow in order to make buttons leap out of the page when you mouse over them and bounce back when you mouse out of them. Auto Tooltip for Photo Info  See how a fancy photo info tooltip can be added for multiple links, where the tooltip's HTML is built using data tucked in the links' title attribute. Bars For Data Comparison  See an example that uses bar widgets to create a dynamic bar chart to compare nutritional data for fruits, with slick JavaScript animation effects. Basic Bevel  See how a bevel overlay can be created for an image, where the thickness and opacity of the bevel can be controlled dynamically with slider widgets. Basic Color Grid  See an example of a color grid, where the color swatches in the grid are interpolated from RGB corner colors that can be dynamically set by the user. Basic HTML Swap  See a demo of the HTML swapper widget, which provides a JavaScript animation transition effect when swapping out the HTML that the widget displays. Basic Image Port  The image port widget displays an image in a view port using logical sizing and positioning values. See it here, with controls for all its properties. 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. Basic Mask  See a mask widget being used to highlight an image in a layout. Switching to highlighting a different image is accompanied by a JavaScript animation. Basic Progress Bar  Ever needed a progress bar for your Ajax applications to show that requests are busy and how much longer they may take? This demo will show you how. Basic Slider  See a very basic example of a slider widget that lets you select a value in the range of 0 to 200, with a display of the currently selected value. Basic Table Sort  Make your data tables sortable with little to no changes needed to your table HTML. Sort on string columns, date columns, and numerical value columns. Bevel On Multiple Images  See how bevel overlays can be created for multiple images, where the thickness and opacity of the bevel for all images can be controlled with sliders. Button  See a demonstration of the button widget, with a logger that displays its events and state changes, and with links for modifying its state properties. Calendar  See an example of a calendar widget that you can use on your own Web site to let users choose a date from a grid, with controls for navigating months. Calendar Controls Wikipedia  See an example of how a calendar widget can be used to control Wikipedia, where choosing a date loads the Wikipedia page for that date in an IFRAME. Characters Used Indicator  Among the creative uses of the bar widget is this characters used indicator for a textarea. As you type, the bar indicates chars used and remaining. Color Format Converter  Easily convert color values from one format to another. Convert between RGB hex, RGB tuple string, HSL, HSV, CMYK, and SVG color names. Color Gradient Tool  Explore a wide variety of color gradients - from basic gradients to intricate patterns. Tweak presets or build your own. Use gradients to pick colors. 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. Color Pickers With Gradient  See a demo of a dynamically generated color gradient, where the two end colors of the gradient can be modified using RGB color pickers with sliders. Color Sort by RGB Proximity  When you have a limited palette of colors, how can you sort the colors to find the closest matches to a desired color? This example shows you how. Complex Table Sort  See an example of a sortable data table, where one column has complex HTML and some rows are fixed. No problem - the table sort widget handles it all! Coupled Zooming Collection Items  See how two instances of the zooming collection item widget can be coupled together to give you a side-by-side zoomed in comparison of two images. Curve Explorer  Add pizazz to JavaScript animations - bounce, easing, elasticity, and more. Visualize and experiment with preset curve functions. Or create your own! Date Picker  The date picker widget lets users pick dates within configured date ranges, inside a shared date picker dialog. Many configurations are demonstrated. Deck Swapper  See a demo of the deck swapper widget, which provides a JavaScript animation transition effect when swapping from one item in the deck to another. Decorated Confirm Dialog  Why settle for ugly JavaScript alert and confirm dialogs when you can have stylish inline HTML dialogs, themed to your choosing with a bit of CSS! Dependency Analyzer  View detailed info for any module, including a full dependency visualization. Dialog  See an example of a draggable modal JavaScript dialog that uses inline HTML (rather than a blockable popup window) and has a shield to block the page. 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. Digital Clock  See how to easily create a JavaScript digital clock widget in UIZE, that shows hours, minutes, and seconds, using UIZE's seven segment display widget. Domain List Editor  See an example of a domain list editor that lets the user add domains to a list, or select items from the list to remove or modify and then re-add. 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. Dynamic Options  See a demo of an options set widget, where the HTML for the widget's buttons can be dynamically regenerated just by setting new values for the widget. Edge Virtual DOM Events  Edge related virtual DOM events let you perform different actions based upon from which edge the mouse enters or exits a node. See how this works. Fade As a Color Chart  See how acceleration and deceleration affect fades in this visual representation using color gradients, where fades are blending between two colors. Fade As a Graph  Visualize how different acceleration / deceleration curves affect a fade with this graphical representation using bar widgets. Fade CSS Style Across Nodes  See how CSS style properties can be faded across a series of nodes to create color gradient effects you wouldn't think possible without using images. Fade Quantization Chart  See how different values for the quantization property affect a fade with this visualization using color gradients for different quantization values. Fading Links  Elegant menu animation effects to liven up any dull Web page! This JavaScript example shows you what is possible with the UIZE JavaScript Framework. Fading an Object  Animate complex data objects with ease. UIZE supports compound value interpolation. See how an array of two RGB color objects can be faded over time. Generic Auto Tooltip  See how an HTML info tooltip can be added for multiple links, where the tooltip's contents is built using data tucked into the links' title attribute. Get Tree from List  See how a tree data object can be generated by analyzing the structure and contents of a nested list defined by an HTML ul (unordered list) tag. Get Tree from Page  See how a tree data object can be created by analyzing the occurrence of different CSS classes for section headings at different depths of a document. HTML Entities Table  See all the HTML entities in a sortable table. Hierarchical Selector  See a demo of the tree select widget being used to let the user choose a value from a hierarchical value list using the browser's built-in select tag. Hover Fader Color Effects  Who needs boring menus when you can have stunning menu animations that will have your users mesmerized! You have to see these effects to believe them. Hover Fader Stretching Menu  Stretch the limits of what can be done with animated menus. Using JavaScript to animate CSS style properties can produce amazingly slick effects! Hover Fader Text Shadow Animation  Animate the color, horizontal offset, vertical offset, and blur radius properties for any number of CSS3 text shadows to produce amazing menu effects. Hover Fader for Thumbnails  See how to liven up image thumbnails with some cool JavaScript animation! Diverse effects can be achieved by animating different CSS style properties. Image Cycle  Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect. 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. Image Swap With PNG  This example demonstrates that the image swap widget can perform transitions with images in the PNG format that have an alpha / transparency channel. JSON Prettifier  Take ugly / unreadable JSON data and prettify it by re-serializing it. Make it look exactly how you want with the many serialization options provided. JavaScript Calculator Widget  The calculator widget gives you all the functions you'd expect: division, multiplication, addition, subtraction, square root, memory, and percent. JavaScript Scruncher  Take bloated JavaScript source code and scrunch (minify, compress) it using this versatile tool. Drastically reduce its size and even obfuscate it! JavaScript Template Tester  Experiment with JavaScript templates and see how they can be used to generate HTML. See them compiled to JavaScript functions, and JavaScript modules. List Template  See a demo of a template JavaScript module - hand-written, rather than compiled from a JST file - used to generate a hierarchical list from JSON data. Mag View  Experience the image magnifier widget that lets you see a zoomed in version of a highlighted area of an image, with support for multiple zoom levels. Mantle Slideshow  . Marquee With Rest Update  See a demo of the marquee widget's Drag Rest event, which lets you perform more costly drag updates only when the user rests the mouse or ends drag. 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. Multi-line String Serializer  Take multi-line strings and serialize them to multi-line JavaScript string literal expressions using string concatenation. 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. Options  See how to use the options widget to let the user pick a single option from a set of options by clicking on an option button. Test links are provided. Populating Photo Details  See the population class used to dynamically generate HTML for a photo set, where the HTML for each photo shows title, image, description, and rating. Resizable Dialog  See an example of a draggable and resizable modal JavaScript dialog that uses inline HTML (rather than a blockable popup window) and is configurable. Scrolly  See the scrolly widget in action, as it scrolls two sets of thumbnails - horizontal and vertical - with an accompanying JavaScript animation effect. Scrolly Carousel  See the scrolly widget being used to create a scrollable carousel, where scrolling through the pages is accompanied by a JavaScript animation effect. Sequenced Show  This demo shows how you can sequence the appearance of thumbnails in a grid, with thumbnails filling in from the top left and bottom right corners. Sequenced Show Using Swap  See how thumbnails in a grid of thumbnails can be revealed in a choreographed manner, with a JavaScript animation effect for revealing each thumbnail. Seven Segment Display  See an interactive demonstration of a seven segment display widget, much like the classic LED / LCD digit displays on calculators and digital watches. Shared UI  See how some widget HTML for a slider widget can be shared by multiple slider widget instances. The UIZE JavaScript Framework makes this possible. Simple Data Tester  Experiment with SimpleData - an indentation-based format for representing structured data. Convert data formatted as SimpleData to the JSON format. SimpleDoc Tester  Experiment with SimpleDoc - a Wikitext like document format. See its formatting rules in action. See how it is generated to HTML and preview the HTML. Slider Plus Buttons  See how to use a slider widget that has buttons for incrementing or decrementing the value, and buttons for selecting the maximum and minimum values. Sliders as RGB Selectors  Get three sliders in the same room together and you've got yourself an RGB color selector. See how to get sliders to cooperate for the greater good. 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. Slideshow  See an example of a barebones JavaScript slideshow widget, with navigation buttons, basic display of image, title, slide number, and total slides. Slideshow With Dissolve  See a slideshow demo that transitions from image to image with a JavaScript animation effect and that also displays rating stars using a bar widget. Slideshow With Wipes  See an example of a JavaScript slideshow widget with stunning image wipe animation effects that you didn't believe were possible with just JavaScript. Slideshow of Data  Who says that a slideshow can only be used to display an image? See this demo - it uses a slideshow to display nutritional data for various fruits. Sortable Color Table  See all the standardized colors of the CSS 3 specification in a sortable table, where you can sort by name, hue, saturation, lightness, and more. Structured Record Population  See how the population class is used to dynamically generate HTML using an HTML template and a records array, where each record has structured data. Tabbed Interface  Add tabbed interfaces to your own Web pages. See how in this example. Some test links are provided to demo the programmatic interface of this widget. Tabbed Interface With Fade  Everyone's seen a basic tabbed interface. Why not add some pizazz to your tabs with a JavaScript animation cross-fade effect! This demo shows you how. The Built-in Slider Skin  A basic preset skin is provided for the slider widget that is customizable with various parameters. This demo shows a few variations using this skin. The setNodeValue Method  See a demo of the setNodeValue method, which can set a value on select boxes, checkboxes, radio buttons, text inputs, textareas, divs, spans... Tiled Zoom and Pan  In this demo, an image is split into six image port tiles. A JavaScript animation zooms from seeing it repeated six times to seeing the large version. 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. Tree List From JSON  See a demo of a JavaScript expandable / collapsible tree list widget, that can be easily built from a JSON object and can even be dynamically updated. Tree Menu From JSON  See a demo of JavaScript menus, that can be easily built from a JSON object and can even be dynamically updated. These menus also support separators. Two Hierarchical Selectors  See a demo of two instances of the tree select widget used side-by-side - one lets the user select an animal, the other lets the user select a plant. UIZE Unit Tests  See how to run the various unit tests of the UIZE JavaScript Framework. Run a unit test and watch as the test runner chunks through its tests. Uize.Widget.Button.Toggle  See a demo of the toggle button that lets the user cycle through values by repeatedly clicking it. Experiment with the widget's configuration options. Uize.Widget.ImageWipe  See stunning image wipe animation effects you didn't believe possible with JavaScript. Choose from dozens of presets. Tweak values to make your own. Uize.Widget.Swap.Image  See some amazing possibilities for image transitions using lightweight JavaScript animation. Play with lots of effect presets, and even make your own. Uize.Widget.ThumbZoom  Astonish users with a slick animated image preview feature where a larger preview zooms out from a grid of thumbnail images. This demo shows you how. Virtual DOM Events  A demonstration of various virtual DOM events, such as mouseRest, mouseRemainOver, mouseRemainDown, remainFocused, ctrlClick, shiftClick, and more. Widget Visual Samplers  See the visual samplers for one or more widget classes that implement visual samplers. Use this page to visually browse and discover available widgets. Widget Visual Tests  See the visual tests for any widget that implements visual tests. Use this page to test a widget while you're developing it. Zoom and Pan  See how a draggable image port lets you control zoom for an image in a view port by ctrl-clicking and dragging, or pan by just clicking and dragging. Zooming Collection Item with Image Switching  See how the zooming collection item widget is used in combination with an image selector strip to provide an interface for previewing multiple images. Zooming Collection Items  Experience the zooming collection item widget. It gives you a lightweight and intuitive preview behavior, with a JavaScript animation zoom-in effect. enabled/busy in Widget Tree  See a demonstration of the busy and enabled mechanisms of the widget base class, and how busy and enabled state can be inherited within a widget tree. setNodeValue on Multi-select  See a demo of the setNodeValue and getNodeValue instance methods being used to set and get the value for a multiple select style listbox form element.