Subscribe:

UvumiTools Textarea Plugin

UvumiTools Textarea, es basicamente un textarea con un par de extras, construido con Mootools Javascript Framework. No contiene ningun tipo de WYSIWG, porque a palabaras del autor "nos gusta mantener las cosas simples". Por lo tanto es solo un elemento basico de textarea, cuenta con una manera muy elegante y 2.0 de mostrarnos cuantos caracteres estan disponibles.

El hecho de tener una forma elegante y vistosa de cuantos caracteres restan es una forma muy buena y sencilla de que los usuarios de nuestra web sepan cuantos caracteres tienen disponibles y planee mejor su mensaje.

Características:
  • No requiere conocimientos de Javascript
  • No requiere preparacion HTML
  • No es intrusivo
  • Compatible con diferentes navegadores (Firefox 2 & 3, Internet Explorer 6 & 7, Opera 9, Safari 3)
  • Muestra más que números
  • Corta caracteres adicionales
  • Perzonalisable con CSS
  • y muchas más
Como usarlo:

Primero entre las etiquetas head y /head->
<head>
<!-- Insert these lines in your document's head -->
<link rel="stylesheet" type="text/css" media="screen" 
href="css/uvumi-textarea.css"/>
<script type="text/javascript"
src="js/mootools-for-textarea.js"> </script>
<script type="text/javascript"
src="js/UvumiTextarea.js"> </script>
</head>
Despues como el script necesita por lo menos un textarea lo pondremos->
<form id="comment-form" action="submit-comment.php" method="post" >
<p>
<!-- This is our textarea. The rows and cols properties
are not necessary for the script,
but the strict doctype requires them -->
<textarea id="text-input" name="text" rows="6"
cols="12" > </textarea>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
A lo que quedaria algo asi->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
media="screen" href="css/uvumi-textarea.css"/>
<script type="text/javascript"
src="js/mootools-for-textarea.js"> </script>
<script type="text/javascript"
src="js/UvumiTextarea.js"> </script>
<script type="text/javascript">
new UvumiTextarea();
</script>
</head>
<body>
<div>
<form id="comment-form"
action="submit-comment.php" method="post" >
<p>
<textarea id="text-input" name="text"
rows="6" cols="12" > </textarea>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
</div>
</body>
</html>
Demos, Descargas y más

Tags: , , , ,

0 comentarios:

Publicar un comentario en la entrada

Suscribirse a: Enviar comentarios (Atom)