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

API

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

            
var sheepItForm = {};

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

function executeAPI() {
				
	// Using API
	alert('Inject data');
	// Inject data 
	sheepItForm.inject([
		{
		'phone': '23-34445-3345'
		}
	]);
	
	// Add a form
	alert('Add a form');
	sheepItForm.addForm();
	
	// Get all forms forms
	var forms = sheepItForm.getForms();
	
	// Inject new data on each form
	alert('Insert new data on each form');
	for (x in forms) {
		forms[x].inject({'phone': "3334-" + Math.random()});
	}
	
	// Remove a form
	alert('Remove first form');
	sheepItForm.removeForm(0);
	
	// Remove all forms
	alert('Remove all forms');
	sheepItForm.removeAllForms();
	
}
			

Plantilla HTML

            

<style>

a {
    text-decoration:underline;
    color:#00F;
    cursor:pointer;
}

#sheepItForm_controls div, #sheepItForm_controls div input {
    float:left;    
    margin-right: 10px;
}

#executeLink {
	clear:both; 
	margin-top:20px;
}


</style>

<!-- 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" size="15" maxlength="10" />
    <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 -->

<p id="executeLink" ><a href="javascript:executeAPI();"><span>Execute API</span></a></p>

            

Resultado

Nueva persona
Datos principales
No hay teléfonos

Ejecutar API

Descargar el ejemplo completo

Descargar - example6.rar