forked from UIZE/UIZE-JavaScript-Framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-widget-examples.html
200 lines (185 loc) · 13.2 KB
/
javascript-widget-examples.html
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
<!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 Widget 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 35 JavaScript widget 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 Widget Examples
</h1>
<div class="main">
<div class="preamble">
The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 35 JavaScript widget 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=widget" 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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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-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/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/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/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/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/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/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/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>