forked from UIZE/UIZE-JavaScript-Framework
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript-examples.html
More file actions
496 lines (481 loc) · 36.5 KB
/
javascript-examples.html
File metadata and controls
496 lines (481 loc) · 36.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="UIZE JavaScript Framework"/>
<meta name="description" content="The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists all 109 JavaScript examples."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="css/page.css"/>
<link rel="stylesheet" href="css/page.simpledoc.css"/>
<link rel="stylesheet" href="css/page.index.css"/>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="index.html" title="UIZE JavaScript Framework home"></a>
JavaScript Examples
</h1>
<div class="main">
<div class="preamble">
The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists all 109 JavaScript examples.
<div class="tourPromo">
<div class="tourPromoHeading">TAKE A STEP-BY-STEP TOUR...</div>
<div class="tourPromoText">
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 gigantic arrows that will appear on either side of the example pages to navigate from one page to the next (or back). You can also use the "thermometer" bar, that will appear right underneath the title bar of the example pages, to navigate to other pages in the tour. The highlighted segment of the thermometer shows you where you are in the tour.
</div>
<div>
<a href="javascript-feature-tours.html?tour=all" class="buttonLink">START THE TOUR<span class="arrow"> </span></a>
<br style="line-height:6px;"/>
<br style="clear:right;"/>
</div>
</div>
</div>
<ul id="page-index">
<li>
<div class="itemTitle"><a href="examples/3d-rotation-viewer.html">3D Rotation Viewer</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/animate-position-in-javascript.html">Animate Position in JavaScript</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/animate-size-in-javascript.html">Animate Size in JavaScript</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/animated-buttons-with-box-shadow.html">Animated Buttons with Box Shadow</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/auto-tooltip-photo-info.html">Auto Tooltip for Photo Info</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/bars.html">Bars For Data Comparison</a><span class="arrow"> </span></div>
<div class="itemBody">See an example that uses bar widgets to create a dynamic bar chart to compare nutritional data for fruits, with slick JavaScript animation effects.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/bevel.html">Basic Bevel</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-cube.html">Basic Color Cube</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/swap-html.html">Basic HTML Swap</a><span class="arrow"> </span></div>
<div class="itemBody">See a demo of the HTML swapper widget, which provides a JavaScript animation transition effect when swapping out the HTML that the widget displays.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-port.html">Basic Image Port</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/marquee.html">Basic Marquee</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/mask.html">Basic Mask</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/progress-bar.html">Basic Progress Bar</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slider.html">Basic Slider</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/table-sort-basic.html">Basic Table Sort</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/bevel-on-multiple-images.html">Bevel On Multiple Images</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/button.html">Button</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/button-types.html">Button Types</a><span class="arrow"> </span></div>
<div class="itemBody">See a demonstration of different HTML implementations for the basic button widget. Play with the enabled, busy, and selected states of the buttons.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/calendar.html">Calendar</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/calendar-controls-wikipedia.html">Calendar Controls Wikipedia</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slider-chars-used.html">Characters Used Indicator</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-cube-with-pickers.html">Color Cube With Color Pickers</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-format-converter.html">Color Format Converter</a><span class="arrow"> </span></div>
<div class="itemBody">Easily convert color values from one format to another. Convert between RGB hex, RGB tuple string, HSL, HSV, CMYK, and SVG color names.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-gradient-tool.html">Color Gradient Tool</a><span class="arrow"> </span></div>
<div class="itemBody">Explore a wide variety of color gradients - from basic gradients to intricate patterns. Tweak presets or build your own. Use gradients to pick colors.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-picker.html">Color Picker</a><span class="arrow"> </span></div>
<div class="itemBody">See how three RGB color picker widgets - with sliders for red, green, and blue - can be used to tweak text color, background color, and border color.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-pickers-with-gradient.html">Color Pickers With Gradient</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-sort-by-rgb-proximity.html">Color Sort by RGB Proximity</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/table-sort-complex.html">Complex Table Sort</a><span class="arrow"> </span></div>
<div class="itemBody">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!</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-item-coupled-zooming.html">Coupled Zooming Collection Items</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/curve-explorer.html">Curve Explorer</a><span class="arrow"> </span></div>
<div class="itemBody">Add pizazz to JavaScript animations - bounce, easing, elasticity, and more. Visualize and experiment with preset curve functions. Or create your own!</div>
</li>
<li>
<div class="itemTitle"><a href="examples/date-picker.html">Date Picker</a><span class="arrow"> </span></div>
<div class="itemBody">The date picker widget lets users pick dates within configured date ranges, inside a shared date picker dialog. Many configurations are demonstrated.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/swap-deck.html">Deck Swapper</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/decorated-confirm.html">Decorated Confirm Dialog</a><span class="arrow"> </span></div>
<div class="itemBody">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!</div>
</li>
<li>
<div class="itemTitle"><a href="examples/dialog.html">Dialog</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/marquee-modes.html">Different Marquee Modes</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/digital-clock.html">Digital Clock</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/domain-list-editor.html">Domain List Editor</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/drag-to-move.html">Drag-to-move</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-port-drag.html">Draggable Image Port</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-dynamic.html">Dynamic Collection</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/options-dynamic.html">Dynamic Options</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/edge-virtual-dom-events.html">Edge Virtual DOM Events</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/enabled-busy-in-widget-tree.html">enabled/busy in Widget Tree</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fade-as-a-color-chart.html">Fade As a Color Chart</a><span class="arrow"> </span></div>
<div class="itemBody">See how acceleration and deceleration affect fades in this visual representation using color gradients, where fades are blending between two colors.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fade-as-a-graph.html">Fade As a Graph</a><span class="arrow"> </span></div>
<div class="itemBody">Visualize how different acceleration / deceleration curves affect a fade with this graphical representation using bar widgets.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fade-css-style-across-nodes.html">Fade CSS Style Across Nodes</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fade-quantization-chart.html">Fade Quantization Chart</a><span class="arrow"> </span></div>
<div class="itemBody">See how different values for the quantization property affect a fade with this visualization using color gradients for different quantization values.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fading-an-object.html">Fading an Object</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fading-links.html">Fading Links</a><span class="arrow"> </span></div>
<div class="itemBody">Elegant menu animation effects to liven up any dull Web page! This JavaScript example shows you what is possible with the UIZE JavaScript Framework.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/auto-tooltip-generic.html">Generic Auto Tooltip</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/get-tree-from-list.html">Get Tree from List</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/get-tree-from-page.html">Get Tree from Page</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hierarchical-selector.html">Hierarchical Selector</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-color-effects.html">Hover Fader Color Effects</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-for-thumbnails.html">Hover Fader for Thumbnails</a><span class="arrow"> </span></div>
<div class="itemBody">See how to liven up image thumbnails with some cool JavaScript animation! Diverse effects can be achieved by animating different CSS style properties.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-stretching-menu.html">Hover Fader Stretching Menu</a><span class="arrow"> </span></div>
<div class="itemBody">Stretch the limits of what can be done with animated menus. Using JavaScript to animate CSS style properties can produce amazingly slick effects!</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-text-shadow-animation.html">Hover Fader Text Shadow Animation</a><span class="arrow"> </span></div>
<div class="itemBody">Animate the color, horizontal offset, vertical offset, and blur radius properties for any number of CSS3 text shadows to produce amazing menu effects.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/swap-image-cycle.html">Image Cycle</a><span class="arrow"> </span></div>
<div class="itemBody">Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-port-with-marquee.html">Image Port Inside a Marquee</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/swap-image-png.html">Image Swap With PNG</a><span class="arrow"> </span></div>
<div class="itemBody">This example demonstrates that the image swap widget can perform transitions with images in the PNG format that have an alpha / transparency channel.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/javascript-calculator-widget.html">JavaScript Calculator Widget</a><span class="arrow"> </span></div>
<div class="itemBody">The calculator widget gives you all the functions you'd expect: division, multiplication, addition, subtraction, square root, memory, and percent.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/javascript-scruncher.html">JavaScript Scruncher</a><span class="arrow"> </span></div>
<div class="itemBody">Take bloated JavaScript source code and scrunch (minify, compress) it using this versatile tool. Drastically reduce its size and even obfuscate it!</div>
</li>
<li>
<div class="itemTitle"><a href="examples/javascript-template-tester.html">JavaScript Template Tester</a><span class="arrow"> </span></div>
<div class="itemBody">Experiment with JavaScript templates and see how they can be used to generate HTML. See them compiled to JavaScript functions, and JavaScript modules.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/json-prettifier.html">JSON Prettifier</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/templates-list.html">List Template</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/mag-view.html">Mag View</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slideshow-mantle.html">Mantle Slideshow</a><span class="arrow"> </span></div>
<div class="itemBody">.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/marquee-and-image-port.html">Marquee and Image Port</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/marquee-with-rest-update.html">Marquee With Rest Update</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sliders-from-template.html">Multiple Sliders From a Template</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/options.html">Options</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/populating-photo-details.html">Populating Photo Details</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/dialog-resizable.html">Resizable Dialog</a><span class="arrow"> </span></div>
<div class="itemBody">See an example of a draggable and resizable modal JavaScript dialog that uses inline HTML (rather than a blockable popup window) and is configurable.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/scrolly.html">Scrolly</a><span class="arrow"> </span></div>
<div class="itemBody">See the scrolly widget in action, as it scrolls two sets of thumbnails - horizontal and vertical - with an accompanying JavaScript animation effect.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/scrolly-carousel.html">Scrolly Carousel</a><span class="arrow"> </span></div>
<div class="itemBody">See the scrolly widget being used to create a scrollable carousel, where scrolling through the pages is accompanied by a JavaScript animation effect.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sequenced-show.html">Sequenced Show</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sequenced-show-using-swap.html">Sequenced Show Using Swap</a><span class="arrow"> </span></div>
<div class="itemBody">See how thumbnails in a grid of thumbnails can be revealed in a choreographed manner, with a JavaScript animation effect for revealing each thumbnail.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/set-node-value-multi-select.html">setNodeValue on Multi-select</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/seven-segment-display.html">Seven Segment Display</a><span class="arrow"> </span></div>
<div class="itemBody">See an interactive demonstration of a seven segment display widget, much like the classic LED / LCD digit displays on calculators and digital watches.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/shared-ui.html">Shared UI</a><span class="arrow"> </span></div>
<div class="itemBody">See how some widget HTML for a slider widget can be shared by multiple slider widget instances. The UIZE JavaScript Framework makes this possible.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/simple-data-tester.html">Simple Data Tester</a><span class="arrow"> </span></div>
<div class="itemBody">Experiment with SimpleData - an indentation-based format for representing structured data. Convert data formatted as SimpleData to the JSON format.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/simple-doc-tester.html">SimpleDoc Tester</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slider-plus.html">Slider Plus Buttons</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sliders-as-rgb-selectors.html">Sliders as RGB Selectors</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sliders-in-color-blender.html">Sliders in a Color Blender</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slideshow.html">Slideshow</a><span class="arrow"> </span></div>
<div class="itemBody">See an example of a barebones JavaScript slideshow widget, with navigation buttons, basic display of image, title, slide number, and total slides.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slideshow-of-data.html">Slideshow of Data</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slideshow-with-dissolve.html">Slideshow With Dissolve</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slideshow-with-wipes.html">Slideshow With Wipes</a><span class="arrow"> </span></div>
<div class="itemBody">See an example of a JavaScript slideshow widget with stunning image wipe animation effects that you didn't believe were possible with just JavaScript.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sortable-color-table.html">Sortable Color Table</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/population-structured-record.html">Structured Record Population</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/tabbed-interface.html">Tabbed Interface</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/tabbed-interface-with-fade.html">Tabbed Interface With Fade</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/slider-built-in-skin.html">The Built-in Slider Skin</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/set-node-value.html">The setNodeValue Method</a><span class="arrow"> </span></div>
<div class="itemBody">See a demo of the setNodeValue method, which can set a value on select boxes, checkboxes, radio buttons, text inputs, textareas, divs, spans...</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-port-zoom-and-pan-tiled.html">Tiled Zoom and Pan</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/transferring-state.html">Transferring State</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/tree-list.html">Tree List From JSON</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/tree-menu.html">Tree Menu From JSON</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/two-hierarchical-selectors.html">Two Hierarchical Selectors</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/uize-unit-tests.html">UIZE Unit Tests</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/button-toggle.html">Uize.Widget.Button.Toggle</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-wipe.html">Uize.Widget.ImageWipe</a><span class="arrow"> </span></div>
<div class="itemBody">See stunning image wipe animation effects you didn't believe possible with JavaScript. Choose from dozens of presets. Tweak values to make your own.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/swap-image.html">Uize.Widget.Swap.Image</a><span class="arrow"> </span></div>
<div class="itemBody">See some amazing possibilities for image transitions using lightweight JavaScript animation. Play with lots of effect presets, and even make your own.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/thumbzoom.html">Uize.Widget.ThumbZoom</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/virtual-dom-events.html">Virtual DOM Events</a><span class="arrow"> </span></div>
<div class="itemBody">A demonstration of various virtual DOM events, such as mouseRest, mouseRemainOver, mouseRemainDown, remainFocused, ctrlClick, shiftClick, and more.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-port-zoom-and-pan.html">Zoom and Pan</a><span class="arrow"> </span></div>
<div class="itemBody">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.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-item-zooming-with-image-switching.html">Zooming Collection Item with Image Switching</a><span class="arrow"> </span></div>
<div class="itemBody">See how the zooming collection item widget is used in combination with an image selector strip to provide an interface for previewing multiple images.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-item-zooming.html">Zooming Collection Items</a><span class="arrow"> </span></div>
<div class="itemBody">Experience the zooming collection item widget. It gives you a lightweight and intuitive preview behavior, with a JavaScript animation zoom-in effect.</div>
</li>
</ul>
</div>
<script type="text/javascript">
Uize.module ({
required:[
'UizeDotCom.Page.Doc.library',
'UizeDotCom.Page.Index'
],
builder:function () {(window.page = new UizeDotCom.Page.Index).wireUi ()}
});
</script>
</body></html>