Artículo

---

1 ¡votar!

Sheeplt, plugin para clonar campos con jQuery

Sheeplt es un plugin desarrollado para jQuery, que permite clonar campos de una forma sencilla y rápida, de forma dinámica. Es una utilidad muy útil para formularios que requiere el mismo tipo de datos varias veces, pero sin saber el número de datos exactos.

Si hay algún campo que puede ser necesitado varias veces, este plugin lo transforma en un campo dinámico, y gracias a los botones que añade, permite ir añadiendo más campos.

Algunas características del plugin

• Opciones de configuración, como el número de formularios, el mensaje de confirmación...
• Controles avanzados, añadiendo múltiples forms al mismo tiempo
• Diseño amigable
• Llamada a funciones después de ser ejecutado.
• API para controlar el form desde JavaScript

Veamos un ejemplo básico de uso. Primero añadimos las dos librerias

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

Añadimos el 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
});
});

Por último el HTML del código:

<!-- 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 -->

Os dejamos una imagen para ver el formulario que se crea con este plugin

Publicado por: Angel Carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios