Uso:
1.- descagamos el plug-in y junto al JQuery,lo incluimos entre etiquetas head preferiblemente.
<!-- incluimos le JQuery--> <script type="text/javascript" src="jquery.js"></script> <!-- incluimos le plugin --> <script type="text/javascript" src="autoresize.jquery.js"></script>
2.- configuramos el plug-in:
<script type="text/javascript"> // inicializamos $(document).ready(function () { // en este caso lo aplicamos a un solo campo $('#id_de_mi_textarea').autoResize(); }); </script>
3.- nos aseguramos que el textarea tenga el id indicado en la configuración.
<textarea id="id_de_mi_textarea" style="width: 400px; padding: 10px; height: 50px;"> Escribe algo aquà y cuando te acercas al final del textarea, éste se expandirá </textarea>
Disponemos de algunas propiedades extras para personalizar la funcionalidad, a continuación un ejemplo comentado:
// OnResize: permite indicar que procesos se ejecutaran // antes de que se cambie el tamaño del campo onResize: function() { // .. }, // Si se establece en false no se llevará a cabo la animación, // la altura cambiará inmediatamente cuando sea necesario. // Por defecto está establecido en true Animate: true, // duración de milisegundos de la animación, // por defecto que está establecido en 150 AnimateDuration: 200, // duración de milisegundos de la animación, por defecto que está establecido en 150 animateDuration : 400, // por defecto es 20, permite agregar algunos pixeles extras a la altura total requerida extraSpace : 40, // permite indicar el limite de expansión // una vez que el área de texto llege a esta altura, se detendrá la expansión // Por defecto está configurado para 1000 limite: 700
Demostración y descargas en la página oficial.
- Los comentarios están siendo moderados y serán publicados en la brevedad posible.