Traducir plugin de Mootools a JQuery

mikeyork · #1 (**permalink**) 12/12/2009, 18:36

Hola tengo un pequeño código en Mootools y lo necesito tener en JQuery
¿saben por dondé empezar?

Código:

window.addEvent('domready', function(){
			var list = $$('.left a');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:100, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						'margin-left': -1
						
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						'margin-left': 0
						
					});
				});
				
			});
		}); 



window.addEvent('domready', function(){
			var list = $$('.right a');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:100, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						'margin-left':  1
						
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						'margin-left': 0
					
					});
				});
				
			});
		}); 

    
window.addEvent('domready', function(){
			var list = $$('#hp');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:100, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						'margin-left':  3
						
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						'margin-left': 0
					
					});
				});
				
			});
		}); 

window.addEvent('domready', function(){
			var list = $$('#projects p a');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:200, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						'margin-left': 4,
						'padding-top': 5,
						'padding-bottom': 5
						
					
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						'margin-left': 0,
						'padding-top': 0,
						'padding-bottom': 0
					});
				});
				
			});
		}); 











window.addEvent('domready', function(){
			var list = $$('.cnt a');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:200, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						'color': '#fff'
						
						
						
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						'color': '#777'
						
						
					});
				});
				
			});
		}); 




window.addEvent('domready', function(){
			var list = $$('a#hplink');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:200, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						'margin-top': -60
						
						
						
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						'margin-top': -55
						
						
					});
				});
				
			});
		}); 




if (/msie/i.test (navigator.userAgent)) {
window.addEvent('domready', function(){
			var list = $$('.PrevOverlay a');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:200, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						
						'margin-left': -10
						
						
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						
						'margin-left': 0
					});
				});
				
			});
		}); 

window.addEvent('domready', function(){
			var list = $$('.NextOverlay a');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:200, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						
						
						'margin-right': -10
						
						
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						
						
						'margin-right': 0
					});
				});
				
			});
		}); 


}
else
{


window.addEvent('domready', function(){
			var list = $$('.PrevOverlay a');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:200, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						
						//'opacity': '1',
						'margin-left': -10
						
						
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						
						//'opacity': '0.001',
						'margin-left': 0
					});
				});
				
			});
		}); 

window.addEvent('domready', function(){
			var list = $$('.NextOverlay a');
			list.each(function(element) {
				
				var fx = new Fx.Styles(element, {duration:200, wait:false});
				
				element.addEvent('mouseenter', function(){
					fx.start({
						
						//'opacity': '1',
						'margin-right': -10
						
						
					});
				});
				
				element.addEvent('mouseleave', function(){
					fx.start({
						
						//'opacity': '0.001',
						'margin-right': 0
					});
				});
				
			});
		}); 



}




window.addEvent('domready', function() {
var content1 = $('horizontal_slide');
	

	var myHorizontalSlide = new Fx.Slide('horizontal_slide', {duration: 650, mode: 'horizontal'});

   //var a = 0;

//myHorizontalSlide.show().slideOut.delay(500, myHorizontalSlide);
content1.setStyle('display','block');
myHorizontalSlide.hide();



	$('h_slidein').addEvent('mouseenter', function(e){

		e.stop();

		myHorizontalSlide.slideIn();
 





	});


	$('h_slidein2').addEvent('mouseenter', function(e){

		e.stop();


		myHorizontalSlide.slideIn();



});




$('projects').addEvent('mouseleave', function(e){
		e.stop();
	

		myHorizontalSlide.slideOut();




});


});

y otro muy diminuto

Código:

window.addEvent('domready', function() {
	
	var myHorizontalSlide = new Fx.Slide('horizontal_slide', {duration: 350, mode: 'horizontal'});
	                              myHorizontalSlide.slideIn();


});

Realmente no esta muy documentado el tema así que recurro a ustedes...

GRACIAS

Si necesitan ver el CSS y el Live Demo me avisan

mayid · #2 (**permalink**) 16/12/2009, 07:17

Tenes que pensar esto como un juego de cajas chinas, una dentro de otra.

Para empezar, modificas el contenedor mayor:

Cita:

window.addEvent('domready', function(){
})

y poner el propio de jquery:

Cita:

$(document).ready(function(){
})

Luego, el each (por supuesta, tambien los selectores de html):

Cita:

list.each(function(element) {

})

Cita:

