many fixes for ie7+ compatibility
This commit is contained in:
parent
1e757b833f
commit
18f29820f3
src
editable-form
element
inputs
@ -14,8 +14,8 @@ Editableform based on Twitter Bootstrap
|
|||||||
});
|
});
|
||||||
|
|
||||||
//buttons
|
//buttons
|
||||||
$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i></button>'+
|
$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary editable-submit"><i class="icon-ok icon-white"></i></button>'+
|
||||||
'<button type="button" class="btn clearfix"><i class="icon-ban-circle"></i></button>';
|
'<button type="button" class="btn editable-cancel"><i class="icon-ban-circle"></i></button>';
|
||||||
|
|
||||||
//error classes
|
//error classes
|
||||||
$.fn.editableform.errorGroupClass = 'error';
|
$.fn.editableform.errorGroupClass = 'error';
|
||||||
|
@ -8,12 +8,12 @@ Editableform based on jQuery UI
|
|||||||
this.$form = $($.fn.editableform.template);
|
this.$form = $($.fn.editableform.template);
|
||||||
|
|
||||||
//buttons
|
//buttons
|
||||||
this.$form.find('div.editable-buttons').append($.fn.editableform.buttons);
|
this.$form.find('.editable-buttons').append($.fn.editableform.buttons);
|
||||||
this.$form.find('button[type=submit]').button({
|
this.$form.find('.editable-submit').button({
|
||||||
icons: { primary: "ui-icon-check" },
|
icons: { primary: "ui-icon-check" },
|
||||||
text: false
|
text: false
|
||||||
}).removeAttr('title');
|
}).removeAttr('title');
|
||||||
this.$form.find('button[type=button]').button({
|
this.$form.find('.editable-cancel').button({
|
||||||
icons: { primary: "ui-icon-cancel" },
|
icons: { primary: "ui-icon-cancel" },
|
||||||
text: false
|
text: false
|
||||||
}).removeAttr('title');
|
}).removeAttr('title');
|
||||||
|
@ -9,15 +9,24 @@
|
|||||||
|
|
||||||
.editable-buttons {
|
.editable-buttons {
|
||||||
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
|
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
|
||||||
|
vertical-align: top;
|
||||||
|
margin-left: 7px;
|
||||||
|
/* display-inline emulation for IE7*/
|
||||||
|
zoom: 1;
|
||||||
|
*display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editable-input {
|
.editable-input {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
|
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
|
||||||
width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
|
width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
|
||||||
|
white-space: normal; /* reset white-space decalred in parent*/
|
||||||
|
/* display-inline emulation for IE7*/
|
||||||
|
zoom: 1;
|
||||||
|
*display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editable-buttons button {
|
.editable-buttons .editable-cancel {
|
||||||
margin-left: 7px;
|
margin-left: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,6 +38,7 @@
|
|||||||
.editableform-loading {
|
.editableform-loading {
|
||||||
background: url('img/loading.gif') center center no-repeat;
|
background: url('img/loading.gif') center center no-repeat;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editable-inline .editableform-loading {
|
.editable-inline .editableform-loading {
|
||||||
@ -39,7 +49,7 @@
|
|||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
padding-top: 3px;
|
padding-top: 3px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
clear: both;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editable-error {
|
.editable-error {
|
||||||
@ -58,7 +68,7 @@
|
|||||||
|
|
||||||
.editable-clear {
|
.editable-clear {
|
||||||
clear: both;
|
clear: both;
|
||||||
float: right;
|
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
@ -63,23 +63,26 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
|||||||
//input
|
//input
|
||||||
this.$form.find('div.editable-input').append(this.input.$input);
|
this.$form.find('div.editable-input').append(this.input.$input);
|
||||||
|
|
||||||
//clear link
|
//"clear" link
|
||||||
if(this.input.$clear) {
|
if(this.input.$clear) {
|
||||||
this.$form.find('div.editable-input').append(this.input.$clear);
|
this.$form.find('div.editable-input').append($('<div class="editable-clear">').append(this.input.$clear));
|
||||||
}
|
}
|
||||||
|
|
||||||
//attach 'cancel' handler
|
|
||||||
this.$form.find('button[type=button]').click($.proxy(this.cancel, this));
|
|
||||||
//append form to container
|
//append form to container
|
||||||
this.$element.append(this.$form);
|
this.$element.append(this.$form);
|
||||||
|
|
||||||
|
//attach 'cancel' handler
|
||||||
|
this.$form.find('.editable-cancel').click($.proxy(this.cancel, this));
|
||||||
|
// this.$form.find('.editable-buttons button').eq(1).click($.proxy(this.cancel, this));
|
||||||
|
|
||||||
if(this.input.error) {
|
if(this.input.error) {
|
||||||
this.error(this.input.error);
|
this.error(this.input.error);
|
||||||
this.$form.find('button[type=submit]').attr('disabled', true);
|
this.$form.find('.editable-submit').attr('disabled', true);
|
||||||
this.input.$input.attr('disabled', true);
|
this.input.$input.attr('disabled', true);
|
||||||
} else {
|
} else {
|
||||||
this.error(false);
|
this.error(false);
|
||||||
this.input.$input.removeAttr('disabled');
|
this.input.$input.removeAttr('disabled');
|
||||||
this.$form.find('button[type=submit]').removeAttr('disabled');
|
this.$form.find('.editable-submit').removeAttr('disabled');
|
||||||
this.input.value2input(this.value);
|
this.input.value2input(this.value);
|
||||||
this.$form.submit($.proxy(this.submit, this));
|
this.$form.submit($.proxy(this.submit, this));
|
||||||
}
|
}
|
||||||
@ -103,12 +106,18 @@ 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, bh;
|
var w;
|
||||||
//set loading size equal to form
|
|
||||||
if(this.$form) {
|
if(this.$form) {
|
||||||
|
//set loading size equal to form
|
||||||
this.$loading.width(this.$form.outerWidth());
|
this.$loading.width(this.$form.outerWidth());
|
||||||
this.$loading.height(this.$form.outerHeight());
|
this.$loading.height(this.$form.outerHeight());
|
||||||
this.$form.hide();
|
this.$form.hide();
|
||||||
|
} else {
|
||||||
|
//stretch loading to fill container width
|
||||||
|
w = this.$loading.parent().width();
|
||||||
|
if(w) {
|
||||||
|
this.$loading.width(w);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
this.$loading.show();
|
this.$loading.show();
|
||||||
},
|
},
|
||||||
@ -409,7 +418,7 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
|||||||
*/
|
*/
|
||||||
$.fn.editableform.template = '<form class="form-inline editableform">'+
|
$.fn.editableform.template = '<form class="form-inline editableform">'+
|
||||||
'<div class="control-group">' +
|
'<div class="control-group">' +
|
||||||
'<div class="editable-input"></div><div class="editable-buttons"></div>'+
|
'<div><div class="editable-input"></div><div class="editable-buttons"></div></div>'+
|
||||||
'<div class="editable-error-block"></div>' +
|
'<div class="editable-error-block"></div>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'</form>';
|
'</form>';
|
||||||
@ -418,8 +427,8 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
|||||||
$.fn.editableform.loading = '<div class="editableform-loading"></div>';
|
$.fn.editableform.loading = '<div class="editableform-loading"></div>';
|
||||||
|
|
||||||
//buttons
|
//buttons
|
||||||
$.fn.editableform.buttons = '<button type="submit">ok</button>'+
|
$.fn.editableform.buttons = '<button type="submit" class="editable-submit">ok</button>'+
|
||||||
'<button type="button">cancel</button>';
|
'<button type="button" class="editable-cancel">cancel</button>';
|
||||||
|
|
||||||
//error class attahced to control-group
|
//error class attahced to control-group
|
||||||
$.fn.editableform.errorGroupClass = null;
|
$.fn.editableform.errorGroupClass = null;
|
||||||
|
@ -35,7 +35,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
|||||||
//create input of specified type. Input will be used for converting value, not in form
|
//create input of specified type. Input will be used for converting value, not in form
|
||||||
if(typeof $.fn.editableform.types[this.options.type] === 'function') {
|
if(typeof $.fn.editableform.types[this.options.type] === 'function') {
|
||||||
TypeConstructor = $.fn.editableform.types[this.options.type];
|
TypeConstructor = $.fn.editableform.types[this.options.type];
|
||||||
this.typeOptions = $.fn.editableform.utils.sliceObj(this.options, Object.keys(TypeConstructor.defaults));
|
this.typeOptions = $.fn.editableform.utils.sliceObj(this.options, $.fn.editableform.utils.objectKeys(TypeConstructor.defaults));
|
||||||
this.input = new TypeConstructor(this.typeOptions);
|
this.input = new TypeConstructor(this.typeOptions);
|
||||||
} else {
|
} else {
|
||||||
$.error('Unknown type: '+ this.options.type);
|
$.error('Unknown type: '+ this.options.type);
|
||||||
@ -53,7 +53,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
|||||||
//attach handler to close any container on escape
|
//attach handler to close any container on escape
|
||||||
$(document).off('keyup.editable').on('keyup.editable', function (e) {
|
$(document).off('keyup.editable').on('keyup.editable', function (e) {
|
||||||
if (e.which === 27) {
|
if (e.which === 27) {
|
||||||
$('.editable-container').find('button[type=button]').click();
|
$('.editable-container').find('.editable-cancel').click();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -65,7 +65,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
//close all other containers
|
//close all other containers
|
||||||
$('.editable-container').find('button[type=button]').click();
|
$('.editable-container').find('.editable-cancel').click();
|
||||||
});
|
});
|
||||||
|
|
||||||
//add 'editable' class
|
//add 'editable' class
|
||||||
@ -229,7 +229,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
|
|||||||
}
|
}
|
||||||
|
|
||||||
//hide all other editable containers. Required to work correctly with toggle = manual
|
//hide all other editable containers. Required to work correctly with toggle = manual
|
||||||
$('.editable-container').find('button[type=button]').click();
|
$('.editable-container').find('.editable-cancel').click();
|
||||||
|
|
||||||
//show container
|
//show container
|
||||||
this.container.show();
|
this.container.show();
|
||||||
|
@ -56,7 +56,7 @@ $(function(){
|
|||||||
this.$input.datepicker(this.options.datepicker);
|
this.$input.datepicker(this.options.datepicker);
|
||||||
|
|
||||||
if(this.options.clear) {
|
if(this.options.clear) {
|
||||||
this.$clear = $('<a href="#">').addClass('editable-clear').html(this.options.clear).click($.proxy(function(e){
|
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
this.clear();
|
this.clear();
|
||||||
|
@ -54,7 +54,7 @@ $(function(){
|
|||||||
this.$input.datepicker(this.options.datepicker);
|
this.$input.datepicker(this.options.datepicker);
|
||||||
|
|
||||||
if(this.options.clear) {
|
if(this.options.clear) {
|
||||||
this.$clear = $('<a href="#">').addClass('editable-clear').html(this.options.clear).click($.proxy(function(e){
|
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
this.clear();
|
this.clear();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user