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

MÉTODO Camelize

El método Camelize() de Prototype recibe una cadena de texto separada por guines (cadena-de-texto) y la convierte en un equivalente del tipo camelCase (cadenaDeTexto).

'background-color'.camelize();  -> 'backgroundColor'

'-moz-binding'.camelize();  -> 'MozBinding'

Veamos un ejemplo de como utilizar este método:

<script>

     var texto =  "la-casa-del-lago";

     var texto_camelizado = texto.camelize();

         alert (texto_camelizado); -->laCasaDelLago
      });
</script>

Otra manera en que podríamos utilizarlo sería:

<script>

     var texto = $w('casa-pequeña auto-grande avión-alto barco-largo').each(function(transporte){
         alert (transporte.camelize()); -->casaPequeña autoGrande aviónAlto barcoLargo
      });
</script>

Para ver más detalles acerca de este método haz clic aquí