TOOLTIPS

Un tooltip es una pequeña ayuda que podemos habilitar en ciertos elementos HTML como por ejemplo una caja de texto, utilizando el atributo "title". En modo nativo solo podemos mostrar texto y a veces tarda en aparecer.
En este ejercicio nos propusimos mejorar esta herramienta creando una librería que permite asignar cualquier contenido al tooltip, acelerar su aparición y modificar el contenido del tooltip en tiempo real ya sea a través de javascript o de ajax.

Ver y descargar el ejemplo

DATEPICKER

La idea del ejemplo es la de facilitar la carga de fechas en un formulario web, o bien dar la oportunidad al usuario de cargar un fecha correctamente. La idea consiste en crear una caja de texto de tipo date_picker de la siguiente manera:

<input id="fecha1" size="8" type="date_picker">

La librería hará el resto del trabajo. Se encargará de agregar un icono a la derecha del textbox que al clickearlo mostrará un almanaque de donde seleccioanar la fecha.

Ver y descargar el ejemplo

Texto editable tipo facebook

La idea de este ejemplo es la de editar un texto en linea como lo hace el sitio de facebook. Es decir que cuando señalamos el texto con el mouse aparece un "lapicito" que nos permite entrar en modo de edición. Una vez terminada la modificación podemos guardar los cambios en el momento. Entonces:

Inicialmente el texto no es editable, pero al señalarlo aparece "un lapicito" que permite entrar n modo de edición

Al entrar al modo de edición el icono del lapicito cambia por un icono de visto el que usaremos para terminar la edición y guardar los cambios.

 Ver ejemplo

MODALBOX

Modalbox o ventana modal es una ventana emergente que no permite el uso de la ventana anterior hasta tanto no se termine de trabajr con ella. Este ejemplo permite crear una ventana modal fácilmente, permite crear varias instancias y permite que una ventana modal activa invoque a otra ventana modal. Admite cualquier contenido y es totalmente condigurable desde CSS.

 Ver ejemplo

DATAGRID

Un Datagrid es una tabla que incorpora la función de Inplace Editor, lo que permite modificar los valores que contiene en tiempo real. Muy útil cuando tenemos una lista de valores que necesitan actualizarse periódicamente. En el ejemplo los valores de la tabla se pueden modificar, basta con cliquear el valor deseado para que entre en acción el Inplace Editor. Los datos del ejemplo se almancenan en una base de datos Sqlite.

Ver ejemplo

INPLACE EDITOR simple

Esta función nativa de scriptaculous permite modificar un texto on line. Al iniciar la función inplace editor, el texto delimitado o establecido como editable, queda dentro de un textbox para poder editarlo; junto al textbox aparecen además dos controles para aceptar o cancelar la edición del texto.

 Ver ejemplo

SELECT recargable

Práctico ejemplo en el que mostramos como realizar un select recargable. La idea es que a partir de la elección de una opción de una lista desplegable, se cargue otra lista desplegable con valores relacionados con el valor elegido en la primer lista desplegable.

 Ver ejemplo

Autocompleter con Scriptaculous

Esta función nativa de Scriptaculous permite que a medida que vamos incorporando texto en un textbox se vayan mostrando coincidencias para elegir la que estamos buscando. En el ejemplo luego del tercer caracter escrito en el textobox aparece la lista de opciones.

Ver ejemplo

Validación de formulario en línea

En este ejemplo queremos mostrar una forma de validar un formulario desde javascript. La validación comienza al momento de enviar el formulario, si está correcto seguirá su curso sino se mostrarán mensajes de error debajo de los campos incompletos.

La validación comienza al momento de enviar el formulario, cada vez que se intenta enviar se realiza la validación completa de los campos marcados como obligatorios. Solo cuando se cumpla con la validación establecida se enviarán los datos, en este ejemplo aparecerá un mensaje de OK!.

 Ver ejemplo

Slideshow automático con Prototype

El slideshow es una herramienta muy utilizada no solo para mostrar imágenes en un sitio sino también para darle movimiento, está bueno que nuestros sitios web sean "dinámicos" a la vista, a los ojos del visistante. Si buscamos sliders vamos a encontrar ciento de ideas originales y vistosas, en este caso hemos replicado un simple slide "automático", ya que nunca se detiene, las imágenes siempre están en movimiento, Pero agregamos la opción de que el visistante pueda ir a una imagen anterior del slide o avanzar imagenes mediante dos flechitas que orientan estos movimientos.

Fácil de implementar, sin límite de imágenes, configurable desde CSS, programado con Prototype y Scriptaculous.

Ver ejemplo

Slideshow con avance y retroceso de imágenes

Hace un tiempo publicamos un slideshow de imágenes simple, en este caso tomamos el código de a´quel ejercicio y lo mejoramos agregándole controles al slide. Estos controles permiten avanzar o retroceder la imagen que se está visualizando en el slide o bien detener o iniciar el slideshow a perdido del usuario.

El slide está programado con Prototype y Scriptaculous, y utiliza los efectos de appear y fade para mostrar u ocultar las imagenes mientras el slide está en actividad.

Ver ejemplo

Scriptaculous - Efecto DropOut

El efecto DropOut de Scriptaculous es un efecto de cierre y es la combinación de dos efectos Drop y Fade. El elemento afectado experimenta una "caída" al tiempo que se desvanece. Este efecto funciona bien con los elementos html de bloque como DIV,P,H1,H2,etc.. a excepción de las tablas.

Effect.DropOut('id_del_elemento');

En este caso estamos utilizando el efecto con sus valores por defecto. Pero Fade incluye el atributo duration (entre otros) que nos permite controlar la duración del efecto: 

Effect.DropOut('id_del_elemento',{duration: 3.0});

Observe que los atributos como duration se escriben en fomato JSON.

