forked from ValYouW/jqPropertyGrid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex3-iframe.html
198 lines (184 loc) · 8.47 KB
/
index3-iframe.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>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jqPropertyGrid Example</title>
<!-- https://getbootstrap.com/docs/3.3/getting-started/ -->
<!-- bootstrap - is used for example navbar _AND_ validation of grid/forms itself -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- vendor css for different control types & validator-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css" type="text/css" />
<!-- toast - is used for form processing messages (not part of grid itself) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css" />
<!-- lib css -->
<link rel='stylesheet' href='./dist/jqPropertyGrid.css' />
<!-- overrides and styles for just this page -->
<style>
.pgTable {
width: 100%;
}
.pgGroupCell {
padding: 2px;
}
.pgCell {
padding: 2px;
}
.pgContainer {
margin-bottom: 26px;
}
.formNavbar {
overflow: hidden;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
position: fixed;
bottom: 0;
padding: 2px 6px;
width: 100%;
}
.jq-toast-wrap {
width: 227px;
}
</style>
<!-- vendor js for different control types & validator-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/autoNumeric.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<!-- toast - is used for form processing messages (not part of grid itself) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>
<!-- lib js -->
<script src="./dist/jqPropertyGrid.js"></script>
<script>
$(function() {
// This is our data structure
var dataStructure = {
font: 'Consolas',
maskedNumber: 22,
maskedDate: '',
maskedDate2: '',
maskedDollar: '1.22',
autoNumber: 22,
autoDollar: '1.22',
vNumber: 22,
vDollar: '1.22',
vDate: '',
v17Alpha: '',
vRouting: ''
};
// This is our meta object / form design
// see more validation options @ http://www.formvalidator.net/#default-validators
var requiredAlphanumeric = { rules: 'required alphanumeric', error_msg: 'Required Alphanumeric and extra long to see display in iframe!'};
var requiredNumeric = { rules: 'required number', error_msg: 'Required Number!'};
var requiredDollar = { rules: 'required number', allowing: 'float', ignore: '$,', error_msg: 'Required Dollar Amt!'};
var requiredDollarNoIgnore = { rules: 'required number', allowing: 'float', error_msg: 'Required Dollar Amt!'};
var required = { rules: 'required', error_msg: 'Required!'};
var requiredDate = { rules: 'required date', error_msg: 'mm/dd/yyyy required!', format: 'mm/dd/yyyy'};
var validate17alpha = { rules: 'custom', error_msg: 'upto 17 upper alphanumeric', regexp: '^[a-zA-Z0-9]{0,17}$', sanitize: 'trim upper'};
var validateRouting = { rules: 'custom', help: 'please enter 9 digits', error_msg: 'exactly 9 digits', regexp: '^(\\d{9})?$'};
var formDesignSettings = {
font: { group: 'Editor', name: 'Font', description: 'The font editor to use', validation: requiredAlphanumeric },
fontSize: { group: 'Editor', name: 'Font size', type: 'number', options: { min: 0, max: 20, step: 2 }, validation: requiredNumeric },
// see more options @ https://github.com/digitalBush/jquery.maskedinput
maskedNumber: {name: 'Number', group: 'Masks', type: 'mask', options: {mask: '999'}, validation: requiredNumeric },
maskedDate: {name: 'Date', group: 'Masks', type: 'mask', options: {mask: '99/99/9999'}, validation: requiredDate },
maskedDate2: {name: 'Date2', group: 'Masks', type: 'mask', options: {mask: '99/99/9999', placeholder:'mm/dd/yyyy'}, validation: requiredDate },
maskedDollar: {name: 'Dollar', group: 'Masks', type: 'mask', options: {mask: '$9.99'}, validation: requiredDollar },
// see more options @ https://github.com/autoNumeric/autoNumeric
autoNumber: {name: 'Number', group: 'AutoNumeric', type: 'autonumeric', options: { decimalPlaces: '0', minimumValue: 0, maximumValue: 1000 }, validation: requiredNumeric },
autoDollar: {name: 'Dollar', group: 'AutoNumeric', type: 'autonumeric', options: { currencySymbol : '$' }, validation: requiredDollar },
// plain inputs w/ just validation
vDate: {name: 'Date', group: 'Validation Only', type: 'input', validation: requiredDate },
vNumber: {name: 'Number', group: 'Validation Only', type: 'input', validation: requiredNumeric },
vDollar: {name: 'Dollar', group: 'Validation Only', type: 'input', validation: requiredDollarNoIgnore },
v17Alpha: {name: 'Regex1', group: 'Validation Only', type: 'input', validation: validate17alpha },
vRouting: {name: 'Regex2', group: 'Validation Only', type: 'input', validation: validateRouting }
};
// Lets create the grid for it
function initPropertyGrid(data) {
$('#propGrid').jqPropertyGrid(data, {
useFontAwesome: true,
meta: formDesignSettings
});
if (typeof $.fn.validate === 'function') {
$.validate({
modules : 'sanitize',
form: '#propForm',
onError : function($form) {
$.toast({
heading: 'Error',
text: 'Please fix all form errors before saving',
showHideTransition: 'fade',
position: { left : 5, right : 'auto', top : 5, bottom : 'auto' },
hideAfter: false,
stack: false,
icon: 'error'
});
$(".has-error:first input").focus();
},
onSuccess : function($form) {
$.toast({
heading: 'Success',
text: 'Form has been saved',
showHideTransition: 'fade',
position: { left : 5, right : 'auto', top : 5, bottom : 'auto' },
hideAfter: false,
stack: false,
icon: 'success'
});
return false; // Will stop the browser submission of the form
},
});
}
// fix INPUTs hidden under fixed footer (auto scroll if focused element is hidden)
$('input').focus(function () {
var footerHeight = 26 + 26 + 2; //footerHeight = footer height + element height + buffer
var element = $(this);
if (element.offset().top - ($(window).scrollTop()) > ($(window).height() - footerHeight)) {
$('html, body').animate({
scrollTop: element.offset().top - ($(window).height() - footerHeight)
}, 500);
}
});
}
// data
function getFormValues() {
var json = JSON.stringify($('#propGrid').jqPropertyGrid('get'), null, ' ');
return json;
}
function resetClicked() {
// $.toast().reset('all');
$.toast({
heading: 'Info',
text: 'Form has been reset',
showHideTransition: 'fade',
position: { left : 5, right : 'auto', top : 5, bottom : 'auto' },
hideAfter: false,
stack: false,
icon: 'info'
});
}
initPropertyGrid(dataStructure);
$('#btnReset').click(resetClicked);
getFormValues();
});
</script>
</head>
<body>
<form id="propForm" action="#" style="width: 100%;">
<div id="propGrid" class="pgContainer" style="width: 100%;">
</div>
<div class="formNavbar">
<div style="float:right;">
<button type="reset" id="btnReset" class="btn btn-xs btn-default">Reset Form</button>
<button type="submit" id="btnSubmit" class="btn btn-xs btn-primary">Save Changes</button>
</div>
</div>
</form>
</body>
</html>