tag:blogger.com,1999:blog-1977253591322787452024-02-19T00:20:42.772-03:00Prototype / ScriptaculousEjemplos de programación web utilizando prototype y scriptaculousAlfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.comBlogger63125tag:blogger.com,1999:blog-197725359132278745.post-29200520272088678662015-01-27T11:50:00.002-03:002015-01-27T11:50:41.359-03:00TOOLTIPSUn 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.<br />
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1p1mPN1a0X2Z8bwaq1WNcAT37nPfeHvoIOVhOLRCEmCcr8kr458vcWBdOyl5tBgTKXNRhQmeFD2vusoXLvEqvfOxiHsvDlqLq7I47AyKfCGsON5Rx7CN6XzjgE3FbqYpNxegyYd9Ej5M/s1600/tooltips.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1p1mPN1a0X2Z8bwaq1WNcAT37nPfeHvoIOVhOLRCEmCcr8kr458vcWBdOyl5tBgTKXNRhQmeFD2vusoXLvEqvfOxiHsvDlqLq7I47AyKfCGsON5Rx7CN6XzjgE3FbqYpNxegyYd9Ej5M/s1600/tooltips.png" height="169" width="320" /></a></div>
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=44" target="_blank">Ver y descargar el ejemplo</a>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-3555633714190272372015-01-26T10:32:00.002-03:002015-01-26T10:33:35.807-03:00DATEPICKERLa 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:<br />
<br />
<code class="js string"><input id="</code><code class="js plain">fecha1</code><code class="js string">" size="</code><code class="js plain">8</code><code class="js string">" type="</code><code class="js plain">date_picker</code><code class="js string">"> </code><br />
<br />
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.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFeXJPQE_w3sf8ZrLG4E92rETN08FEHL9XUx7_fyQ2oYhqrywHv-KcFkMDtkG4USvl1Y9iqoSKIayQPeP8QSA58PWYeIPkhWcHv4dGVHxC8GaIm1zd51vIR_afp7TDP_Ay1dfKoVHGXb31/s1600/datepicker.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFeXJPQE_w3sf8ZrLG4E92rETN08FEHL9XUx7_fyQ2oYhqrywHv-KcFkMDtkG4USvl1Y9iqoSKIayQPeP8QSA58PWYeIPkhWcHv4dGVHxC8GaIm1zd51vIR_afp7TDP_Ay1dfKoVHGXb31/s1600/datepicker.PNG" /></a></div>
<br />
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=43" target="_blank">Ver y descargar el ejemplo</a>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-24103655464652298422014-12-19T11:41:00.000-03:002014-12-19T11:41:08.553-03:00Texto editable tipo facebookLa 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:<br />
<br />
Inicialmente el texto no es editable, pero al señalarlo aparece "un lapicito" que permite entrar n modo de edición<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_CmNr0vhBgpzvdsbDjbcg_-H9yvP5tJAi1FucZhWtYy08exMP-BKge9QbLLnwxzC6UrJxK28gbbuerC_8PQ5kEjvenjGHaxeC6GJ_hl1dfaubDNp5k8Q8dioaM27ssLWsb3R15X712fZn/s1600/texto_editable_online.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_CmNr0vhBgpzvdsbDjbcg_-H9yvP5tJAi1FucZhWtYy08exMP-BKge9QbLLnwxzC6UrJxK28gbbuerC_8PQ5kEjvenjGHaxeC6GJ_hl1dfaubDNp5k8Q8dioaM27ssLWsb3R15X712fZn/s1600/texto_editable_online.png" height="77" width="400" /></a></div>
<br />
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. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMVW0-tXHeo2Ki5Vo3mvVSqL3hVL0aT6fasBKf7YON8zAFA_dUV5gVOXEsjWzvOcTInrxpHtJk88tuTqYCh9mFEIEsqPH2BUqkTr0rSjQ-XVj4ZgUppqTtyG5wOf1eB_9iRKSvWiJcqz5t/s1600/texto_editable_online_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMVW0-tXHeo2Ki5Vo3mvVSqL3hVL0aT6fasBKf7YON8zAFA_dUV5gVOXEsjWzvOcTInrxpHtJk88tuTqYCh9mFEIEsqPH2BUqkTr0rSjQ-XVj4ZgUppqTtyG5wOf1eB_9iRKSvWiJcqz5t/s1600/texto_editable_online_2.png" height="78" width="400" /></a></div>
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=42" target="_blank"> Ver ejemplo</a>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-78000851613317775232014-12-19T11:32:00.000-03:002014-12-19T11:32:06.806-03:00MODALBOXModalbox 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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha86-gM1_IoukVTpe1MXkV7rSlbrdRXehPsMm7jeru3uRlQKSqaCiXIz98L4jFdAmoUSj6MRl4-AXRhXIGAdyNAgNCWH8WmwWfzbjbRrWqca27HdtyFbGFUdtS3bq884t93QEzMrCz3scX/s1600/modalbox.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha86-gM1_IoukVTpe1MXkV7rSlbrdRXehPsMm7jeru3uRlQKSqaCiXIz98L4jFdAmoUSj6MRl4-AXRhXIGAdyNAgNCWH8WmwWfzbjbRrWqca27HdtyFbGFUdtS3bq884t93QEzMrCz3scX/s1600/modalbox.PNG" height="192" width="400" /></a></div>
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=41" target="_blank"> Ver ejemplo </a>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-66332357326991143132014-12-19T11:27:00.001-03:002014-12-19T11:27:43.706-03:00DATAGRIDUn 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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE_n8DG-iyBWVUDRhS3hyphenhyphenNDItuTfMSIjWgEomBOq91QZ4qraYoPWBRP4kvV4kK37fxWHp8e02hlFXuF-ZGTAo5YUujMcuwFPh5kvo0PzBwAXafBkVQtHqiFljQVFPkmY5gUd5GuQabhO6Q/s1600/datagrid.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE_n8DG-iyBWVUDRhS3hyphenhyphenNDItuTfMSIjWgEomBOq91QZ4qraYoPWBRP4kvV4kK37fxWHp8e02hlFXuF-ZGTAo5YUujMcuwFPh5kvo0PzBwAXafBkVQtHqiFljQVFPkmY5gUd5GuQabhO6Q/s1600/datagrid.PNG" height="73" width="400" /></a></div>
<br />
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=40" target="_blank">Ver ejemplo </a>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-67422862917075055322014-12-19T11:23:00.002-03:002014-12-19T11:23:58.886-03:00INPLACE EDITOR simpleEsta 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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3EoitSD_U6FS3BE2L1uetGzmZF-a-_00rb7fDRDud_cWIbMhRBshU2FbqKeuX7kapv93-M3SF44kEILdeZacd0NxcXYd6fzpPuyKy6id3nyqVx0ukGCb9NxNQzfmGmN3oF_sXxGkDRX0z/s1600/inplace+editor.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3EoitSD_U6FS3BE2L1uetGzmZF-a-_00rb7fDRDud_cWIbMhRBshU2FbqKeuX7kapv93-M3SF44kEILdeZacd0NxcXYd6fzpPuyKy6id3nyqVx0ukGCb9NxNQzfmGmN3oF_sXxGkDRX0z/s1600/inplace+editor.PNG" height="118" width="400" /></a></div>
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=39" target="_blank">Ver ejemplo</a>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-80511462451828733342014-12-19T11:20:00.000-03:002014-12-19T11:20:13.047-03:00SELECT recargablePrá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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZWFH5xKwO9TXAUF_3c39oeuxWujf8mPOuaL0kNxocEC9u48l6I8x_RZ5at09gs8UFR0NB_34VWAblPtsIz468NATpNEuvN2WJmo727FKi11KaUHhyNi7omFnlqK1rsOpKkORmJ7RC-KX/s1600/select+recargable.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZWFH5xKwO9TXAUF_3c39oeuxWujf8mPOuaL0kNxocEC9u48l6I8x_RZ5at09gs8UFR0NB_34VWAblPtsIz468NATpNEuvN2WJmo727FKi11KaUHhyNi7omFnlqK1rsOpKkORmJ7RC-KX/s1600/select+recargable.PNG" height="42" width="400" /></a></div>
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=38" target="_blank"> Ver ejemplo</a>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-36001416611577063542014-12-19T11:16:00.000-03:002014-12-19T11:16:38.999-03:00Autocompleter 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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3UoedCzqK-ODkuEwFXRDwEA2JoQt1RKLdEUek3vaVZTHmNQg6aJLVvqun_O2Dfqp8TehCjQJZIDh_P3LuRAs497OYTgXYqnIpNc_e8H0JQS-qi_hygXSQJMMc9GrZypIVyTtQxwBVynQ/s1600/autocompleter.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3UoedCzqK-ODkuEwFXRDwEA2JoQt1RKLdEUek3vaVZTHmNQg6aJLVvqun_O2Dfqp8TehCjQJZIDh_P3LuRAs497OYTgXYqnIpNc_e8H0JQS-qi_hygXSQJMMc9GrZypIVyTtQxwBVynQ/s1600/autocompleter.PNG" height="39" width="320" /></a></div>
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=37" target="_blank">Ver ejemplo</a><br />Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-17757830495937528422014-07-15T09:37:00.000-03:002014-07-15T09:37:17.310-03:00Validación de formulario en líneaEn 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.<br />
<br />
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!.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3m9CxbHQ5xNh9c3OQp_WgPalx39qk-MCe08xzKlp4Y-QSU-vDGfgGb-HmLzWqF4QehnvW0NVkrQ8GIw2au-hDUKWQqBIdBwPvMlEbAoFoCcaewHVvqNm-Ljk-bhGVF1_6os5lCpcax-0T/s1600/validar_formulario.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3m9CxbHQ5xNh9c3OQp_WgPalx39qk-MCe08xzKlp4Y-QSU-vDGfgGb-HmLzWqF4QehnvW0NVkrQ8GIw2au-hDUKWQqBIdBwPvMlEbAoFoCcaewHVvqNm-Ljk-bhGVF1_6os5lCpcax-0T/s1600/validar_formulario.png" height="350" width="400" /></a></div>
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=34" target="_blank">Ver ejemplo</a>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-43572303107733246822012-05-15T18:34:00.004-03:002014-07-14T09:58:19.706-03:00Slideshow automático con Prototype<div style="text-align: justify;">
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.</div>
<br />
<div style="text-align: justify;">
Fácil de implementar, sin límite de imágenes, configurable desde CSS, programado con Prototype y Scriptaculous.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiolXFKdIGcwoChmPin_UFsMioFYkOMbQ7yhNioSRcaOPZLET1zQ2y53kl10dx-6NcRslM8ErAyc3w05SHO6qXasiEnNFx4JEEqhb05dckWTTHLtFRs0rt8hs0AI_evZ12mkvAeiChj-2yt/s1600/slideshow_autom%C3%A1tico.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiolXFKdIGcwoChmPin_UFsMioFYkOMbQ7yhNioSRcaOPZLET1zQ2y53kl10dx-6NcRslM8ErAyc3w05SHO6qXasiEnNFx4JEEqhb05dckWTTHLtFRs0rt8hs0AI_evZ12mkvAeiChj-2yt/s320/slideshow_autom%C3%A1tico.jpg" height="246" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=33" target="_blank">Ver ejemplo</a></div>
<div style="text-align: justify;">
<br /></div>
Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-59181895305676337062012-05-14T02:04:00.002-03:002014-07-14T10:01:20.093-03:00Slideshow con avance y retroceso de imágenes<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAyyLtfJ4I3IB0-B607AqnsxYg8YwAk64HM2MYoEjBQqDfaKDbmEzL_40I05SwHoH__FoRxOYnBbQGxn-PGDzTnk_RQsD3yKmOp37vtV-jnE4WN21EimC4v2lxddcR35AJhu_-lAHcqPFg/s1600/slideshow_con_controles.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAyyLtfJ4I3IB0-B607AqnsxYg8YwAk64HM2MYoEjBQqDfaKDbmEzL_40I05SwHoH__FoRxOYnBbQGxn-PGDzTnk_RQsD3yKmOp37vtV-jnE4WN21EimC4v2lxddcR35AJhu_-lAHcqPFg/s320/slideshow_con_controles.jpg" height="293" width="320" /></a></div>
</div>
<div style="text-align: justify;">
<br />
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=32" target="_blank">Ver ejemplo</a>
</div>
Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-50984188506687010062011-11-08T15:32:00.023-03:002014-07-14T10:04:02.191-03:00Scriptaculous - Efecto DropOut<div style="text-align: justify;">
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 f<span class="hps" closure_uid_7gxzl="218">unciona bien</span> <span class="hps" closure_uid_7gxzl="219">con</span> <span class="hps" closure_uid_7gxzl="220">los elementos</span> html de <span class="hps" closure_uid_7gxzl="222">bloque como DIV</span><span class="" closure_uid_7gxzl="223">,P,H1,H2,etc.. a excepción de</span> <span class="hps" closure_uid_7gxzl="224">las tablas</span><span class="" closure_uid_7gxzl="225">.</span></div>
<div style="text-align: justify;">
<br /></div>
<span class="" closure_uid_7gxzl="225"></span><br />
<div style="color: #660000;">
<b>Effect.DropOut('id_del_elemento');</b></div>
<div style="color: #660000;">
</div>
<div style="color: #660000;">
<div style="color: black; text-align: justify;">
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:<b> </b></div>
<div style="color: black;">
<br /></div>
<div style="color: #660000;">
<b>Effect.DropOut('id_del_elemento',{duration: 3.0});</b></div>
<div style="color: #660000;">
</div>
<div style="color: #660000; text-align: justify;">
<span style="color: black;">Observe que los atributos como duration se escriben en fomato JSON.</span></div>
<div style="color: #660000;">
<br /></div>
<div style="color: #660000;">
<a href="http://madrobby.github.com/scriptaculous/effect-dropout/" target="_blank"><span style="color: #ca3268;">Aquí</span></a> puedes ver más detalles acerca del efecto Fade <br />
<br />
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=31" target="_blank"><span style="color: #ca3268;">Ver ejemplo</span></a>
</div>
</div>
Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-6651393573977889132011-11-06T13:14:00.016-03:002011-11-06T13:14:00.707-03:00MÉTODO Succ<div style="text-align: justify;">El método Succ() de Prototype d<span class="hps" closure_uid_7gxzl="176">evuelve el</span> <span class="hps" closure_uid_7gxzl="177">sucesor del</span> <span class="hps" closure_uid_7gxzl="178">número actual</span><span class="" closure_uid_7gxzl="179">, según la definición</span> devuelve <strong><span class="hps" closure_uid_7gxzl="180">actual</span> <span class="hps" closure_uid_7gxzl="181">+ 1.</span></strong></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><span style="color: #990000;"><strong>-123.51.succ();</strong> </span><span style="color: black;">--> -122.51</span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><span style="color: #990000;"><strong>123.51.succ();</strong> </span><span style="color: black;">--> 124.51</span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><span style="color: #990000;"><strong>-123.succ();</strong> </span><span style="color: black;">--> -122</span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><span style="color: #990000;"><strong>124.succ();</strong> </span><span style="color: black;">--> 125</span></span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><strong>Veamos algunos ejemplos de como utilizar este método:</strong></span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><span style="color: #990000;"><strong><script><br />
var numero = 127;<br />
var numero_succ = numero.succ();<br />
alert(numero_succ);</strong> <span style="color: black;">--> 128</span></span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><span style="color: #990000;"><strong></script></strong></span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><span style="color: #990000;"><strong><br />
</strong></span></span><span class="hps" closure_uid_7gxzl="181"><strong>Podriamos utilizarlo en combinación con otros métodos:</strong></span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><span style="color: #990000;"><strong><script><br />
var numero = -127.79;<br />
var numero_succ = numero.floor().abs().succ();<br />
alert(numero_succ);</strong> <span style="color: black;">--> 129</span></span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="181"><span style="color: #990000;"><strong></script></strong></span></span></div>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-55910892081692082392011-11-04T12:57:00.022-03:002011-11-04T12:57:00.210-03:00MÉTODO Round<div style="text-align: justify;">El método Round() de Prototype r<span class="hps" closure_uid_7gxzl="159">edondea el número dado</span> <span class="hps" closure_uid_7gxzl="160">al valor entero más cercano. El número dado puede ser positivo, negativo o decimal.</span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><span style="color: #990000;"><strong>123.round(); </strong></span><span style="color: black;">-->123</span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong><span style="color: #990000;">123.2.reound();</span></strong> --> 123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong><span style="color: #990000;">123.49.round();</span></strong> --> 123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong><span style="color: #990000;">123.5.round(); </span></strong>--> 124</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong><span style="color: #990000;">123.879.round();</span></strong> --> 124</span></div><div style="text-align: justify;"><br />
</div><span class="hps" closure_uid_7gxzl="160"></span><br />
<div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><br />
<div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><span style="color: #990000;"><strong>-123.round(); </strong></span><span style="color: black;">--> -123</span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong><span style="color: #990000;">-123.2.reound();</span></strong> --> -123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong><span style="color: #990000;">-123.49.round();</span></strong> --> -123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong><span style="color: #990000;">-123.5.round(); </span></strong>--> -123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong><span style="color: #990000;">-123.879.round();</span></strong> --> -124</span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong>Veamos algunos ejemplos de como utilizar este método:</strong></span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><span style="color: #990000;"><strong><script><br />
var numero = -123.51;<br />
var numero_round = numero.round();<br />
alert(numero_round);</strong> <span style="color: black;">--> -124</span></span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><span style="color: #990000;"><strong></script></strong></span></span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><strong>Podríamos utilizarlo en combinación con otros métodos:</strong></span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><span style="color: #990000;"><strong><script><br />
var numero = -123.51;<br />
var numero_round = numero.ceil().abs().round();<br />
alert(numero_round);</strong> <span style="color: black;">--> 123</span></span></span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="160"><span style="color: #990000;"><strong></script></strong></span></span></div>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-7614800988309830412011-11-02T12:43:00.009-03:002011-11-02T12:43:00.481-03:00MÉTODO Floor<div style="text-align: justify;">El método Floor() de Prototype d<span class="hps" closure_uid_7gxzl="140">evuelve el mayor</span> <span class="hps" closure_uid_7gxzl="141">entero menor o</span> <span class="hps" closure_uid_7gxzl="142">igual al número dado</span><span class="" closure_uid_7gxzl="143">. El número dado puede ser positivo, negativo o decimal.</span><br />
<br />
<div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="108"><strong><span style="color: #990000;">-123.ceil();</span></strong> --> -123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="108"><strong><span style="color: #990000;">123.ceil();</span></strong> -- 123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="108"><strong><span style="color: #990000;">-123.56.ceil();</span></strong> --> -124</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="108"><strong><span style="color: #990000;">123.56.ceil();</span></strong> --> 123</span><br />
<br />
<strong>Veamos algunos ejemplos de como utilizar este método:</strong><br />
<br />
<span style="color: #990000;"><strong><script><br />
var numero = -123.56;<br />
var numero_floor = numero.floor();<br />
alert(numero_floor);</strong> <span style="color: black;">--> -124</span><strong></script></strong></span><br />
<br />
<strong>También podríamos utilizarlo en combinación con otros métodos:</strong><br />
<br />
<span style="color: #990000;"><strong><script><br />
var numero = -123.56;<br />
var numero_floor = numero.abs().floor();<br />
alert(numero_floor);</strong> <span style="color: black;">--> 123</span><strong></script></strong></span></div></div>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-92155615653886652282011-10-31T12:31:00.027-03:002011-10-31T12:31:00.536-03:00MÉTODO Ceil<div style="text-align: justify;">El método Ceil() de Prototype d<span class="hps" closure_uid_7gxzl="106">evuelve el menor entero</span> <span class="hps" closure_uid_7gxzl="107">mayor o igual</span> <span class="hps" closure_uid_7gxzl="108">al número dado. El número dado puede ser positivo o negativo y puede contener decimales.</span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="108"><strong><span style="color: #990000;">-123.ceil();</span></strong> --> -123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="108"><strong><span style="color: #990000;">123.ceil();</span></strong> -- 123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="108"><strong><span style="color: #990000;">-123.56.ceil();</span></strong> --> -123</span></div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="108"><strong><span style="color: #990000;">123.56.ceil();</span></strong> --> 124</span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="hps" closure_uid_7gxzl="108"><strong>Veamos algunos ejemplos de como utilizar este método:</strong></span></div><br />
<span class="hps" closure_uid_7gxzl="108"><span style="color: #990000;"><strong><script><br />
var numero = -123.8;<br />
var numero_ceil = numero.ceil();<br />
alert(numero_ceil);</strong> <span style="color: black;">--> -123</span><br />
<strong></script></strong></span></span><br />
<br />
<span class="hps" closure_uid_7gxzl="108"><strong><span style="color: black;">También podríamos utilizarlo en combinación con otros métodos:</span></strong></span><br />
<br />
<span class="hps" closure_uid_7gxzl="108"><span style="color: #990000;"><strong><script><br />
var numero = -123.8;<br />
var numero_ceil = numero.abs().ceil();<br />
alert(numero_ceil);</strong> <span style="color: black;">-->124</span><strong></script></strong></span></span>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-63383599454491976892011-10-29T12:08:00.021-03:002011-10-29T12:08:00.517-03:00MÉTODO Abs<div style="text-align: justify;">El método Abs() de Prototype devuelve el valor absoluto de un número dado.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;">123.abs()</span></strong> --> 123</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span style="color: #990000;"><strong>-123.abs()</strong></span> --> 123</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong>Veamos un ejemplo de como utilizar este método:</strong></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span style="color: #990000;"><strong><script><br />
var numero = -123;<br />
var valor_absoluto_numero = numero.abs();<br />
alert(valor_absoluto_numero);</strong> <span style="color: black;">--> 123</span></span></div><div style="text-align: justify;"><span style="color: #990000;"><strong></script></strong></span></div><div style="text-align: justify;"><strong><span style="color: #990000;"></span></strong><br />
<strong>También podríamos utilizarla de la siguiente manera:</strong></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span style="color: #990000;"><strong><script><br />
var numero1 = -123;<br />
var numero2 = 123;<br />
var suma = numero1.abs() + numero2.abs();<br />
alert(suma);</strong> <span style="color: black;">--> 246</span></span></div><div style="text-align: justify;"><span style="color: #990000;"><strong></script></strong></span></div>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-62961750146304351232011-10-27T11:53:00.024-03:002011-10-27T11:53:00.638-03:00MÉTODO Empty<div style="text-align: justify;">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.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;">''.empty();</span></strong> --> true</div><div style="text-align: justify;"><br />
<strong><span style="color: #990000;">' '.empty();</span></strong> --> false<br />
</div><div style="text-align: justify;"> <strong><span style="color: #990000;">'a'.empty();</span></strong> --> false</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;">' 12 '.empty();</span></strong> --> false</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong>Veamos un ejemplo de como utilizar este método</strong></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;"><script><br />
function comprobar(){<br />
if ($('textbox').value.empty())<br />
alert ('caja vacía');<br />
else<br />
alert ('caja con texto');<br />
}</span></strong></div><div style="text-align: justify;"><strong><span style="color: #990000;"></script></span></strong></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;"><body><br />
<input type="text" id="textbox"><br />
<input type="button" value="Comprobar" onclick="comprobar()"><br />
</body></span></strong></div>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-9837985823398334972011-10-25T10:57:00.031-03:002011-10-25T10:57:00.510-03:00MÉTODO Dasherize<div style="text-align: justify;">El método Dasherize() de Prototype reemplaza cualquier caracter <strong>"_"</strong> (guión bajo) existente en una cadena por <strong>"-"</strong> (dash o guión medio).</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;">'border_bottom_width'.dasherize();</span></strong> --> 'border-bottom-width'</div><div style="text-align: justify;"><br />
<strong>Veamos un ejemplo de como utilizar este método:</strong></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span style="color: #990000;"><strong><script><br />
var texto = "frase_separada_por_guiones";<br />
var texto_dashes = texto.dasherize();<br />
alert(texto_dashes); </strong><span style="color: black;">-->frase-separa-por-guiones</span><br />
<strong></script></strong></span></div><div style="text-align: justify;"><span style="color: #990000;"><strong><br />
</strong></span>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.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;">"_casa _nueva".dasherize();</span></strong> --> "-casa -nueva"</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;">"_casa ____nueva".dasherize();</span></strong> --> "-casa -----nueva"</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;">"_______________".dasherize();</span></strong> --> "------------------"</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><strong><span style="color: #990000;">"casa nueva ___".dasherize();</span></strong> --> "casa nueva ---"</div>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-81790903767160420732011-10-23T15:56:00.022-03:002011-10-23T15:56:00.357-03:00MÉTODO Blank<div style="text-align: justify;">El método Blank() de Prototype se utiliza para <span class="" id="result_box" lang="es"><span class="hps">comprobar si</span> una<span class="hps atn"> cadena de texto esta " en </span>blanco" <span class="hps"></span> <span class="hps">es decir que está vacía</span> <span class="hps">(longitud</span> <span class="hps">de 0)</span> <span class="hps">o</span> <span class="hps">que sólo contiene</span> <span class="hps">espacios en blanco. Blank devuelve true en caso de hallar vacía la cadena y false en caso contrario.</span></span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">"".blank();</b> --> true</span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">" ".blank();</b> --> true</span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">" a " .blank()</b> --> false</span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><br />
</span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b>Veamos como utilizar este método: por ejemplo verifiquemos si una caja de texto (textbox) tiene o no contenido:</b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><br />
</span></span></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps"><script></span></span></b></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps">function comprobar(){<br />
if ($('textbox').value.blank())<br />
alert ('caja vacía');<br />
else<br />
alert ('caja con texto'); <br />
}</span></span></b></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps"></script></span></span></b></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps"><br />
</span></span></b></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps"><br />
</span></span></b></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps"><body></span></span></b></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps"> <input type="text" id="textbox"><br />
<input type="button" value="Comprobar" onclick="comprobar()"></span></span></b></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;"></body></b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><br />
</span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps">Pudes ver más detalles de este método en <a href="http://api.prototypejs.org/language/String/prototype/blank/" target="_blank">este link</a></span></span></div>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-12534361174646597942011-10-21T15:24:00.026-03:002011-10-21T15:24:00.714-03:00MÉTODO Camelize<div style="text-align: justify;">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).</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><b style="color: #990000;">'background-color'.camelize();</b> -> 'backgroundColor'</div><div style="text-align: justify;"><br />
<b style="color: #990000;">'-moz-binding'.camelize(); </b> -> 'MozBinding' </div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><b>Veamos un ejemplo de como utilizar este método:</b></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"></div><div style="color: #990000; text-align: justify;"><b><script></b></div><div style="color: #990000;"><b> var texto = "la-casa-del-lago";</b></div><div style="color: #990000;"><b> var texto_camelizado = texto.camelize();</b></div><div style="color: #990000;"><b> alert (texto_camelizado); </b><span style="color: black;">-->laCasaDelLago</span><br />
<b> });<br />
</script></b></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><b>Otra manera en que podríamos utilizarlo sería:</b></div><div style="text-align: justify;"><br />
</div><div style="color: #990000; text-align: justify;"><b><script></b></div><div style="color: #990000; text-align: justify;"><b> var texto = $w('casa-pequeña auto-grande avión-alto barco-largo').each(function(transporte){<br />
alert (transporte.camelize());</b><span style="color: black;"> -->casaPequeña autoGrande aviónAlto barcoLargo</span><b> <br />
});<br />
</script></b></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Para ver más detalles acerca de este método haz <a href="http://api.prototypejs.org/language/String/prototype/camelize/" target="_blank">clic aquí</a></div>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-36419256326223341572011-10-19T12:37:00.086-03:002011-10-19T12:37:00.804-03:00MÉTODO Capitalize<div style="text-align: justify;">El método Capitalize() de Prototype actúa sobre una cadena de texto transformando en m<span class="" id="result_box" lang="es"><span class="hps">ayúscula la primer letra</span> <span class="hps">de la cadena y</span> <span class="hps">en minúsculas</span> <span class="hps">todas las demás.</span></span><br />
<br />
</div><div style="text-align: justify;"></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps">"hola".capitalize(); </span></span></b><span class="" id="result_box" lang="es" style="color: black;"><span class="hps">--> Hola</span></span></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps"></span></span></b></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps">"HOLA MUNDO".capitalize() </span></span></b><span class="" id="result_box" lang="es" style="color: black;"><span class="hps">--> Hola mundo</span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><br />
</span></span></div><div style="text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps">Veamos un ejemplo de como usar este método:</span></span></b><br />
<br />
</div><div style="text-align: justify;"></div><div style="color: #990000; text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps"><script><br />
var texto = "CAPITALIZAR ESTA CADENA";<br />
var texto_capitalizado = texto.capitalize();<br />
alert(texto_capitalizado);</span></span></b><span class="" id="result_box" lang="es"><span class="hps"><span style="color: black;"> --> Capitalizar esta cadena</span></span></span><b><span class="" id="result_box" lang="es"><span class="hps"></script></span></span></b></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b><br />
Otra forma podría se esta:</b></span></span><br />
<span class="" id="result_box" lang="es"><span class="hps"><b> </b></span></span></div><b style="color: #990000;"><script><br />
var texto = $w('casa auto avión barco').each(function(transporte){<br />
alert (transporte.capitalize()); </b><span style="color: #990000;"><span style="color: black;">--> Casa Auto Avión Barco</span></span><b style="color: #990000;"> });<br />
</script></b><br />
<br />
<br />
<span style="font-size: small;"><span style="font-weight: normal;">En <a href="http://api.prototypejs.org/language/String/prototype/capitalize/" target="_blank">este link</a> hallarás más información acerca de este método</span></span>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-21922267501041833542011-10-17T11:42:00.054-03:002011-10-17T11:42:01.042-03:00FUNCIÓN $W<div style="text-align: justify;">La función $W de Prototype <span class="" id="result_box" lang="es"><span class="hps">convierte una cadena de texto en</span> <span class="hps">una matriz o array</span>, tratando a todos <span class="hps">los espacios en blanco</span> <span class="hps">como delimitadores y reemplazandolos por comas. No importa la cantidad de espacios en blanco que haya entre las palabras, se cuentan como uno y se reemplazan por una coma.</span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><br />
</span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">$w('fruitillas manzanas peras bananas')</b> --> ['fruitillas','manzanas','peras','bananas']</span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><br />
</span></span></div><div style="text-align: justify;"><b><span class="" id="result_box" lang="es"><span class="hps">Conociendo la sintáxis de $W, veamos algunos ejemplos:</span></span></b></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><br />
</span></span></div><div style="text-align: justify;"><b style="color: #990000;"><span class="" id="result_box" lang="es"><span class="hps"><script> </span></span></b></div><div style="text-align: justify;"><b style="color: #990000;"><span class="" id="result_box" lang="es"><span class="hps">var frutas = </span></span></b><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">$w('fruitillas manzanas peras bananas');</b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">alert (frutas[1]) </b><span style="color: black;">--> manzanas</span></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;"></script></b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;"><br />
</b></span></span></div><div style="color: black; text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b>Puedo aplicar el método each a $W de la siguiente manera:</b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;"><br />
</b></span></span></div><div style="text-align: justify;"><b style="color: #990000;"><span class="" id="result_box" lang="es"><span class="hps"><script> <br />
</span></span></b></div><div style="text-align: justify;"><b style="color: #990000;"><span class="" id="result_box" lang="es"><span class="hps"></span></span></b><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">$w('fruitillas manzanas peras bananas').each(function(frutas){</b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">alert (frutas)</b></span></span><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;"> ;</b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;"></b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">});</b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;"></script></b></span></span></div><div style="text-align: justify;"><br />
</div><div style="color: black; text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b>También podría utilizarla de esta manera:</b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;"> </b></span></span></div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;"> $w('</b></span></span><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">fruitillas manzanas peras bananas</b></span></span><span class="" id="result_box" lang="es"><span class="hps"><b style="color: #990000;">').each(Element.hide);</b></span></span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><span style="color: #990000;"><span style="color: black;">En definitiva $W nos permite crear un array sin preocuparnos por las comillas y las comas que deberíamos escribir en la construcción tradicional de un arreglo. Con $W es suficiente escribir los valores separados por un espacios y listo.</span></span></span></span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span class="" id="result_box" lang="es"><span class="hps"><span style="color: #990000;"><span style="color: black;">Si quieres conocer más detalles acerca de $w <a href="http://api.prototypejs.org/language/dollar-w/" target="_blank">visita este link </a></span></span><b style="color: #990000;"> </b></span></span></div>Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-62088183800535740522011-10-15T00:48:00.080-03:002014-07-14T10:07:52.196-03:00MÉTODO Insert<div style="text-align: justify;">
El método Insert de Prototype permite insertar contenido a un elemento dado (por ejemplo un DIV). Si el elemento no contiene contenido insert actualizará el elemento. Si el elemento ya tiene contenido insert le agregará el contenido pudiendo indicarle si debe hacerlo por encima o por debajo del contenido existente. Insert permite la inserción de cadenas de texto, cadenas HTML o cualquier elemento del DOM.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Opciones de Insert:</b></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<b>Top:</b> Inserta el contenido indicado dentro del elemento por encima del contenido existente.</div>
<div style="text-align: justify;">
<b>Bottom:</b> Inserta el contenido indicado dentro del elemento por debajo del contenido existente.</div>
<div style="text-align: justify;">
<b>After:</b> Inserta el contenido debajo del elemento</div>
<div style="text-align: justify;">
<b>Before: </b>Inserta el contenido por encima del elemento</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Veamos algunos ejemplos para comprender mejor este método. Supongamos este contenido en nuestra página web, un div con id=caja con los estilos convenientes.</div>
<div style="text-align: justify;">
<br /></div>
<div style="color: #990000; text-align: justify;">
<b><body></b></div>
<div style="color: #990000; text-align: justify;">
<b> <div id="caja"></div> </b></div>
<div style="color: #990000; text-align: justify;">
<b></body></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Usando el método insert puedo puedo agregarle contenido HTML de la siguiente manera:</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="color: #990000; text-align: justify;">
<b><script></b></div>
<div style="color: #990000; text-align: justify;">
<b> $('caja').insert("<p>Nuevo contenido para caja</p>");</b></div>
<div style="color: #990000; text-align: justify;">
<b></script></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Es posible insertar un elemento del DOM nuevo: </b>en este caso insertamos la etiqueta img y le asignamos la imagen logo.png con un ancho de 100. Top le indica a insert que si existe contenido en 'caja' la imagen la coloque encima de éste.</div>
<div style="text-align: justify;">
<br /></div>
<div style="color: #990000; text-align: justify;">
<b><script></b></div>
<div style="color: #990000; text-align: justify;">
<b> $('caja').insert({ top: new Element('img', {src: 'logo.png', width: '100'})});</b></div>
<div style="color: #990000; text-align: justify;">
<b></script></b></div>
<div style="color: #990000; text-align: justify;">
<br /></div>
<div style="color: #990000; text-align: justify;">
<b> </b><span style="color: black;">Si querés conocer más detalles acerca de este método <a href="http://api.prototypejs.org/dom/Element/insert/" target="_blank">pulsá aquí</a></span><br />
<br />
<div style="text-align: justify;">
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=30" target="_blank">Ver ejemplo</a>
</div>
</div>
Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0tag:blogger.com,1999:blog-197725359132278745.post-23441954237896654802011-10-13T23:56:00.019-03:002014-07-14T10:06:18.266-03:00Tabla con CSS<div style="text-align: justify;">
La idea de este ejercicio fue generar una tabla sin utilizar la etiqueta <table> de HTML. Dado la complejidad que representa el uso de esta etiqueta a la hora de dar formato.</div>
<br />
<div style="text-align: justify;">
En este caso utilizamos etiquetas DIV y puro CSS para construir una tabla, lo que la hace totalmente configurable en tamaño, color, fuentes, overflow, etc. Además la tabla esta contenida por un DIV lo que la hace fácil de incorporar. Ideal para generar contenido server-side.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Incorporamos un poco de Prototype para generar un cambio de color en la fila al momento de pasar el mouse por encima de ella.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOzXtksoaySkiNpqigYSTeb-YJ9yns1AJRHqJwLUqgLOgTtiPcZ_CLHTS33TqK_BpEsv94HkqcOnynxShdmd3oNXj1P64OIlT4o9-ec-q_TADKZ2c8-T7muNX6a6IA5zMWWf8BF1KqMkCM/s1600/tabla_con_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOzXtksoaySkiNpqigYSTeb-YJ9yns1AJRHqJwLUqgLOgTtiPcZ_CLHTS33TqK_BpEsv94HkqcOnynxShdmd3oNXj1P64OIlT4o9-ec-q_TADKZ2c8-T7muNX6a6IA5zMWWf8BF1KqMkCM/s1600/tabla_con_css.jpg" /> </a></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<a href="http://www.tecnoiris.com.ar/prototype/index.php?mostrar=29" target="_blank">Ver ejemplo</a>
</div>
Alfredohttp://www.blogger.com/profile/08255068848813697130noreply@blogger.com0