Uize.module ({
name:'UizeSite.Examples',
builder:function () {
return function () {
return [
{
path:'examples/3d-rotation-viewer.html',
title:'3D Rotation Viewer',
keywords:'animation drag-and-drop ipad touch Uize.Widget.Drag Uize.Fade.Factory',
description:'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.',
imageSrc:''
},
{
path:'examples/animate-position-in-javascript.html',
title:'Animate Position in JavaScript',
keywords:'animation Uize.Fx',
description:'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.',
imageSrc:''
},
{
path:'examples/animate-size-in-javascript.html',
title:'Animate Size in JavaScript',
keywords:'animation Uize.Fx',
description:'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.',
imageSrc:''
},
{
path:'examples/animated-buttons-with-box-shadow.html',
title:'Animated Buttons with Box Shadow',
keywords:'animation widget menu Uize.Widget.HoverFader Uize.Fx.xShadows',
description:'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.',
imageSrc:''
},
{
path:'examples/auto-tooltip-photo-info.html',
title:'Auto Tooltip for Photo Info',
keywords:'featured widget Uize.Widget.AutoTooltip',
description:'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.',
imageSrc:''
},
{
path:'examples/bars.html',
title:'Bars For Data Comparison',
keywords:'featured animation Uize.Widget.Bar',
description:'See an example that uses bar widgets to create a dynamic bar chart to compare nutritional data for fruits, with slick JavaScript animation effects.',
imageSrc:''
},
{
path:'examples/color-grid.html',
title:'Basic Color Grid',
keywords:'color Uize.Widget.ColorGrid Uize.Util.PropertyAdapter',
description:'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.',
imageSrc:''
},
{
path:'examples/swap-html.html',
title:'Basic HTML Swap',
keywords:'animation widget Uize.Widget.Swap.Html',
description:'See a demo of the HTML swapper widget, which provides a JavaScript animation transition effect when swapping out the HTML that the widget displays.',
imageSrc:''
},
{
path:'examples/image-port.html',
title:'Basic Image Port',
keywords:'Uize.Widget.ImagePort',
description:'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.',
imageSrc:''
},
{
path:'examples/marquee.html',
title:'Basic Marquee',
keywords:'widget touch ipad Uize.Widget.Resizer.Marquee',
description:'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.',
imageSrc:''
},
{
path:'examples/mask.html',
title:'Basic Mask',
keywords:'animation widget Uize.Widget.Mask Uize.Fade.Factory',
description:'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.',
imageSrc:''
},
{
path:'examples/progress-bar.html',
title:'Basic Progress Bar',
keywords:'animation widget Uize.Widget.Bar.Progress',
description:'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.',
imageSrc:''
},
{
path:'examples/slider.html',
title:'Basic Slider',
keywords:'Uize.Widgets.Slider.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/table-sort-basic.html',
title:'Basic Table Sort',
keywords:'widget Uize.Widget.TableSort',
description:'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.',
imageSrc:''
},
{
path:'examples/button.html',
title:'Button',
keywords:'widget Uize.Widgets.Button.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/calendar.html',
title:'Calendar',
keywords:'widget Uize.Widgets.Calendar.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/calendar-controls-wikipedia.html',
title:'Calendar Controls Wikipedia',
keywords:'Uize.Widgets.Calendar.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/slider-chars-used.html',
title:'Characters Used Indicator',
keywords:'form Uize.Widgets.Bars.UsedAndRemaining.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/color-format-converter.html',
title:'Color Format Converter',
keywords:'tool color Uize.Color Uize.Color.xHsv Uize.Color.xSvgColors Uize.Color.xCmyk Uize.Widgets.Form.Input.Text.Widget Uize.Util.PropertyAdapter',
description:'Easily convert color values from one format to another. Convert between RGB hex, RGB tuple string, HSL, HSV, CMYK, and SVG color names.',
imageSrc:''
},
{
path:'examples/color-gradient-tool.html',
title:'Color Gradient Tool',
keywords:'color tool Uize.Color',
description:'Explore a wide variety of color gradients - from basic gradients to intricate patterns. Tweak presets or build your own. Use gradients to pick colors.',
imageSrc:''
},
{
path:'examples/color-grid-with-pickers.html',
title:'Color Grid With Color Pickers',
keywords:'color drag-and-drop touch ipad Uize.Widget.ColorGrid.Draggable',
description:'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.',
imageSrc:''
},
{
path:'examples/color-picker.html',
title:'Color Picker',
keywords:'color touch ipad Uize.Widgets.RgbSliders.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/color-pickers-with-gradient.html',
title:'Color Pickers With Gradient',
keywords:'color Uize.Widgets.RgbSliders.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/color-sort-by-rgb-proximity.html',
title:'Color Sort by RGB Proximity',
keywords:'featured color Uize.Color Uize.Color.Util Uize.Color.xSvgColors',
description:'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.',
imageSrc:''
},
{
path:'examples/table-sort-complex.html',
title:'Complex Table Sort',
keywords:'Uize.Widget.TableSort',
description:'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!',
imageSrc:''
},
{
path:'examples/collection-item-coupled-zooming.html',
title:'Coupled Zooming Collection Items',
keywords:'animation zoom Uize.Widget.CollectionItem.Zooming Uize.Util.Coupler',
description:'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.',
imageSrc:''
},
{
path:'examples/curve-explorer.html',
title:'Curve Explorer',
keywords:'animation featured tool Uize.Curve',
description:'Add pizazz to JavaScript animations - bounce, easing, elasticity, and more. Visualize and experiment with preset curve functions. Or create your own!',
imageSrc:''
},
{
path:'examples/date-picker.html',
title:'Date Picker',
keywords:'widget form Uize.Widgets.Pickers.Date.Widget',
description:'The date picker widget lets users pick dates within configured date ranges, inside a shared date picker dialog. Many configurations are demonstrated.',
imageSrc:''
},
{
path:'examples/swap-deck.html',
title:'Deck Swapper',
keywords:'animation widget Uize.Widget.Swap.Deck',
description:'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.',
imageSrc:''
},
{
path:'examples/decorated-confirm.html',
title:'Decorated Confirm Dialog',
keywords:'Uize.Widget.Page',
description:'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!',
imageSrc:''
},
{
path:'examples/dependency-analyzer.html',
title:'Dependency Analyzer',
keywords:'tool Uize.Widgets.SimpleStatsTable.Widget Uize.Widgets.SimpleStatsTable.Sortable.Widget',
description:'View detailed info for any module, including a full dependency visualization.',
imageSrc:''
},
{
path:'examples/dialog.html',
title:'Dialog',
keywords:'Uize.Widgets.Dialog.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/marquee-modes.html',
title:'Different Marquee Modes',
keywords:'touch ipad Uize.Widget.Resizer.Marquee',
description:'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.',
imageSrc:''
},
{
path:'examples/digital-clock.html',
title:'Digital Clock',
keywords:'widget Uize.Widgets.DigitalClock.Hms.Widget Uize.Widgets.SegmentDisplay.Seven.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/domain-list-editor.html',
title:'Domain List Editor',
keywords:'widget form Uize.Widget.ListEditor',
description:'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.',
imageSrc:''
},
{
path:'examples/drag-to-move.html',
title:'Drag-to-move',
keywords:'drag-and-drop touch ipad Uize.Widget.Drag.Move',
description:'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.',
imageSrc:''
},
{
path:'examples/image-port-drag.html',
title:'Draggable Image Port',
keywords:'touch ipad Uize.Widget.ImagePort.Draggable',
description:'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.',
imageSrc:''
},
{
path:'examples/collection-dynamic.html',
title:'Dynamic Collection',
keywords:'featured drag-and-drop ipad touch widget Uize.Widget.Collection.Dynamic',
description:'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.',
imageSrc:''
},
{
path:'examples/options-dynamic.html',
title:'Dynamic Options',
keywords:'widget Uize.Widget.Options Uize.Template',
description:'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.',
imageSrc:''
},
{
path:'examples/edge-virtual-dom-events.html',
title:'Edge Virtual DOM Events',
keywords:'Uize.Dom.VirtualEvent Uize.Dom.VirtualEvents.Edge',
description:'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.',
imageSrc:''
},
{
path:'examples/fade-as-a-color-chart.html',
title:'Fade As a Color Chart',
keywords:'color Uize.Color Uize.Fade',
description:'See how acceleration and deceleration affect fades in this visual representation using color gradients, where fades are blending between two colors.',
imageSrc:''
},
{
path:'examples/fade-as-a-graph.html',
title:'Fade As a Graph',
keywords:'Uize.Fade',
description:'Visualize how different acceleration / deceleration curves affect a fade with this graphical representation using bar widgets.',
imageSrc:''
},
{
path:'examples/fade-css-style-across-nodes.html',
title:'Fade CSS Style Across Nodes',
keywords:'color menu Uize.Curve Uize.Fx.xShadows',
description:'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.',
imageSrc:''
},
{
path:'examples/fade-quantization-chart.html',
title:'Fade Quantization Chart',
keywords:'color Uize.Fade',
description:'See how different values for the quantization property affect a fade with this visualization using color gradients for different quantization values.',
imageSrc:''
},
{
path:'examples/fading-links.html',
title:'Fading Links',
keywords:'animation widget Uize.Widget.HoverFader',
description:'Elegant menu animation effects to liven up any dull Web page! This JavaScript example shows you what is possible with the UIZE JavaScript Framework.',
imageSrc:''
},
{
path:'examples/fading-an-object.html',
title:'Fading an Object',
keywords:'color animation Uize.Fade',
description:'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.',
imageSrc:''
},
{
path:'examples/auto-tooltip-generic.html',
title:'Generic Auto Tooltip',
keywords:'Uize.Widget.AutoTooltip',
description:'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.',
imageSrc:''
},
{
path:'examples/get-tree-from-list.html',
title:'Get Tree from List',
keywords:'Uize.Dom.Tree',
description:'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.',
imageSrc:''
},
{
path:'examples/get-tree-from-page.html',
title:'Get Tree from Page',
keywords:'Uize.Dom.Tree',
description:'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.',
imageSrc:''
},
{
path:'examples/html-entities-table.html',
title:'HTML Entities Table',
keywords:'Uize.Widget.TableSort Uize.Util.Html.Entities Uize.Util.Html.EntityInfo',
description:'See all the HTML entities in a sortable table.',
imageSrc:''
},
{
path:'examples/hierarchical-selector.html',
title:'Hierarchical Selector',
keywords:'form Uize.Widget.Tree.Select',
description:'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.',
imageSrc:''
},
{
path:'examples/hover-fader-color-effects.html',
title:'Hover Fader Color Effects',
keywords:'featured color animation menu Uize.Widget.HoverFader',
description:'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.',
imageSrc:''
},
{
path:'examples/hover-fader-stretching-menu.html',
title:'Hover Fader Stretching Menu',
keywords:'animation widget menu Uize.Widget.HoverFader',
description:'Stretch the limits of what can be done with animated menus. Using JavaScript to animate CSS style properties can produce amazingly slick effects!',
imageSrc:''
},
{
path:'examples/hover-fader-text-shadow-animation.html',
title:'Hover Fader Text Shadow Animation',
keywords:'featured color animation menu Uize.Widget.HoverFader',
description:'Animate the color, horizontal offset, vertical offset, and blur radius properties for any number of CSS3 text shadows to produce amazing menu effects.',
imageSrc:''
},
{
path:'examples/hover-fader-for-thumbnails.html',
title:'Hover Fader for Thumbnails',
keywords:'featured animation widget Uize.Widget.HoverFader',
description:'See how to liven up image thumbnails with some cool JavaScript animation! Diverse effects can be achieved by animating different CSS style properties.',
imageSrc:''
},
{
path:'examples/swap-image-cycle.html',
title:'Image Cycle',
keywords:'animation Uize.Widget.Swap.Image.Cycle Uize.Widget.Swap.Themes',
description:'Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect.',
imageSrc:''
},
{
path:'examples/image-port-with-marquee.html',
title:'Image Port Inside a Marquee',
keywords:'touch ipad Uize.Widget.ImagePort Uize.Widget.Resizer.Marquee',
description:'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.',
imageSrc:''
},
{
path:'examples/json-prettifier.html',
title:'JSON Prettifier',
keywords:'tool featured Uize.Widgets.Tools.JsonSerializer.Widget Uize.Json',
description:'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.',
imageSrc:''
},
{
path:'examples/javascript-calculator-widget.html',
title:'JavaScript Calculator Widget',
keywords:'widget Uize.Widget.Calculator',
description:'The calculator widget gives you all the functions you\'d expect: division, multiplication, addition, subtraction, square root, memory, and percent.',
imageSrc:''
},
{
path:'examples/javascript-scruncher.html',
title:'JavaScript Scruncher',
keywords:'tool Uize.Build.Scruncher',
description:'Take bloated JavaScript source code and scrunch (minify, compress) it using this versatile tool. Drastically reduce its size and even obfuscate it!',
imageSrc:''
},
{
path:'examples/javascript-template-tester.html',
title:'JavaScript Template Tester',
keywords:'tool Uize.Template',
description:'Experiment with JavaScript templates and see how they can be used to generate HTML. See them compiled to JavaScript functions, and JavaScript modules.',
imageSrc:''
},
{
path:'examples/templates-list.html',
title:'List Template',
keywords:'Uize.Templates.List',
description:'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.',
imageSrc:''
},
{
path:'examples/mag-view.html',
title:'Mag View',
keywords:'featured widget zoom Uize.Widget.MagView',
description:'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.',
imageSrc:''
},
{
path:'examples/slideshow-mantle.html',
title:'Mantle Slideshow',
keywords:'animation slideshow Uize.Widget.SlideShow Uize.Widget.SlideShow.AutoAdvance Uize.Widget.SlideShow.AutoAdvance.WithSlideSelectors',
description:'.',
imageSrc:''
},
{
path:'examples/marquee-with-rest-update.html',
title:'Marquee With Rest Update',
keywords:'Uize.Widget.Resizer.Marquee',
description:'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.',
imageSrc:''
},
{
path:'examples/marquee-and-image-port.html',
title:'Marquee and Image Port',
keywords:'featured drag-and-drop touch ipad widget zoom Uize.Widget.Resizer.Marquee Uize.Widget.ImagePort.Draggable',
description:'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.',
imageSrc:''
},
{
path:'examples/multiline-string-serializer.html',
title:'Multi-line String Serializer',
keywords:'tool Uize.Json.MultiLineStringLiteral Uize.Widgets.Tools.MultiLineStringSerializer.Widget',
description:'Take multi-line strings and serialize them to multi-line JavaScript string literal expressions using string concatenation.',
imageSrc:''
},
{
path:'examples/sliders-from-template.html',
title:'Multiple Sliders From a Template',
keywords:'touch ipad Uize.Widget.Bar.Slider',
description:'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.',
imageSrc:''
},
{
path:'examples/options.html',
title:'Options',
keywords:'Uize.Widget.Options',
description:'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.',
imageSrc:''
},
{
path:'examples/populating-photo-details.html',
title:'Populating Photo Details',
keywords:'Uize.Widget.Population',
description:'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.',
imageSrc:''
},
{
path:'examples/pseudo-localizer.html',
title:'Pseudo-localizer',
keywords:'tool Uize.Loc.Pseudo Uize.Widgets.Tools.PseudoLocalizer',
description:'Experiment with the technique of pseudo-localization.',
imageSrc:''
},
{
path:'examples/dialog-resizable.html',
title:'Resizable Dialog',
keywords:'featured drag-and-drop widget Uize.Widgets.Dialog.Widget',
description:'See an example of a draggable and resizable modal JavaScript dialog that uses inline HTML (rather than a blockable popup window) and is configurable.',
imageSrc:''
},
{
path:'examples/scrolly.html',
title:'Scrolly',
keywords:'featured animation Uize.Widget.Scrolly',
description:'See the scrolly widget in action, as it scrolls two sets of thumbnails - horizontal and vertical - with an accompanying JavaScript animation effect.',
imageSrc:''
},
{
path:'examples/scrolly-carousel.html',
title:'Scrolly Carousel',
keywords:'featured animation widget Uize.Widget.Scrolly',
description:'See the scrolly widget being used to create a scrollable carousel, where scrolling through the pages is accompanied by a JavaScript animation effect.',
imageSrc:''
},
{
path:'examples/sequenced-show.html',
title:'Sequenced Show',
keywords:'animation Uize.Array.Order Uize.Widget.ThumbZoom',
description:'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.',
imageSrc:''
},
{
path:'examples/sequenced-show-using-swap.html',
title:'Sequenced Show Using Swap',
keywords:'featured animation Uize.Array.Order Uize.Widget.Swap Uize.Widget.ThumbZoom',
description:'See how thumbnails in a grid of thumbnails can be revealed in a choreographed manner, with a JavaScript animation effect for revealing each thumbnail.',
imageSrc:''
},
{
path:'examples/seven-segment-display.html',
title:'Seven Segment Display',
keywords:'widget animation Uize.Widgets.SegmentDisplay.Seven.Widget Uize.Fade.Factory',
description:'See an interactive demonstration of a seven segment display widget, much like the classic LED / LCD digit displays on calculators and digital watches.',
imageSrc:''
},
{
path:'examples/shared-ui.html',
title:'Shared UI',
keywords:'Uize.Widget',
description:'See how some widget HTML for a slider widget can be shared by multiple slider widget instances. The UIZE JavaScript Framework makes this possible.',
imageSrc:''
},
{
path:'examples/simple-data-tester.html',
title:'Simple Data Tester',
keywords:'tool Uize.Data.Simple',
description:'Experiment with SimpleData - an indentation-based format for representing structured data. Convert data formatted as SimpleData to the JSON format.',
imageSrc:''
},
{
path:'examples/simple-doc-tester.html',
title:'SimpleDoc Tester',
keywords:'tool Uize.Doc.Simple',
description:'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.',
imageSrc:''
},
{
path:'examples/slider-plus.html',
title:'Slider Plus Buttons',
keywords:'widget Uize.Widget.Bar.Slider.Plus',
description:'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.',
imageSrc:''
},
{
path:'examples/sliders-as-rgb-selectors.html',
title:'Sliders as RGB Selectors',
keywords:'color widget Uize.Color Uize.Widgets.Slider.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/sliders-in-color-blender.html',
title:'Sliders in a Color Blender',
keywords:'featured drag-and-drop touch ipad color Uize.Color Uize.Widgets.Slider.Widget Uize.Widgets.Slider.Gradient.Widget Uize.Widgets.Bar.FullEmpty.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/slideshow.html',
title:'Slideshow',
keywords:'slideshow Uize.Widget.SlideShow',
description:'See an example of a barebones JavaScript slideshow widget, with navigation buttons, basic display of image, title, slide number, and total slides.',
imageSrc:''
},
{
path:'examples/slideshow-with-dissolve.html',
title:'Slideshow With Dissolve',
keywords:'animation slideshow Uize.Widget.SlideShow Uize.Widget.Bar',
description:'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.',
imageSrc:''
},
{
path:'examples/slideshow-with-wipes.html',
title:'Slideshow With Wipes',
keywords:'featured animation widget slideshow Uize.Widget.ImageWipe Uize.Widget.ImageWipe.Themes Uize.Widget.SlideShow',
description:'See an example of a JavaScript slideshow widget with stunning image wipe animation effects that you didn\'t believe were possible with just JavaScript.',
imageSrc:''
},
{
path:'examples/slideshow-of-data.html',
title:'Slideshow of Data',
keywords:'featured animation slideshow Uize.Widget.Bar Uize.Widget.Swap.Image Uize.Widget.SlideShow',
description:'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.',
imageSrc:''
},
{
path:'examples/sortable-color-table.html',
title:'Sortable Color Table',
keywords:'featured color Uize.Color.xSvgColors Uize.Widget.TableSort',
description:'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.',
imageSrc:''
},
{
path:'examples/population-structured-record.html',
title:'Structured Record Population',
keywords:'Uize.Widget.Population',
description:'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.',
imageSrc:''
},
{
path:'examples/tabbed-interface.html',
title:'Tabbed Interface',
keywords:'Uize.Widget.Options.Tabbed',
description:'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.',
imageSrc:''
},
{
path:'examples/tabbed-interface-with-fade.html',
title:'Tabbed Interface With Fade',
keywords:'featured animation widget Uize.Widget.Options.Tabbed.Fading',
description:'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.',
imageSrc:''
},
{
path:'examples/slider-built-in-skin.html',
title:'The Built-in Slider Skin',
keywords:'Uize.Widgets.Slider.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/set-node-value.html',
title:'The setNodeValue Method',
keywords:'form Uize.Widget',
description:'See a demo of the setNodeValue method, which can set a value on select boxes, checkboxes, radio buttons, text inputs, textareas, divs, spans...',
imageSrc:''
},
{
path:'examples/image-port-zoom-and-pan-tiled.html',
title:'Tiled Zoom and Pan',
keywords:'Uize.Widget.ImagePort.Draggable',
description:'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.',
imageSrc:''
},
{
path:'examples/transferring-state.html',
title:'Transferring State',
keywords:'touch ipad Uize.Class Uize.Widget.Resizer.Marquee Uize.Util.Coupler',
description:'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.',
imageSrc:''
},
{
path:'examples/tree-list.html',
title:'Tree List From JSON',
keywords:'featured widget menu Uize.Widgets.NavTree.List.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/tree-menu.html',
title:'Tree Menu From JSON',
keywords:'featured widget menu Uize.Widgets.NavTree.Menu.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/two-hierarchical-selectors.html',
title:'Two Hierarchical Selectors',
keywords:'form Uize.Widget.Tree.Select',
description:'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.',
imageSrc:''
},
{
path:'examples/uize-unit-tests.html',
title:'UIZE Unit Tests',
keywords:'Uize.Test Uize.Widgets.Log.Widget UizeSite.Widgets.UnitTests.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/button-toggle.html',
title:'Uize.Widget.Button.Toggle',
keywords:'Uize.Widget.Button.Toggle',
description:'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.',
imageSrc:''
},
{
path:'examples/image-wipe.html',
title:'Uize.Widget.ImageWipe',
keywords:'featured animation Uize.Widget.ImageWipe Uize.Widget.ImageWipe.Themes',
description:'See stunning image wipe animation effects you didn\'t believe possible with JavaScript. Choose from dozens of themes. Tweak values to make your own.',
imageSrc:''
},
{
path:'examples/swap-image.html',
title:'Uize.Widget.Swap.Image',
keywords:'animation widget Uize.Widget.Swap.Image Uize.Widget.Swap.Themes',
description:'See some amazing possibilities for image transitions using lightweight JavaScript animation. Play with lots of effect themes, and even make your own.',
imageSrc:''
},
{
path:'examples/thumbzoom.html',
title:'Uize.Widget.ThumbZoom',
keywords:'animation widget zoom Uize.Widget.ThumbZoom',
description:'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.',
imageSrc:''
},
{
path:'examples/virtual-dom-events.html',
title:'Virtual DOM Events',
keywords:'Uize.Dom.VirtualEvent Uize.Dom.VirtualEvents.Remain Uize.Dom.VirtualEvent.ModClick',
description:'A demonstration of various virtual DOM events, such as mouseRest, mouseRemainOver, mouseRemainDown, remainFocused, ctrlClick, shiftClick, and more.',
imageSrc:''
},
{
path:'examples/widget-visual-samplers.html',
title:'Widget Visual Samplers',
keywords:'widget Uize.Widgets.VisualSampler.Widget',
description:'See the visual samplers for one or more widget classes that implement visual samplers. Use this page to visually browse and discover available widgets.',
imageSrc:''
},
{
path:'examples/widget-visual-tests.html',
title:'Widget Visual Tests',
keywords:'widget Uize.Widgets.VisualTests.Widget Uize.Widgets.VisualTests.TestCase.Widget',
description:'See the visual tests for any widget that implements visual tests. Use this page to test a widget while you\'re developing it.',
imageSrc:''
},
{
path:'examples/image-port-zoom-and-pan.html',
title:'Zoom and Pan',
keywords:'widget zoom Uize.Widget.ImagePort.Draggable',
description:'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.',
imageSrc:''
},
{
path:'examples/collection-item-zooming-with-image-switching.html',
title:'Zooming Collection Item with Image Switching',
keywords:'animation widget zoom Uize.Widget.CollectionItem.Zooming',
description:'See how the zooming collection item widget is used in combination with an image selector strip to provide an interface for previewing multiple images.',
imageSrc:''
},
{
path:'examples/collection-item-zooming.html',
title:'Zooming Collection Items',
keywords:'featured animation widget zoom Uize.Widget.CollectionItem.Zooming',
description:'Experience the zooming collection item widget. It gives you a lightweight and intuitive preview behavior, with a JavaScript animation zoom-in effect.',
imageSrc:''
},
{
path:'examples/enabled-busy-in-widget-tree.html',
title:'enabled/busy in Widget Tree',
keywords:'Uize.Widget',
description:'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.',
imageSrc:''
},
{
path:'examples/set-node-value-multi-select.html',
title:'setNodeValue on Multi-select',
keywords:'form Uize.Widget',
description:'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.',
imageSrc:''
}
];
};
}
});