Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 120 lines (102 sloc) 4.172 kb
51ddba5 @knipknap make form element names more consistent.
authored
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
8449fe6 @knipknap add form.html and admin.html
authored
6 <title>Form Editor - SpiffForm Demo</title>
51ddba5 @knipknap make form element names more consistent.
authored
7 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
8 <link rel="stylesheet" href="spiffform/res/spiffform.css" />
9 <link rel="stylesheet" href="default.css" />
10 <link rel="stylesheet" type="text/css"
11 href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"/>
12 </head>
13
14 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
1d27c73 @delijati add: added i18n
delijati authored
15 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
16 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/i18n/jquery.i18n.min.js" type="text/javascript"></script>
51ddba5 @knipknap make form element names more consistent.
authored
17 <script src="spiffform/spiffform.js" type="text/javascript"></script>
1d27c73 @delijati add: added i18n
delijati authored
18 <script src="spiffform/spiffform-de.js" type="text/javascript"></script>
8449fe6 @knipknap add form.html and admin.html
authored
19 <script src="form.js" type="text/javascript"></script>
51ddba5 @knipknap make form element names more consistent.
authored
20 <script type="text/javascript">
21 $(document).ready(function() {
8449fe6 @knipknap add form.html and admin.html
authored
22 var form = attach_form($('#form'));
f154281 @knipknap split .attach_panel() out of .make_editable().
authored
23 var panel = new SpiffFormPanel($('#panel'));
24 form.attach_panel(panel);
8449fe6 @knipknap add form.html and admin.html
authored
25 form.make_editable();
f154281 @knipknap split .attach_panel() out of .make_editable().
authored
26
8449fe6 @knipknap add form.html and admin.html
authored
27 // select a form item to make the preferences visible.
28 form.select($('#form').find('.spiffform-item:nth(3)').data('obj'));
51ddba5 @knipknap make form element names more consistent.
authored
29
8449fe6 @knipknap add form.html and admin.html
authored
30 $('#sidebar-elements').slideDown("slow");
51ddba5 @knipknap make form element names more consistent.
authored
31
1cc7567 @knipknap allow for leaving edit mode.
authored
32 $(".ui-elements li").each(function() {
33 $(this).draggable({
34 "helper": function() {
35 return $(this).clone();
36 },
ed78304 @knipknap fix: demo would no longer work.
authored
37 // "cursorAt" is important: make sure that the cursor is beneath
38 // (=not on top of) the dragged element, else "form.insert_at()"
39 // might not find the right target position for the new element.
40 "cursorAt": {'right': -5},
1cc7567 @knipknap allow for leaving edit mode.
authored
41 "stop": function(event, ui) {
42 var cls = spiffform_elements[$(this).attr('name')];
43 var obj = form.insert_at(event, new cls());
ed78304 @knipknap fix: demo would no longer work.
authored
44 if (obj)
45 form.select(obj);
1cc7567 @knipknap allow for leaving edit mode.
authored
46 }
51ddba5 @knipknap make form element names more consistent.
authored
47 });
48 });
8449fe6 @knipknap add form.html and admin.html
authored
49
1cc7567 @knipknap allow for leaving edit mode.
authored
50 $('#editable').click(function() {
51 if ($(this).is(':checked')) {
52 $('#sidebar-elements').slideDown("slow");
53 form.make_editable();
54 }
55 else {
56 $('#sidebar-elements').slideUp("slow");
57 form.make_editable(false);
58 }
59 });
8449fe6 @knipknap add form.html and admin.html
authored
60
dd4c161 @knipknap forms can now be serialized.
authored
61 $('#serialize').click(function() {
62 alert(form.serialize(SpiffFormJSONSerializer));
63 });
8449fe6 @knipknap add form.html and admin.html
authored
64
360fac0 @knipknap add deserialization support.
authored
65 $('#serialize-deserialize').click(function() {
66 form.deserialize(SpiffFormJSONSerializer, form.serialize(SpiffFormJSONSerializer));
67 });
51ddba5 @knipknap make form element names more consistent.
authored
68 });
69 </script>
70
71 <body>
72
8449fe6 @knipknap add form.html and admin.html
authored
73 <div id="header"><h1>Form Editor - SpiffForm Demo</h1></div>
51ddba5 @knipknap make form element names more consistent.
authored
74 <div id="wrap">
75 <div id="center">
0edd334 @knipknap SpiffForm automatically adds spiffform css class.
authored
76 <div id="form">
51ddba5 @knipknap make form element names more consistent.
authored
77 </div>
78 </div>
79
80 <div id="sidebar">
81 <div id="panel" class="spiffform-panel"></div>
82
83 <div id="sidebar-elements">
2ebfb52 @knipknap add SpiffFormNameField
authored
84 <h3>Standard Fields</h3>
85 <ul class="ui-elements">
86 <li id="ui-name" name="namefield">Firstname and Lastname</li>
87 </ul>
88
51ddba5 @knipknap make form element names more consistent.
authored
89 <h3>Text Input</h3>
90 <ul class="ui-elements">
91 <li id="ui-entry" name="entryfield">Text Field (single line)</li>
92 <li id="ui-text" name="textarea">Text Area (multi line)</li>
93 </ul>
94
95 <!-- h3>Buttons</h3>
96 <ul class="ui-elements">
97 <li id="ui-button" name="button">Submit Form</li>
98 </ul -->
99
100 <h3>Other Elements</h3>
101 <ul class="ui-elements">
102 <li id="ui-checkbox" name="checkbox">Checkbox</li>
103 <li id="ui-calendar" name="datepicker">Date Picker</li>
104 <li id="ui-combo" name="dropdownlist">Dropdown List</li>
4f48218 @delijati add: added radio button
delijati authored
105 <li id="ui-radio" name="radiolist">Radio List</li>
ef8ecfb @knipknap by making the title, subtitle and separator into SpiffFormElements, we g...
authored
106 <li id="ui-separator" name="separator">Separator</li>
51ddba5 @knipknap make form element names more consistent.
authored
107 </ul>
108 </div>
dd4c161 @knipknap forms can now be serialized.
authored
109
1cc7567 @knipknap allow for leaving edit mode.
authored
110 <div id="buttons">
8449fe6 @knipknap add form.html and admin.html
authored
111 <label><input type="checkbox" id="editable" checked="checked"/>Editable form</label>
1cc7567 @knipknap allow for leaving edit mode.
authored
112 <input type="button" id="serialize" value="Serialize"/>
113 <input type="button" id="serialize-deserialize" value="Serialize / Deserialize"/>
114 </div>
51ddba5 @knipknap make form element names more consistent.
authored
115 </div>
116 </div>
117
118 </body>
119 </html>
Something went wrong with that request. Please try again.