Complex type - multiple editable in the same line

Description

Complex type allows you to have mutiple editable field in the same line. This is very helpful when you have to change many fields at the same time.

Try some examples below :

Examples for complex type
Editstrap PLUGIN
							$("#complexName").editstrap({
								type : 'complex',
								 validateClass:'success',
								url:'https://httpbin.org/post',
								complexEdit : [ 
								  {
									type : 'text',
									append:' ',
									value : 'Editstrap',
									name : 'firestName'
								}, {
									type : 'text',
									value : 'PLUGIN',
									name : 'lastName'
								} ]
							});
                         
11/19/2015 09:30
							$("#complexTime").editstrap({
								type : 'complex',
								validateClass:'warning',
								url:'https://httpbin.org/post',
								prependText:' ',
								complexEdit : [ {
									type : 'date',
									value : '11/19/2015',
									name : 'date',
									append : ' '
								}, {
									type : 'select',
									append : ':',
									value : 9,
									dataSelect : [{
										value : 7,
										text : "07"
									},{
										value : 8,
										text : "08"
									},{
										value : 9,
										text : "09"
									},{
										value : 10,
										text : "10"
									},{
										value : 11,
										text : "11"
									},{
										value : 12,
										text : "12"
									},{
										value : 13,
										text : "13"
									},{
										value : 14,
										text : "14"
									},{
										value : 15,
										text : "15"
									},{
										value : 16,
										text : "16"
									},{
										value : 17,
										text : "17"
									},{
										value : 18,
										text : "18"
									},{
										value : 19,
										text : "19"
									},{
										value : 20,
										text : "20"
									}],
									name : 'hour'
								}, {
									type : 'select',
									value : 30,
									dataSelect : [ {
										value : 0,
										text : "00"
									}, {
										value : 15,
										text : "15"
									}, {
										value : 30,
										text : "30"
									}, {
										value : 45,
										text : "45"
									} ],
									name : 'minute'
								} ]
							});
                         

Available options

Here is the list of available options for complex type

Example
							$(function() {
								$("#toEdit").editstrap({
									type:'complex',
									Title:'Change',
									emptyText:'EMPTY',
									validateClass:'success',
									appendText:' app',
									prependText:'pre ',
									value:'',
									name:'editable',
									editClasses:'fa fa-pencil',
									delayToHide:5000,
									validateValue:function(value){
							            if(value == undefined || value ==''){
							                return {success:false, message:'Should not be empty'}
							            }
							            return {success:true, message:''}
							        },
									displaySuccess:function(editable,value,text){
							            alert('Success');
							        },	
									displayError:function(editable,errorMessage){
							            var element = editable.parent().parent().find(".result-message");
							            element.removeClass(this.errorClass+' '+this.successClass);
							            element.html(errorMessage);
							            element.addClass(this.errorClass); 
							            element.show();
							        },
							        url:'http://google.com',
									data:[],
									pk:1,
									complexEdit : [ {
										type : 'date',
										value : '05/11/2015',
										name : 'date',
										append : ' ',
										dateFormat : 'dd/mm/yyyy'
									}, {
										type : 'select',
										append : ':',
										value : 2,
										dataSelect : [ {
											value : 0,
											text : "00"
										}, {
											value : 1,
											text : "01"
										}, {
											value : 2,
											text : "02"
										}, {
											value : 3,
											text : "03"
										}, {
											value : 12,
											text : "12"
										} ],
										name : 'hour'
									}, {
										type : 'select',
										value : 2,
										dataSelect : [ {
											value : 0,
											text : "00"
										}, {
											value : 0,
											text : "00"
										}, {
											value : 15,
											text : "15"
										}, {
											value : 30,
											text : "30"
										}, {
											value : 45,
											text : "45"
										} ],
										name : 'minute'
									} ]
								});
							});