ProInf.net

Enlaces relacionados

Frameworks

Introducir una hora mediante un widget Javascript

Francisco 18-05-13

Detalle del widget

Introduce la hora y los minutos en un campo de texto de una página web mediante un componente visual manejado con el ratón o el teclado. Hay 3 versiones de JavaScript: con jQuery, con Prototype y sin framework

Ejemplos

Interfaz de usuario

Usando el ratón:

  • Para mostrar el control haz clic sobre el campo de la hora
  • Para ocultar el control haz clic fuera
  • Para seleccionar el tiempo haz clic en la hora y minuto o arrastra los indicadores

Usando el teclado:

  • Para mostrar el control pulsa la tecla Flecha abajo
  • Para ocultar el control pulsa la tecla Flecha arriba o Enter o ESC o Tabulador
  • Para seleccionar el minuto pulsa Flecha izquierda o Flecha derecha
  • Para seleccionar la hora pulsa Mayúsculas junto a Flecha izquierda o Flecha derecha
  • Para seleccionar en intervalos de 5 minutos pulsa Control junto a Flecha izquierda o Flecha derecha

Instalación

Descarga el archivo clock_widget.7z y descomprímelo dentro de tu web en una subcarpeta llamada clock_widget

Modo de empleo

  1. Vincula el archivo JavaScript:
    • Si usas el framework jQuery vincula a
      <script src="clock_widget/clock_jquery.js"></script>
    • Si usas el framework Prototype vincula a
      <script src="clock_widget/clock_prototype.js"></script>
    • Si no usas ningún framework vincula a
      <script src="clock_widget/clock_standalone.js"></script>
  2. Vincula el archivo CSS:
    <link href="clock_widget/clock.css" rel="stylesheet" type="text/css" />
  3. Añade la clase clock al campo que reciba la hora. Por ejemplo:
    <input type="text" class="clock" />

Revisión del código fuente

Código JavaScript

Hoja de estilos CSS

Imágenes usadas

  • Fuente: clock.svg

  • Indicador de la hora: y del minuto:

Diseños preliminares

  1. Fuente: clock.xcf 120×20 — Primera versión dibujada píxel a píxel con el GIMP

  2. Fuente: clock3.xcf 363×60 — Creada a partir de la imagen anterior escalando al triple sin interpolación. Luego se añadieron 3 píxeles más por la derecha.

  3. Fuente: clock7.xcf 880×200 — Creada a partir de la primera imagen escalando ×7 sin interpolación. La zona activa son los primeros 840 píxeles.

  4. Fuente: clock7b.xcf 880×102 — Reducción de la altura a la mitad. Reflejo vertical de los indicadores.

  5. Fuente: clock7c.xcf 440×102 — Reducción de la anchura a la mitad. La zona activa son los primeros 420 píxeles.

  6. Fuente: svg_clock.svg 440×102 — Vectorizado con InkScape

Compartir



Añade tu comentario:

(El correo no será publicado)
 

Artículos relacionados:

  • Creación de pruebas para alumnos…

    Aplicación web para realizar pruebas o cuestionarios de preguntas a alumnos usando Internet. El profesor corrige las prueba y obtiene las puntuaciones.

  • Cálculo del IBAN a partir del CCC…

    Código fuente para la conversión automática del CCC en IBAN; cálculo del código de control del CCC y del IBAN. Disponible en JavaScript, PHP, Python y VB

  • Piedra, papel, tijera, lagarto, Spock…

    El popular juego de piedra, papel o tijera con 2 elementos más: un lagarto y Spock de la serie Star Trek. Juego para dos oponentes en formato SVG+CSS+JavaScript

  • Volver locas a las imágenes de una web…

    Truco en JavaScript que al ejecutar en la barra de direcciones de una web con imágenes hace que éstas empiecen a moverse en círculos.

  • Función "permalink" con Javascript…

    La función permalink obtiene una dirección amigable URL (apropiada para el SEO) a partir del título de la página web. Codificada en RoR y en JavaScript.

  • Desarrollo con Javascript…

    Enlaces para el desarrollo de proyectos en JavaScript. Lista de los frameworks más conocidos: Prototype, Scriptaculous, Dojo, Mochikit, Yahoo UI, jQuery, Aflax

Ir arriba