Skip to Content »

Mootools Calendar

  • 24/06/2008
  • 10:37 pm
  • unijimpe

Hoy les presente un plugin para Mootools el cual les permitirá insertar rápidamente un calendario en nuestros formularios y con un resultado altamente atractivo y profesional. Se trata de Calendar una clase que permite incluir un selector de fecha no-obstrusivo y accesible.

Como usar Mootools Calendar
Lo primero es descargar la ultima versión de esta librería en calendar.js, además de ello es necesario tener Mootools el cual lo pueden descargar desde mootools.js, luego de ello debes crear un archivo CSS con los estilos que se aplicarán al calendario.

El siguiente paso es adjuntar las librerías Javascript a nuestro HTML y posteriormente los archivos CSS que contienen los estilos para nuestra página y nuestro calendario.

  1. <!-- Incluimos el HTML -->
  2. <link href="styles.css" rel="stylesheet" type="text/css">
  3. <link href="calendar.css" rel="stylesheet" type="text/css">
  4. <!-- Incluimos los Javascript -->
  5. <script type="text/javascript" src="js/mootools.js"></script>
  6. <script type="text/javascript" src="js/calendar.js"></script>

El siguiente paso es crear nuestro formulario en el cual debemos incluir un campo de texto el cual contendrá a nuestro selector de fechas.

  1. <input type="text" name="fecha" id="fecha" size="16">

Finalmente inicializamos el Calendario con una llamada al objeto Calendar el cual recibe como parámetros el identificador del campo al cual deseamos asignar el calendario y luego el formato en el cual deseamos se muestren las fechas.

  1. <script type="text/javascript">
  2. window.addEvent('domready', function() {
  3.       myCal = new Calendar({ fecha: 'd/m/Y' });
  4. });
  5. </script>

Luego unimos todos los elementos para obtener el código final para mostrar un selector de fechas en nuestros formulario, todo de forma rápida y sencilla. Esta inicialización lo hacemos en el evento domready que es cuando se ha terminado de interpretar el html de nuestro web.

  3. <title>Mootools Calendar</title>
  4. <link href="styles.css" rel="stylesheet" type="text/css">
  5. <link href="calendar.css" rel="stylesheet" type="text/css">
  6. <script type="text/javascript" src="js/mootools.js"></script>
  7. <script type="text/javascript" src="js/calendar.js"></script>
  8. <script type="text/javascript">
  9. window.addEvent('domready', function() {
  10.    myCal = new Calendar({ fecha: 'd/m/Y' });
  11. });
  12. </script>
  13. </head>
  15. <h3>AGREGAR GASTO </h3>
  16. <form method="post" name="registro">
  17. ...
  18. Fecha:
  19. <input type="text" name="fecha" id="fecha" size="16">
  20. ...
  21. </form>
  22. </body>
  23. </html>

Desde luego lo que queda en adelante es agregarle los estilos de acuerdo al diseño de nuestro web y adecuarlo al formulario que tenemos. Les dejo un ejemplo en moocalendar y finalmente los archivos fuente de este ejemplo para que lo descarguen.

Posts Relacionados

Textareas escalables

  • 19/04/2008
  • 3:18 pm
  • unijimpe

Una de las funcionalidades mas interesantes y útiles que tiene el navegador de MAC Safari es la posibilidad de escalar los campos de texto o textareas, que te permite ingresar textos grandes y adaptar el campo de texto para visualizar adecuadamente el texto que se ingresa.

Firefox Resizeable Textarea
Resizeable Textarea es un plugin para Firefox creado por Raik Jürgens el cual te permitirá escalar los campos de texto de cualquier página web de manera sencilla y sin configuraciones adicionales. Si eres usuario de Firefox te va a ser de mucha utilidad pues va a poder ingresar datos en los formularios de forma mucho mas sencilla, rápida y entendible.

Mootools Textarea Resizer
Textarea Resizer es un plugin para Mootools que permitirá hacer que todos tus campos de texto sean escalables, para ello primero descargas resizeTextarea.js, luego lo incluyes junto a Mootools al inicio de la página donde deseas permitir el escalado de textareas de la siguiente forma:

  1. <script src="mootools.js" type="text/javascript"></script>
  2. <script src="resizeTextarea.js" type="text/javascript"></script>

Pueden ver un ejemplo de este método funcionando en: textarearesizer.html.

jQuery Auto Growing Textareas
Auto Growing Textareas es un plugin para jQuery que permite el escalado de textareas, para ello lo primero es incluir las librerías jquery.js, jquery.autogrow.js y luego aplicamos el método autogrow a todos los textareas que deseamos.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.autogrow.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready (function() {
  5.     // para todos los textareas
  6.     $('textarea').autogrow();
  7.     // para textareas con clase resize
  8.     $('textarea.resize').autogrow();
  9. });
  10. </script>

Pueden ver varios ejemplos funcioando en: Auto-Growing Textarea Demo.

Posts Relacionados

Swiff: Mootools Flash Plugin

  • 01/03/2008
  • 12:48 am
  • unijimpe

Swiff es una clase de Mootools que permite embeber archivos Flash en páginas html a semejanza de SWFObject. Este clase fue desarrollada originalmente por Harald Kirschner para la librería FancyUpload el cual permite hacer upload de archivos con barra de progreso de manera sencilla y ahora se esta incluyendo en la nueva versión de Mootools 1.2 que aun esta en estado beta.

Obteniendo Swiff
Para utilizar Swiff hay dos opciones. La primera es descargar la versión beta Mootools 1.2beta2 en el cual podemos seleccionar Swiff de la lista de componentes y luego la incluimos en el header de nuestra página:

  1. <!-- Si utilizamos mootools 1.2beta2 -->
  2. <script type="text/javascript" src="mootools.js"></script>

La segunda forma es para cuando se utiliza Mootools 1.1, podemos descargar sólo la librería Swiff.Base.js el cual es parte de la librería FancyUpload.

  1. <!-- Si utilizamos mootools 1.1 -->
  2. <script type="text/javascript" src="mootools.js"></script>
  3. <script type="text/javascript" src="Swiff.Base.js"></script>

Utilizando Swiff
Para utilizar Swiff podemo utilizar la siguiente sintaxis, donde 'path' es la ruta al swf a incluir, w es el ancho, h es la altura y 'iddiv' es el identificador

  1. new Swiff('path', {width: w, height: h, container: 'iddiv'});

Luego si deseamos incluir un swf llamado header.swf en nuestra página en el div llamado main, tendríamos el siguiente código:

  3. <title>Demo Swiff - unijimpe</title>
  4. <script type="text/javascript" src="mootools.js"></script>
  5. <script type="text/javascript">
  6. window.addEvent('load', function() {
  7.     var myswf = new Swiff('swffull.swf', {
  8.         width: 600,
  9.         height: 450,
  10.         container: 'main'
  11.     });
  12. });
  13. </script>
  14. </head>
  16. <div id="main">Flash Movie</div>
  17. </body>
  18. </html>

El resultado de este ejemplo lo pueden ver en: Demo Swiff - unijimpe. Obviamente hay muchas mas opciones al momento de insertar un swf como el color del fondo, pasarle flashvars e incluso agregarle eventos, esto lo pueden encontrar de forma detallada en la documentación en Mootools Class: Swiff.

Este método de inclusión de SWFs es muy practico cuando ya estamos utilizando Mootools y no deseamos utilizar una librería adicional para ejecutar flash en nuestra página. Pero si es que deseas controlar el swf al detalle (Por ejemplo la versión de Flash Player) siempre estará SWFObject el cual es el estándar para inclusión de SWFs.

Posts Relacionados