tracer/x-editable-bs5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new form template

Browse Source
This commit is contained in:
vitalets
2012-11-26 12:43:17 +04:00
parent c6da2ed11b
commit c9f2f31add
4 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/editable-form/editable-form-bootstrap.js
View File

@@ -5,10 +5,13 @@ Editableform based on Twitter Bootstrap
//form template //form template
$.fn.editableform.template = '<form class="form-inline editableform"><div class="control-group">' + $.fn.editableform.template = '<form class="form-inline editableform"><div class="control-group">' +
'&nbsp;<button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i></button>&nbsp;<button type="button" class="btn clearfix"><i class="icon-ban-circle"></i></button>' + '<div class="editable-input"></div><div class="editable-buttons"></div>' +
'<div style="clear:both"><span class="help-block editable-error-block"></span></div>' + '<div class="help-block editable-error-block"></div>' +
'</div></form>'; '</div></form>';
//buttons
$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i></button><button type="button" class="btn clearfix"><i class="icon-ban-circle"></i></button>';
//error classes //error classes
$.fn.editableform.errorGroupClass = 'error'; $.fn.editableform.errorGroupClass = 'error';
$.fn.editableform.errorBlockClass = null; $.fn.editableform.errorBlockClass = null;

13
src/editable-form/editable-form-jqueryui.js
View File

@@ -7,8 +7,9 @@ Editableform based on jQuery UI
initTemplate: function() { initTemplate: function() {
this.$form = $($.fn.editableform.template); this.$form = $($.fn.editableform.template);
//init buttons //buttons
this.$form.find('button[type=submit]').button({ this.$form.find('div.editable-buttons').append($.fn.editableform.buttons);
this.$form.find('button[type=submit]').button({
icons: { primary: "ui-icon-check" }, icons: { primary: "ui-icon-check" },
text: false text: false
}); });
@@ -16,14 +17,12 @@ Editableform based on jQuery UI
icons: { primary: "ui-icon-cancel" }, icons: { primary: "ui-icon-cancel" },
text: false text: false
}); });
} }
}); });
//form template //buttons
$.fn.editableform.template = '<form class="editableform"><div class="control-group">' + $.fn.editableform.buttons = '<button type="submit" style="height: 24px">submit</button><button type="button" style="height: 24px">cancel</button>';
'&nbsp;<button type="submit" style="height: 24px">submit</button>&nbsp;<button type="button" style="height: 24px">cancel</button></div>' +
'<div class="editable-error-block"></div>' +
'</form>';
//error classes //error classes
$.fn.editableform.errorGroupClass = null; $.fn.editableform.errorGroupClass = null;

19
src/editable-form/editable-form.css
View File

@@ -1,6 +1,15 @@
.editableform, .editableform,
.editableform div.control-group { .editableform div.control-group {
margin-bottom: 0; margin-bottom: 0;
overflow: auto;
}
.editable-buttons {
float: left;
}
.editable-buttons button {
margin-left: 7px;
} }
.editableform-loading { .editableform-loading {
@@ -14,8 +23,7 @@
.editable-error-block { .editable-error-block {
max-width: 300px; max-width: 300px;
margin-top: 3px; margin: 0;
margin-bottom: 0;
clear: both; clear: both;
} }
@@ -23,11 +31,12 @@
color: red; color: red;
} }
.editableform .editable-input { .editable-input {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
width: auto; /* bootstrap-responsive has width: 100% that breakes layout */ width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
float: left; float: left;
padding-bottom: 9px;
} }
.editableform textarea { .editableform textarea {
@@ -36,5 +45,5 @@
.editableform .editable-date { .editableform .editable-date {
padding: 0; padding: 0;
margin: 0 0 9px 0; margin: 0;
} }

40
src/editable-form/editable-form.js
View File

@@ -34,6 +34,9 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
}, },
initTemplate: function() { initTemplate: function() {
this.$form = $($.fn.editableform.template); this.$form = $($.fn.editableform.template);
//buttons
this.$form.find('div.editable-buttons').append($.fn.editableform.buttons);
}, },
/** /**
Renders editableform Renders editableform
@@ -57,8 +60,14 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
//render input //render input
$.when(this.input.render()) $.when(this.input.render())
.then($.proxy(function () { .then($.proxy(function () {
//place input //input
this.$form.find('div.control-group').prepend(this.input.$input); this.$form.find('div.editable-input').append(this.input.$input);
//clear link
if(this.input.$clear) {
this.$form.find('div.editable-input').append(this.input.$clear);
}
//attach 'cancel' handler //attach 'cancel' handler
this.$form.find('button[type=button]').click($.proxy(this.cancel, this)); this.$form.find('button[type=button]').click($.proxy(this.cancel, this));
//append form to container //append form to container
@@ -94,19 +103,11 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
this.$element.triggerHandler('cancel'); this.$element.triggerHandler('cancel');
}, },
showLoading: function() { showLoading: function() {
var fw, fh, iw, ih; var fw, fh, iw, bh;
//set loading size equal to form //set loading size equal to form
if(this.$form) { if(this.$form) {
fh = this.$form.outerHeight() || 0; this.$loading.width(this.$form.outerWidth());
fw = this.$form.outerWidth() || 0; this.$loading.height(this.$form.outerHeight());
ih = (this.input && this.input.$input.outerHeight()) || 0;
iw = (this.input && this.input.$input.outerWidth()) || 0;
if(fh || ih) {
this.$loading.height(fh > ih ? fh : ih);
}
if(fw || iw) {
this.$loading.width(fw > iw ? fw : iw);
}
this.$form.hide(); this.$form.hide();
} }
this.$loading.show(); this.$loading.show();
@@ -406,14 +407,19 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
Note: following params could redefined in engine: bootstrap or jqueryui: Note: following params could redefined in engine: bootstrap or jqueryui:
Classes 'control-group' and 'editable-error-block' must always present! Classes 'control-group' and 'editable-error-block' must always present!
*/ */
$.fn.editableform.template = '<form class="form-inline editableform"><div class="control-group">' + $.fn.editableform.template = '<form class="form-inline editableform">'+
'&nbsp;<button type="submit">Ok</button>&nbsp;<button type="button">Cancel</button></div>' + '<div class="control-group">' +
'<div class="editable-error-block"></div>' + '<div class="editable-input"></div><div class="editable-buttons"></div>'+
'</form>'; '</div>' +
'<div class="editable-error-block"></div>' +
'</form>';
//loading div //loading div
$.fn.editableform.loading = '<div class="editableform-loading"></div>'; $.fn.editableform.loading = '<div class="editableform-loading"></div>';
//buttons
$.fn.editableform.buttons = '<button type="submit">Ok</button><button type="button">Cancel</button>';
//error class attahced to control-group //error class attahced to control-group
$.fn.editableform.errorGroupClass = null; $.fn.editableform.errorGroupClass = null;