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

Instalación

Requerimientos

Jquery V1.4+ Descargar
SheepIt! Descargar

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 = $('#SHEEPIT_FORM_CONTAINER_ID').sheepIt({
                        ..OPTIONS..
                });
            
            });

Opciones de configuración

            
var options = {
    
    /***************************************************
       All options are shown with their default values
     ***************************************************/
    
    /**
     * Custom control selectors
     * You can set custom controls selectors. 
     * By default sheepIt will search for %SHEEPIT_FORM_ID%_%control% pattern.
     * If your template respects this pattern you will not need to configure these options.
     */
    addSelector: '#%SHEEPIT_FORM_ID%_add',
    addNSelector: '#%SHEEPIT_FORM_ID%_add_n',
    addNInputSelector: '#%SHEEPIT_FORM_ID%_add_n_input',
    addNButtonSelector: '#%SHEEPIT_FORM_ID%_add_n_button',
    removeLastSelector: '#%SHEEPIT_FORM_ID%_remove_last',
    removeCurrentSelector: '#%SHEEPIT_FORM_ID%_remove_current',
    removeAllSelector: '#%SHEEPIT_FORM_ID%_remove_all',
    controlsSelector: '#%SHEEPIT_FORM_ID%_controls',
    labelSelector: '#%SHEEPIT_FORM_ID%_label',
    
    
    /**
     * Controls on/off
     */ 
    allowRemoveLast: true,
    allowRemoveCurrent: true,
    allowRemoveAll: false,
    allowAdd: true,
    allowAddN: false,
    
    
    /**
     * Remove confirmation on/off and messages
     */ 
    removeLastConfirmation: false,
    removeCurrentConfirmation: false,
    removeAllConfirmation: true,
    removeLastConfirmationMsg: 'Are you sure?',
    removeCurrentConfirmationMsg: 'Are you sure?',
    removeAllConfirmationMsg: 'Are you sure?',
    
    
    /**************************************************************************************
       Templates:
       By default sheepIt will search for %SHEEPIT_FORM_ID%_%template% pattern.
       If your template respects this pattern you will not need to configure this option.
     **************************************************************************************/ 
    
    /**
     * Template to clone
     */
    formTemplateSelector: '#%SHEEPIT_FORM_ID%_template',
    
    
    /**
     * No forms message container
     */ 
    noFormsTemplateSelector: '#%SHEEPIT_FORM_ID%_noforms_template',
    
    /**
     * Separator between clones
     * If you set as an empty string (separator:''), there will be no separator
     */ 
    separator: '<div style="width:100%; border-top:1px solid #ff0000; margin: 10px 0px;"></div>'
    
    
    /**
     * Number of initial forms
     */ 
    iniFormsCount: 1,
    
    
    /**
     * Maximum number of forms
     * 0 = No limit (Not recommended)
     */ 
    maxFormsCount: 20,
    
    
    /**
     * Minimum number of forms
     */ 
    minFormsCount: 1,
    
     
    /**
     * Add N forms at one time
     */ 
    incrementCount: 1,
    
    /**
     * New forms will be insterted after []* or before *[] existing forms
     */ 
    insertNewForms: 'after' ,
    
    /**
     * Id and names management
     * When a template is cloned, its id is replaced by the pattern indicated on this option
     */ 
    indexFormat:'#index#',
    
    /**
     * Continuous Index
     * When is set to true (default), forms are indexed continuous starting from 0,
     * and shows labels like Phone 1, Phone 2, Phone 3,
     * when false,  indexing works always increasing even if one item was deleted.
     * This can be useful when you want to differentiate one clone from another
     */ 
    continuousIndex: true,
    
    /** 
     * A JSON based representation of the data which will prefill the form 
     * Equivalent of the inject method
     */ 
    data: [],
    
    /**
     * Array of ids of the pre-generated html form clones
     * Example: 
	 *   ['pregeneratedForm_1','pregeneratedForm_2']
     */
    pregeneratedForms: [],
    
    /**
	 * JSON Array that specifies the ID and options for each nested form
	 *
	 * Example: 
	 *   [{
     *      id: 'person_address_#index#_phones',
	        options: { 
                 indexFormat: '#index_phones#'
            }
          },
          {
             id: 'person_address_#index#_photos',
             options: { 
                 indexFormat: '#index_photos#'
             }
          }]
     */ 
    nestedForms: [],
    
    
    
    /******************************************
       Callback functions execution order
    
                 Before Add
                     |
                 Before clone
                     |
         (Cloning and normalization process)
                     |
                 After Clone
                     |
                 After Add
      
     ******************************************/

    /**
     * Callback function that is executed just before starting the process of adding a form
	 * 
	 * Recieves the sheepIt object
     */ 
    beforeAdd: function(source) {},
    
    
    /**
     * Callback function that is executed just before cloning a form
     * With this function you can perform operations before starting the cloning process
     *
     * Recieves the sheepIt object and the template to clone
     */ 
    beforeClone: function(source, template) {},
    
     
    /**
     * Callback function that is executed just after cloning a form
     * With this function you can customize the template recently cloned and just before being inserted
     * 
     * Recieves the sheepIt object and the cloned template
     */ 
    afterClone: function(source, clone) {},
    
    
    /**
     * Callback function that is executed just after you've added a form
     * The clone was normalized and inserted. 
     * With this function you can perform additional operations such as adding validations, effects, etc
     */ 
    afterAdd: function(source, newForm) {}
    
    /**
     * Callback function that is executed just after you've inject data into all forms
     * With this function you can perform additional operations such as adding validations, effects, etc
     */ 
    afterFill: function() {},
    

    
    /**
     * Callback function that is executed just before remove a form
     *
     * Recieves the sheepIt object
     */ 
    beforeRemoveCurrent: function(source) {},
    

     
    /**
     * Callback function that is executed just after remove a form
     * 
     * Recieves the sheepIt object
     */ 
    afterRemoveCurrent: function(source) {}
    

}