Aquí puedes ver más detalles acerca del efecto Fade

Ver ejemplo

MÉTODO Succ

El método Succ() de Prototype devuelve el sucesor del número actual, según la definición devuelve actual + 1.

-123.51.succ(); --> -122.51

123.51.succ(); --> 124.51

-123.succ(); --> -122

124.succ(); --> 125

Veamos algunos ejemplos de como utilizar este método:

<script>
 var numero = 127;
 var numero_succ = numero.succ();
 alert(numero_succ); --> 128

</script>

Podriamos utilizarlo en combinación con otros métodos:

<script>
 var numero = -127.79;
 var numero_succ = numero.floor().abs().succ();
 alert(numero_succ); --> 129

</script>

MÉTODO Round

El método Round() de Prototype redondea el número dado al valor entero más cercano. El número dado puede ser positivo, negativo o decimal.

123.round(); -->123

123.2.reound(); --> 123

123.49.round(); --> 123

123.5.round(); --> 124

123.879.round(); --> 124

-123.round(); --> -123

-123.2.reound(); --> -123

-123.49.round(); --> -123

-123.5.round(); --> -123

-123.879.round(); --> -124

Veamos algunos ejemplos de como utilizar este método:

<script>
 var numero = -123.51;
 var numero_round = numero.round();
 alert(numero_round); --> -124

</script>

Podríamos utilizarlo en combinación con otros métodos:

<script>
 var numero = -123.51;
 var numero_round = numero.ceil().abs().round();
 alert(numero_round); --> 123

</script>

MÉTODO Floor

El método Floor() de Prototype devuelve el mayor entero menor o igual al número dado. El número dado puede ser positivo, negativo o decimal.

-123.ceil(); --> -123

123.ceil(); -- 123

-123.56.ceil(); --> -124

123.56.ceil(); --> 123

Veamos algunos ejemplos de como utilizar este método:

<script>
 var numero = -123.56;
 var numero_floor = numero.floor();
 alert(numero_floor); --> -124</script>

También podríamos utilizarlo en combinación con otros métodos:

<script>
 var numero = -123.56;
 var numero_floor = numero.abs().floor();
 alert(numero_floor); --> 123</script>

MÉTODO Ceil

El método Ceil() de Prototype devuelve el menor entero mayor o igual al número dado. El número dado puede ser positivo o negativo y puede contener decimales.

-123.ceil(); --> -123

123.ceil(); -- 123

-123.56.ceil(); --> -123

123.56.ceil(); --> 124

Veamos algunos ejemplos de como utilizar este método:

<script>
 var numero = -123.8;
 var numero_ceil = numero.ceil();
 alert(numero_ceil); --> -123
</script>

También podríamos utilizarlo en combinación con otros métodos:

<script>
 var numero = -123.8;
 var numero_ceil = numero.abs().ceil();
 alert(numero_ceil); -->124</script>

MÉTODO Abs

El método Abs() de Prototype devuelve el valor absoluto de un número dado.

123.abs() --> 123

-123.abs() --> 123

Veamos un ejemplo de como utilizar este método:

<script>
 var numero = -123;
 var valor_absoluto_numero = numero.abs();
 alert(valor_absoluto_numero); --> 123

</script>

También podríamos utilizarla de la siguiente manera:

<script>
 var numero1 = -123;
 var numero2 = 123;
 var suma = numero1.abs() + numero2.abs();
 alert(suma); --> 246

</script>

MÉTODO Empty

El método Empty() de Prototype comprueba si una cadena está vacía. Entendiendo que una cadena es vacía cuando no contine ningún caracter. El resultado de empty es booleano. True si la cadena es vacía o False si no lo es.

''.empty(); --> true

'  '.empty(); --> false

 'a'.empty(); --> false

' 12 '.empty(); --> false

Veamos un ejemplo de como utilizar este método

<script>
 function comprobar(){
  if ($('textbox').value.empty())
   alert ('caja vacía');
  else
   alert ('caja con texto');
 }

</script>

<body>
 <input type="text" id="textbox">
 <input type="button" value="Comprobar" onclick="comprobar()">
</body>

MÉTODO Dasherize

El método Dasherize() de Prototype reemplaza cualquier caracter "_" (guión bajo) existente en una cadena por "-" (dash o guión medio).

'border_bottom_width'.dasherize(); --> 'border-bottom-width'

Veamos un ejemplo de como utilizar este método:

<script>
var texto = "frase_separada_por_guiones";
var texto_dashes = texto.dasherize();
alert(texto_dashes); -->frase-separa-por-guiones
</script>

El método reemplaza cualquier guión bajo que encuentre en la cadena, sin importar el lugar o la cantidad por un guión medio.

"_casa   _nueva".dasherize(); --> "-casa  -nueva"

"_casa   ____nueva".dasherize(); --> "-casa  -----nueva"

"_______________".dasherize(); --> "------------------"

"casa nueva ___".dasherize(); --> "casa nueva ---"

MÉTODO Blank

El método Blank() de Prototype se utiliza para comprobar si una cadena de texto  esta " en blanco"  es decir que está vacía (longitud de 0) o que sólo contiene espacios en blanco. Blank devuelve true en caso de hallar vacía la cadena y false en caso contrario.

"".blank(); --> true

"     ".blank(); --> true

" a " .blank() --> false

Veamos como utilizar este método: por ejemplo verifiquemos si una caja de texto (textbox) tiene o no contenido:

<script>

function comprobar(){
if ($('textbox').value.blank())
    alert ('caja vacía');
else
    alert ('caja con texto');   
}

</script>

<body>

            <input type="text" id="textbox">
            <input type="button" value="Comprobar" onclick="comprobar()">

</body>

Pudes ver más detalles de este método en este link