Feedback:   mdelrosso@gmail.com  Seguir a @mdelrosso en Twitter @mdelrosso   Desarrollo:  Proyecto en Github Proyecto en Github  Reportar un error Reportar un error  HashTag en Twitter #sheepit

SheepIt! Plugin

Clonación dinámica de formularios con Jquery

Formularios anidados Controles avanzados Múltiples formularios en la misma página Amigable para diseñadores Formularios pre-generados

¿Qué es SheepIt?

SheepIt es un plugin para Jquery que permite clonar elementos de formulario dinámicamente.
Es muy útil para desarrollar formularios avanzados que requieran cargar un mismo tipo de dato múltiples veces.

Por ejemplo, si se tiene un formulario como el siguiente:
Formulario básico
con el cual se cargan los datos de una persona (Nombre, Apellido y Teléfono), sheepIt es capaz transformar el campo teléfono en un multiformulario dinámico y asi habilitar al usuario a cargar más de un teléfono por persona.
Formulario con SheepIt

Además, para facilitar su uso, sheepIt agrega controles avanzados que le permiten al usuario modificar el formulario agregando o quitando clones dinámicamente.
Controles avanzados

Características

  • Opciones de configuración
    Limitar la cantidad de formularios, Controles de formulario customizables, cantidad de formularios iniciales, confirmación de borrado etc.
  • Controles avanzados
    Agregar muchos formularios al mismo tiempo, Remover todos, Remover el último, son algunas de las formas que tiene SheepIt para facilitar al usuario el control de los clones.
  • Amigable para diseñadores
    SheepIt toma como modelo para sus clones el mismo template que el diseñador puede ver en su editor, facilitando la actualización del diseño.
  • Inyección de datos
    Gracias al método inject() de la API, sheepIt permite cargar un array de datos a todo el formulario, a un formulario embebido o a un clon específico.
    El método realizará todas las operaciones necesarias para cargar los datos enviados, teniendo en cuenta los clones existentes y la configuración establecida.
  • Funciones callback
    Las callBack functions sirven para ejecutar código personalizado antes o después de agregar un clon al formulario.
    Esto sirve, por ejemplo, para establecer validaciones a los formularios clonados.
  • Formularios anidados
    Una persona tiene múltiples domicilios y un domicilio tiene múltiples teléfonos.
    Los formularios anidados permiten manejar este tipo de situaciones complejas.
  • Formularios pre-generados
    SheepIt puede identificar clones pre-generados en el código html e incorporarlos como propios para poder manejarlos como al resto.
    Esto es muy útil para interactuar con frameworks de formularios como el usado en Symfony para PHP.
  • API para controlar el formulario desde Javascript
    El plugin expone una serie de métodos que permiten controlar el formulario mediante Javascript de la misma forma en la que el usuario lo controla en el navegador.

Requerimientos

Jquery V1.4+ Descargar

Ejemplo básico

Incluir archivos necesarios

            <script type="text/javascript" src="jquery-1.4.min.js"></script>
            <script type="text/javascript" src="jquery.sheepItPlugin-1.1.1.min.js"></script>            

Código javascript

            $(document).ready(function() {
                
                var sheepItForm = $('#sheepItForm').sheepIt({
                    separator: '',
                    allowRemoveLast: true,
                    allowRemoveCurrent: true,
                    allowRemoveAll: true,
                    allowAdd: true,
                    allowAddN: true,
                    maxFormsCount: 10,
                    minFormsCount: 0,
                    iniFormsCount: 2
                });
            
            });

Plantilla HTML

            <!-- sheepIt Form -->
            <div id="sheepItForm">
            
              <!-- Form template-->
              <div id="sheepItForm_template">
                <label for="sheepItForm_#index#_phone">Phone <span id="sheepItForm_label"></span></label>
                <input id="sheepItForm_#index#_phone" name="person[phones][#index#][phone]" type="text"/>
                <a id="sheepItForm_remove_current">
                  <img class="delete" src="images/cross.png" width="16" height="16" border="0">
                </a>
              </div>
              <!-- /Form template-->
              
              <!-- No forms template -->
              <div id="sheepItForm_noforms_template">No phones</div>
              <!-- /No forms template-->
              
              <!-- Controls -->
              <div id="sheepItForm_controls">
                <div id="sheepItForm_add"><a><span>Add phone</span></a></div>
                <div id="sheepItForm_remove_last"><a><span>Remove</span></a></div>
                <div id="sheepItForm_remove_all"><a><span>Remove all</span></a></div>
                <div id="sheepItForm_add_n">
                  <input id="sheepItForm_add_n_input" type="text" size="4" />
                  <div id="sheepItForm_add_n_button"><a><span>Add</span></a></div></div>
              </div>
              <!-- /Controls -->
              
            </div>
            <!-- /sheepIt Form -->            

Resultado

Nueva persona
Datos principales
No hay teléfonos

Descargar el ejemplo completo

Descargar - example1.rar