/
6-form-container.html
62 lines (50 loc) · 1.94 KB
/
6-form-container.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
<html>
<head>
<title>Form Container test</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.5.1/build/cssreset/reset-min.css&3.5.1/build/cssfonts/fonts-min.css">
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui.js"></script>
<script type="text/javascript" src="../lib/inputex/src/loader.js"></script>
<script type="text/javascript" src="../src/loader.js"></script>
</head>
<body>
<div style="position: relative;" id="layer"></div>
<script>
YUI_config.groups.wireit.base = '../src/';
YUI_config.groups.inputex.base = '../lib/inputex/src/';
YUI({combine: false, filter: 'raw'}).use('bezier-wire', 'form-container', 'inputex-group', 'inputex-email', 'inputex-select', 'inputex-checkbox', 'inputex-radio', 'inputex-list', 'inputex-url', 'json', function(Y) {
window.Y = Y;
var layerEl = Y.one('#layer');
var mygraphic = new Y.Graphic({render: "#layer"});
c1 = new Y.FormContainer({
children: [
{
align: {points:["tl", "tc"]},
dir: [0,-1],
groups: ['string'],
graphic: mygraphic
},
{
align: {points:["tl", "bc"]}, dir: [0, 1],
groups: ['object'],
graphic: mygraphic
}
],
render: layerEl,
xy: [200,100],
headerContent: 'Awesome Module',
footerContent: 'not executed',
fields: [
{type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }]},
{label: 'Firstname', name: 'firstname', required: true},
{label: 'Lastname', name: 'lastname', value:'Dupont'},
{type:'email', label: 'Email', name: 'email', required: true, showMsg: true},
{type:'radio', label: 'Happy to be there ?', name: 'happy', display:'vertically', choices:[{value: "y", label:"yes"}, {value:"n", label:"no"}]},
{type:'boolean', label: 'Favorite colors ?', name: 'yellow', rightLabel:"yellow"},
{type:'boolean', label: ' ', name: 'blue', rightLabel:"blue"},
{type:'boolean', label: ' ', name: 'red', rightLabel:"red"}
]
});
});
</script>
</body>
</html>