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