API

Esta sección solo describe los métodos disponibles sin mostrar un detalle de su funcionamiento.
Para entender mejor como utilizar la API de sheepIt visitá la sección Ejemplos

            
 /**
  * Gets "Add control" object
  *
  * @return object
  */
getAddControl();


/**
  * Gets "Add N control" object
  *
  * @return object
  */
getAddNControl();


/**
  * Gets "Remove Last control" object
  *
  * @return object
  */
getRemoveLastControl();


/**
  * Gets "Remove All control" object
  *
  * @return object
  */
getRemoveAllControl();



/**
 * Gets all current forms
 *
 * @return array of forms objects
 */
getAllForms();


/**
 * Gets an specific form
 *
 * @param integer   Position of the form in the array 
 *                  (0 = First form, 1 Second form, etc)
 *
 * @return form object
 */
getForm(4);


/**
 * Gets the first form
 *
 * @return form object
 */
getFirstForm();


/**
 * Gets the last form
 *
 * @return form object
 */
getLastForm();


/**
 * Adds a new form
 *
 * @return bool true, if successful, otherwise false
 */
addForm();


/**
 * Adds N forms 
 *
 * @param integer    Number of forms to add
 *
 * @return bool true, if successful, otherwise false
 */
addNForms(2);


/**
 * Gets the number of active forms
 *
 * @return integer
 */
getFormsCount();


/**
 * Checks if exists at least one form 
 *
 * @return bool true, if exists at least one, otherwise false
 */
hasForms();


/**
 * Checks if more forms can be added
 *
 * @return bool true, if more forms can be added, otherwise false
 */
canAddForm();


/**
 * Checks if all forms can be removed
 *
 * @return bool true, if can be removed, otherwise false
 */
canRemoveAllForms();


/**
 * Checks if las form can be removed
 *
 * @return bool true, if can be removed, otherwise false
 */
canRemoveForm();


/**
 * Removes all forms
 *
 * @return bool true, if successful, otherwise false
 */
removeAllForms();


/**
 * Removes the last form
 *
 * @return bool true, if successful, otherwise false
 */
removeLastForm();


/**
 * Removes the first form
 *
 * @return bool true, if successful, otherwise false
 */
removeFirstForm();


/**
 * Removes specific form
 *
 * @return bool true, if successful, otherwise false
 */
removeForm(3);


/**
 * Inject data
 *
 * @param A JSON based representation of the data
 * 
 * @return bool true, if successful, otherwise false
 */
inject([
    {
        'person_address_#index#_id': 1,
        '#form#_#index#_address': '767 Fifth Ave. New York City, NY',
        'postalCode': '1345',
        'country': 5
    },
    {
        'person_address_#index#_id': 2,
        '#form#_#index#_address': '343 West Broadway New York, NY',
        'postalCode': '2345',
        'country': 5
    },
]);    
    

Licencia

SheepIt es un software gratuito y puede ser distribuido o modificado bajo los términos de la licencia MIT