$.each(list, function(){
alert($(this));
});

Etc. Como vas?

mikeyork · #3 (**permalink**) 16/12/2009, 13:12

La verdad no tengo conocimientos ni en Mootools ni JQuery.
pero estuve viendo ejemplos de códigos "slide horizontal" y ya lo puse a trabajar:

Código:

$(document).ready(function(){

// Right Animation
    $(".NextOverlay a").mouseover(function(){
      $(this).animate({ 
        marginRight: "-10px"
      }, 220 );
    });
    
    $(".NextOverlay a").mouseout(function(){
      $(this).animate({ 
        marginRight: "0px"
      }, 220 );
    });


// Hover Animation
    $("#projects p a").mouseover(function(){
      $(this).animate({ 
        marginLeft: "4px",
        paddingTop: "5px", 
        paddingBottom: "5px"
      }, 220 );
    });
    
    $("#projects p a").mouseout(function(){
      $(this).animate({ 
        marginLeft: "0px",
        paddingTop: "0px", 
        paddingBottom: "0px"
      }, 220 );
    });
    
// Menu Animation   
     $('#horizontal_slidein').mouseleave(function() {
    var $menu = $(this);
    $menu.animate({left: parseInt($menu.css('left'),10) == 0 ? -$menu.outerWidth() : 0}, 650 );
  });
  
   $('#h_slidein.logo').mouseenter(function() {
    var $menu = $('#horizontal_slidein');
    $menu.animate({left: parseInt($menu.css('left'),10) == 0 ? -$menu.outerWidth() : 0}, 650 );
  });


});// Kill Hover animation

Bajo mi experiencia Mootools y JQuery son potentes frameworks para Javascript.
No me gustaría discriminar ninguno de ellos, pero a veces nos vamos a encontrar con este tipo de problemas al diseñar una interfáce compleja , y por supuesto la solución más elegante es utilizar solo uno (JQuery) en el mismo proyecto, tanto para reducir la carga del sitio como para un código profesional y limpio.

Ademas pensaba que Mootools era más profesional en cuanto efectos y animaciones (que es lo que adoran nuestros clientes) y que en JQuery a pesar de su excelente tamaño (Mootools v1.2.4 @78 KB vs JQuery v1.3.2 @ 55.9 KB) tenia que descargar algún plugin para complementar sus capacidad, pero no fue así, quizas todavía no exploro a cabalidad el potencial de ambos Frameworks y lo mejor es investigar y experimentar...

@mayid = Gracias por tu respuesta.
Me falta hacer unos ajustes en el CSS y de accesibilidad, pero quedo de lujo xD...

lalo1988 · #4 (**permalink**) 19/12/2009, 08:54

Lo siento por utilizar este tema para exponer mi problema, pero era para no abrir otro post muy parecido a este y creo que ya estaba solucionado.

Resulta que tengo un codigo en Mootols y me gustaria intentarlo pasarlo a JQuery ya que trabajo más con esta libreria.

El codigo es el siguiente:

Código:

var FirstTime = 0;

function LoginInit()
{
  if (FirstTime) {
    $('loginform').send();
    return false;
  } else {
    FirstTime = 1;
  }
  
  $('again').addEvent('click', function(event) {

    event.stop();
    $('error').setStyle('display', 'none');
    $('loading').setStyle('display', 'none');
    $('login').setStyle('display', 'block');

  });

  $('loginform').set('send', {

    onRequest: function() {
      $('loading').setStyle('display', 'block');
      $('login').setStyle('display', 'none');
    },
      
    onComplete: function(response) {
      $('loading').setStyle('display', 'none');
      if (response == "OK!")
      {
        document.location.href = "login.php?exito=1";
      }
      else if (response == "NO!")
      {
        $('error').setStyle('display', 'block');
      }
      else
      {
        $('login').setStyle('display', 'block');
      }
  }});


  $('loginform').send();

  return false;

};

Donde loginform,login,loading y error son ids y clases.

mayid · #5 (**permalink**) 19/12/2009, 16:31

Y cual es tu avance?

Yo lo que veo es que se trata de manejo de ajax, basicamente. Asi que te recomiendo leas esto:

http://www.cristalab.com/tutoriales/...-jquery-c226l/

Te lo va a hacer sencillo.

mikeyork · #6 (**permalink**) 31/03/2010, 14:37

de hecho quedo identico al the MooTools gracias...