Plugin FormMaker

Plugin para convertir divs en formularios chidoris

by Edgar Martinez

HTML

<div id="FormPrueba"></div>

CSS

.form-style-3{
    max-width: 450px;
    padding-left: 22%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-3-label{
    display:block;
    margin-bottom: 10px;
}

.form-style-3-fieldset{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    margin: 0px 0px 10px 0px;
    border: 1px solid #000000;
    padding: 20px;
    background: #93cede; /* Old browsers */
    background: -moz-linear-gradient(top,  #93cede 0%, #75bdd1 41%, #49a5bf 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */

}
.form-style-3-fieldset-legend{
    color: #a70000;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    background: #FFF4F4;
    padding: 0px 8px 3px 8px;
    font-weight: normal;
    font-size: 12px;
}
.form-style-3-textarea{
    position: relative;
    left: 10px;
    width:250px;
    height:100px;
	vertical-align: text-top;
}
.form-style-3-input{
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid blue;
    outline: none;
    color: black;
    padding: 5px 8px 5px 8px;
    box-shadow: inset 1px 1px 4px #FFD5E7;
    -moz-box-shadow: inset 1px 1px 4px #FFD5E7;
    -webkit-box-shadow: inset 1px 1px 4px #FFD5E7;
    background: #FFEFF6;
    width:50%;
}
.form-style-3-button{
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /*...

JavaScript

;(function($){

var methods = {  
    init : function(opts){
        var settings = $.extend({
                           objCampos:{id:"Nombre"},
                           arrTipos:["text"],
                           arrRequeridos:[0],
                           arrDefaulVal:[0],
                           NombreForm: "Formulario",
                           idForm: "FormPrueba",
                           colorTitle:"#4040FF"
                      }, opts);
                   
                      return this.each(function(){
                         $(this).addClass("form-style-3");
                         var html= makeForm(settings.objCampos,settings.arrTipos,settings.arrRequeridos,settings.arrDefaulVal,settings.NombreForm,settings.idForm);
                         $(this).html(html);
                         $(".form-style-3-fieldset-legend").css({color:settings.colorTitle});
                      });
                       
    }
};
  
$.fn.FormMaker=function(param){
    if(methods[param]){
        return methods[param].apply(this);
    }else if(typeof param === 'object' || !param){
        return methods.init.apply(this);
    }else{
        $.error("No existe el metodo " + param + "!");
    }
 }
    
 function makeForm(objCampos,arrTipos,arrRequeridos,arrDefaulVal,NombreForm,idForm){
 
   var html='<fieldset class="form-style-3-fieldset">'+
            '<legend class="form-style-3-fieldset-legend">'+NombreForm+'</legend>';
			
    var Data=inspeccionar(objCampos);//Convertimos el objeto en texto separado por pipes y dos puntos

	  var splitInfo=Data.split("|");//Convertimos el texto en array simple

    for(var x=0;x<splitInfo.length-1;x++){//recorremos el array
	    var splitData=splitInfo[x].split(":");//Se paramos la informacion
		var id=splitData[0];
		var nombre=splitData[1];
		var tipo=arrTipos[x];
		var valDef=arrDefaulVal[x];
		var requerido=arrRequeridos[x];
		    html+=...