<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Otro Blog Más &#187; javascript</title>
	<atom:link href="http://otroblogmas.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://otroblogmas.com</link>
	<description>Blog de informática: programación, internet, php, wordpress, zend framework, mysql, windows, mootools, linux,...</description>
	<lastBuildDate>Tue, 07 Sep 2010 10:10:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</title>
		<link>http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/</link>
		<comments>http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/#comments</comments>
		<pubDate>Sat, 29 Aug 2009 07:00:38 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=293</guid>
		<description><![CDATA[Para el trabajo, tuve que hacer una presentación sobre Mootools, en la cual, hice una pequeña introducción a JavaScript, que era un framework y porque elegir Mootools de entre los diferentes y famosos frameworks hechos para JavaScript. Como era para compañeros de trabajo, la presentación esta hecha un poco informal, y con trozos código para [...]


Entradas relacionadas:<ol><li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Permanent Link: Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Permanent Link: Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Permanent Link: Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignright size-full wp-image-300" title="Mootools logo" src="http://otroblogmas.com/wp-content/uploads/2009/08/mootools-logo.png" alt="Mootools logo" width="213" height="70" />Para el trabajo, tuve que hacer una <strong>presentación sobre Mootools</strong>, en la cual, hice una pequeña <strong>introducción a <a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Posts tagged with javascript">JavaScript</a></strong>, <strong>que era un framework</strong> y <strong>porque elegir Mootools</strong> de entre los diferentes y famosos frameworks hechos para <a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Posts tagged with javascript">JavaScript</a>.</p>
<p style="text-align: justify;">Como era para compañeros de trabajo, la presentación esta hecha un <em>poco informal</em>, y <strong>con trozos código</strong> para poder ver Mootools en funcionamiento y sus ventajas.</p>
<p style="text-align: justify;"><span id="more-293"></span>Os dejo la presentación que esta publicada en <a href="http://www.slideshare.net/ianmonge/mootools-y-otros-frameworks-js">SlideShare</a>.</p>
<div style="width: 520px; text-align: left;"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" title="Mootools Y Otros Frameworks JS" href="http://www.slideshare.net/ianmonge/mootools-y-otros-frameworks-js">Mootools Y Otros Frameworks JS</a><object style="margin:0px" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="520" height="434" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=mootoolsyotrosframeworksjs-090317143114-phpapp01&amp;rel=0&amp;stripped_title=mootools-y-otros-frameworks-js" /><param name="allowfullscreen" value="true" /><embed style="margin:0px" type="application/x-shockwave-flash" width="520" height="434" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=mootoolsyotrosframeworksjs-090317143114-phpapp01&amp;rel=0&amp;stripped_title=mootools-y-otros-frameworks-js" allowscriptaccess="always" allowfullscreen="true"></embed></object></div>
<div id="__ss_1159372" style="width: 520px; text-align: left;">
<div style="font-size: 11px; font-family: tahoma,arial; height: 26px; padding-top: 2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">presentations</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/ianmonge">ianmonge</a>.</div>
</div>


<p>Entradas relacionadas:</p><ol><li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Permanent Link: Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Permanent Link: Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Permanent Link: Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Clase &#8216;Two Lists&#8217; en Mootools</title>
		<link>http://otroblogmas.com/clase-two-lists-en-mootools/</link>
		<comments>http://otroblogmas.com/clase-two-lists-en-mootools/#comments</comments>
		<pubDate>Sun, 23 Aug 2009 07:00:34 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=175</guid>
		<description><![CDATA[Clase en Mootools para hacer interactivas dos listas. Con dos elementos html SELECT y dos INPUT, permite pasar los items (OPTION) de una lista a otra, de la forma asignar o liberar. Ejemplo: lista con jugadores y lista con jugadores asignados al equipo; poder asignar los jugadores al equipo o liberarlos del equipo. Clase mejorable, [...]


Entradas relacionadas:<ol><li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Permanent Link: Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Permanent Link: Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Permanent Link: Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignright size-full wp-image-300" title="Mootools logo" src="http://otroblogmas.com/wp-content/uploads/2009/08/mootools-logo.png" alt="Mootools logo" width="213" height="70" />Clase en Mootools para <strong>hacer interactivas dos listas</strong>. Con dos elementos html <em>SELECT </em>y dos <em>INPUT</em>, permite pasar los items (<em>OPTION</em>) de una lista a otra, de la forma asignar o liberar. <strong>Ejemplo</strong>: lista con jugadores y lista con jugadores asignados al equipo; poder asignar los jugadores al equipo o liberarlos del equipo.</p>
<p style="text-align: justify;"><span id="more-175"></span>Clase <em>mejorable</em>, es bastante básica y fácil de entender. <strong>Requiere la <a href="http://otroblogmas.com/funcion-remove-para-array-de-javascript">modificación de la función nativa REMOVE</a> en Arrays de <a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Posts tagged with javascript">Javascript</a></strong>.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//******************************************************************************</span>
<span style="color: #006600; font-style: italic;">// Función nativa de Javascript que se ha modificado por otra.</span>
<span style="color: #006600; font-style: italic;">// Elimina un (o mas) elemento(s) de un array:</span>
Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">remove</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>from<span style="color: #339933;">,</span> to<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> rest <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>to <span style="color: #339933;">||</span> from<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> from <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">?</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">+</span> from <span style="color: #339933;">:</span> from<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">push</span>.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> rest<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//******************************************************************************</span>
&nbsp;
<span style="color: #006600; font-style: italic;">/*
 * 		Clase Two_lists
 *
 * 		Permite que interactuen 2 elementos SELECT y 2 elementos INPUT del TYPE=BUTTON, para que
 * 		que los elementos OPTION de dentro de los SELECT, puedan moverse de un SELECT a otro.
 * 		Para hacer el movimiento, se selecciona el OPTION y se pulsa el botón correspondiente.
 * 		También se puede hacer seleccionando múltiples OPTIONs con las teclas Ctrl o Shift, siempre
 * 		que el SELECT tenga MULTIPLE=MULTIPLE. Para mover uno de manera más práctica, haciendo doble
 * 		click también se moverá de SELECT.
 *
 * 		Para instanciar la clase, hay que pasar cuatro parámetros :
 * 		* El primer SELECT
 * 		* El segundo SELECT
 * 		* El INPUT que mueve del primer SELECT al segundo
 * 		* El INPUT que mueve del segundo SELECT al primero
 *
 * 		La clase posee cuatro funciones a parte de la constructora:
 * 		* moveOptionToSelect2 (option)
 * 			Mueve el option a nivel interno, es decir, en las 2 arrays internas con los datos de todos
 * 			los OPTIONS, mueve el item referenciado al option de un array al otro, y después elimina el
 * 			option del HTML.
 * 		* moveOptionToSelect1 (option)
 * 			Idem anterior, pero en el otro sentido.
 * 		* updateSelect1 ()
 * 			Actualiza los OPTIONs del primer SELECT, según el array interno referenciado a ese SELECT.
 * 			Vacía el SELECT, y lo rellena creando los OPTIONS con sus datos.
 * 		* updateSelect2 ()
 * 			Idem anteior, pero en el segundo SELECT.
 *
 */</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> Two_lists <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
	Implements<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>Options<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
&nbsp;
	select1 <span style="color: #339933;">:</span> 	<span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
	select2 <span style="color: #339933;">:</span> 	<span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
	asignar <span style="color: #339933;">:</span>	<span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
	liberar <span style="color: #339933;">:</span>	<span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>
	options1 <span style="color: #339933;">:</span> 	<span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>		<span style="color: #006600; font-style: italic;">// Array interno con los datos de los OPTIONs del primer SELECT</span>
	options2 <span style="color: #339933;">:</span> 	<span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>		<span style="color: #006600; font-style: italic;">// Array interno con los datos de los OPTIONs del segundo SELECT</span>
&nbsp;
	options<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// INITIALIZE</span>
	<span style="color: #006600; font-style: italic;">//	Función constructora. Requiere por parámetros los dos elementos SELECTs del HTML, y los</span>
	<span style="color: #006600; font-style: italic;">//	dos INPUTs que interactuarán en la clase.</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	initialize<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>select1<span style="color: #339933;">,</span> select2<span style="color: #339933;">,</span> asignar<span style="color: #339933;">,</span> liberar<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select1</span> <span style="color: #339933;">=</span> select1<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select2</span> <span style="color: #339933;">=</span> select2<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">asignar</span> <span style="color: #339933;">=</span> asignar<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">liberar</span> <span style="color: #339933;">=</span> liberar<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//generar el array con todos los options del select1</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select1</span>.<span style="color: #660066;">getElements</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			self.<span style="color: #660066;">options1</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #3366CC;">'id'</span> <span style="color: #339933;">:</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'name'</span> <span style="color: #339933;">:</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'html'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'state'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//generar el array con todos los options del select2</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select2</span>.<span style="color: #660066;">getElements</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			self.<span style="color: #660066;">options2</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #3366CC;">'id'</span> <span style="color: #339933;">:</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'name'</span> <span style="color: #339933;">:</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'html'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'state'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//crea el evento de asignar para el botón</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">asignar</span>.<span style="color: #660066;">addEvent</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> options_selected <span style="color: #339933;">=</span> self.<span style="color: #660066;">select1</span>.<span style="color: #660066;">getElements</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">return</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'selected'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			options_selected.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				self.<span style="color: #660066;">moveOptionToSelect2</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			self.<span style="color: #660066;">updateSelect2</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//crea el evento de liberar para el botón</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">liberar</span>.<span style="color: #660066;">addEvent</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> options_selected <span style="color: #339933;">=</span> self.<span style="color: #660066;">select2</span>.<span style="color: #660066;">getElements</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">return</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'selected'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			options_selected.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				self.<span style="color: #660066;">moveOptionToSelect1</span><span style="color: #009900;">&#40;</span>option<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			self.<span style="color: #660066;">updateSelect1</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//crea el evento de asignar para el doble click en el option</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select1</span>.<span style="color: #660066;">addEvent</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dblclick'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			self.<span style="color: #660066;">asignar</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">//crea el evento de asignar para el doble click en el option</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select2</span>.<span style="color: #660066;">addEvent</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dblclick'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			self.<span style="color: #660066;">liberar</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>   
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// MOVE OPTION TO SELECT2</span>
	<span style="color: #006600; font-style: italic;">//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	moveOptionToSelect2 <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> option <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// calcula la posición donde se encuentra el option en el array de options del select original</span>
		<span style="color: #003366; font-weight: bold;">var</span> position<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				position <span style="color: #339933;">=</span> index<span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// hace el intercambio en los arrays</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span><span style="color: #009900;">&#91;</span>position<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span>position<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// borra el option del select original</span>
		option.<span style="color: #660066;">destroy</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// MOVE OPTION TO SELECT1</span>
	<span style="color: #006600; font-style: italic;">//	Realiza el moviento de los items en las arrays internas, y elimina el OPTION del HTML</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	moveOptionToSelect1 <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> option <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// calcula la posición donde se encuentra el option en el array de options del select original</span>
		<span style="color: #003366; font-weight: bold;">var</span> position<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span>.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> option.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				position <span style="color: #339933;">=</span> index<span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// hace el intercambio en los arrays</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span><span style="color: #009900;">&#91;</span>position<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span>position<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// borra el option del select original</span>
		option.<span style="color: #660066;">destroy</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>		
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// UPDATE SELECT1</span>
	<span style="color: #006600; font-style: italic;">//	Vacía el primer SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	updateSelect1 <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// borra los options del select de destino, y lo regera según el array</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select1</span>.<span style="color: #660066;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options1</span>.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">state</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				op <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #3366CC;">'id'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'dominio-'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span><span style="color: #339933;">,</span>
					<span style="color: #3366CC;">'value'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span><span style="color: #339933;">,</span>
					<span style="color: #3366CC;">'html'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				op.<span style="color: #660066;">inject</span><span style="color: #009900;">&#40;</span>self.<span style="color: #660066;">select1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	<span style="color: #006600; font-style: italic;">// UPDATE TO SELECT2</span>
	<span style="color: #006600; font-style: italic;">//	Vacía el segundo SELECT de todos los OPTIONs, y los vuelve a crear según el array interno.</span>
	<span style="color: #006600; font-style: italic;">//***********************************</span>
	updateSelect2 <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// guarda el objeto implícito para dentro de las funciones</span>
		<span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// borra los options del select de destino, y lo regera según el array</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">select2</span>.<span style="color: #660066;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options2</span>.<span style="color: #660066;">each</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			op <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'option'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
			    <span style="color: #3366CC;">'id'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'dominio-'</span><span style="color: #339933;">+</span><span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span><span style="color: #339933;">,</span>
			    <span style="color: #3366CC;">'value'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">id</span><span style="color: #339933;">,</span>
			    <span style="color: #3366CC;">'html'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #000066;">name</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			op.<span style="color: #660066;">inject</span><span style="color: #009900;">&#40;</span>self.<span style="color: #660066;">select2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>Entradas relacionadas:</p><ol><li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Permanent Link: Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Permanent Link: Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Permanent Link: Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/clase-two-lists-en-mootools/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Función REMOVE para Array de Javascript</title>
		<link>http://otroblogmas.com/funcion-remove-para-array-de-javascript/</link>
		<comments>http://otroblogmas.com/funcion-remove-para-array-de-javascript/#comments</comments>
		<pubDate>Sat, 22 Aug 2009 07:00:36 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=179</guid>
		<description><![CDATA[Función para eliminar un elemento o un grupo de elementos de un array en Javascript. // Array Remove - By John Resig (MIT Licensed) Array.prototype.remove = function&#40;from, to&#41; &#123; var rest = this.slice&#40;&#40;to &#124;&#124; from&#41; + 1 &#124;&#124; this.length&#41;; this.length = from &#38;lt; 0 ? this.length + from : from; return this.push.apply&#40;this, rest&#41;; &#125;; Visto [...]


Entradas relacionadas:<ol><li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Permanent Link: Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Permanent Link: Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
<li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Permanent Link: Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Función para <strong>eliminar un elemento o un grupo de elementos de un array</strong> en <a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Posts tagged with javascript">Javascript</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// Array Remove - By John Resig (MIT Licensed)</span>
Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">remove</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>from<span style="color: #339933;">,</span> to<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> rest <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>to <span style="color: #339933;">||</span> from<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> from <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">?</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">+</span> from <span style="color: #339933;">:</span> from<span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">push</span>.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> rest<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p style="text-align: justify;">Visto en <a href="http://ejohn.org/blog/javascript-array-remove/">John Resig</a>, donde también esta el código para sobreescribir la función nativa a <a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Posts tagged with javascript">Javascript</a>.</p>


<p>Entradas relacionadas:</p><ol><li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Permanent Link: Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Permanent Link: Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
<li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Permanent Link: Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/funcion-remove-para-array-de-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Detectar la tecla de borrar en Mootools</title>
		<link>http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/</link>
		<comments>http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/#comments</comments>
		<pubDate>Thu, 20 Aug 2009 10:01:35 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=160</guid>
		<description><![CDATA[Como la palabra delete es una palabra reservada, no se puede utilizar la siguiente sentencia para detectar el evento de cuando se pulsa la tecla de borrar o retroceso: var isdel = Event.Keys.delete; Cuando hacemos un detector de teclas pulsadas en Mootools, para el evento de la tecla de retroceso hay que utilizar el siguiente [...]


Entradas relacionadas:<ol><li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Permanent Link: Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Permanent Link: Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Permanent Link: Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignright size-full wp-image-163" title="Tecla retroceso" src="http://otroblogmas.com/wp-content/uploads/2009/08/backspace_key.jpg" alt="Tecla retroceso" width="133" height="74" />Como la palabra <em>delete</em> es una <strong>palabra reservada</strong>, no se puede utilizar la siguiente sentencia para detectar el <strong>evento de cuando se pulsa la tecla de borrar</strong> o retroceso:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> isdel <span style="color: #339933;">=</span> Event.<span style="color: #660066;">Keys</span>.<span style="color: #000066; font-weight: bold;">delete</span><span style="color: #339933;">;</span></pre></div></div>

<p style="text-align: justify;">Cuando hacemos un <strong>detector de teclas pulsadas en Mootools</strong>, para el evento de la tecla de retroceso hay que utilizar el siguiente método:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> isdel <span style="color: #339933;">=</span> Event.<span style="color: #660066;">Keys</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'delete'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Visto en <a href="http://davidwalsh.name/listen-delete-key-mootools">david walsh blog</a>.</p>


<p>Entradas relacionadas:</p><ol><li><a href='http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/' rel='bookmark' title='Permanent Link: Efecto con Mootools para subir el scroll de la página hasta arriba'>Efecto con Mootools para subir el scroll de la página hasta arriba</a></li>
<li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Permanent Link: Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Permanent Link: Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Efecto con Mootools para subir el scroll de la página hasta arriba</title>
		<link>http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/</link>
		<comments>http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/#comments</comments>
		<pubDate>Sun, 16 Aug 2009 15:51:28 +0000</pubDate>
		<dc:creator>otroblogmas.com</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://otroblogmas.com/?p=154</guid>
		<description><![CDATA[Pequeño trozo de código Javascript, que permite añadir un evento a los elementos que queramos, que produce un efecto de subir el scroll del navegador hasta arriba la página web. Muy práctico para los típicos enlaces &#8216;Subir&#8216; o &#8216;Arriba&#8216;, que hay en páginas muy largas. Esta hecho para trabajar con Mootools, y el plugin Fx.Scroll [...]


Entradas relacionadas:<ol><li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Permanent Link: Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Permanent Link: Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Permanent Link: Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="alignright size-full wp-image-300" title="Mootools logo" src="http://otroblogmas.com/wp-content/uploads/2009/08/mootools-logo.png" alt="Mootools logo" width="213" height="70" />Pequeño trozo de código <strong><a href="http://otroblogmas.com/tag/javascript/" class="st_tag internal_tag" rel="tag" title="Posts tagged with javascript">Javascript</a></strong>, que permite añadir un evento a los elementos que queramos, que produce un <strong>efecto de subir el scroll del navegador</strong> hasta arriba la página web. Muy práctico para los típicos enlaces &#8216;<em>Subir</em>&#8216; o &#8216;<em>Arriba</em>&#8216;, que hay en páginas muy largas.</p>
<p style="text-align: justify;">Esta hecho para trabajar con <a href="http://mootools.net/">Mootools</a>, y el plugin <a href="http://mootools.net/docs/more/Fx/Fx.Scroll">Fx.Scroll</a> de Mootools que viene a parte en el <a href="http://mootools.net/more">More Builder</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #003366; font-weight: bold;">var</span> scroller <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #000066;">Scroll</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">body</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'link_to_top'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		scroller.<span style="color: #660066;">toTop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span></pre></div></div>



<p>Entradas relacionadas:</p><ol><li><a href='http://otroblogmas.com/clase-two-lists-en-mootools/' rel='bookmark' title='Permanent Link: Clase &#8216;Two Lists&#8217; en Mootools'>Clase &#8216;Two Lists&#8217; en Mootools</a></li>
<li><a href='http://otroblogmas.com/presentacion-mootools-y-otros-frameworks-javascript/' rel='bookmark' title='Permanent Link: Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;'>Presentación: &#8220;Mootools y otros frameworks JavaScript&#8221;</a></li>
<li><a href='http://otroblogmas.com/detectar-la-tecla-de-borrar-en-mootools/' rel='bookmark' title='Permanent Link: Detectar la tecla de borrar en Mootools'>Detectar la tecla de borrar en Mootools</a></li>
</ol>]]></content:encoded>
			<wfw:commentRss>http://otroblogmas.com/efecto-con-mootools-para-subir-el-scroll-de-la-pagina-hasta-arriba/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
