UIZE JavaScript Framework

JavaScript Widget Examples

The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 37 JavaScript widget 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.
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. 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 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 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. 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. 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. 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. 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. 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. 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 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. JavaScript Calculator Widget  The calculator widget gives you all the functions you'd expect: division, multiplication, addition, subtraction, square root, memory, and percent. 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. 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. 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 Carousel  See the scrolly widget being used to create a scrollable carousel, where scrolling through the pages is accompanied by a JavaScript animation effect. 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. 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. 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. 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. 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. Uize.Widget.Swap.Image  See some amazing possibilities for image transitions using lightweight JavaScript animation. Play with lots of effect themes, 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. 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.