JQuery zu Prototyp für AddThis

Question

Ich muss ein benutzerdefiniertes Hover-Menü von http://www.addthis.com/help/toolbox, aber Rails verwendet Prototyp, während der Code in JQuery gegeben ist. Ich habe nicht viel Erfahrung mit beiden JavaScript-Bibliothek, wenn jemand helfen kann, würde es sehr geschätzt werden!

$(function() 
{ 
    $('.custom_button, .hover_menu').mouseenter(function() 
    { 
     $('.hover_menu').fadeIn('fast'); 
     $('.custom_button').addClass('active'); 
     $(this).data('in', true); 
     $('.hover_menu').data('hidden', false); 
    }).mouseleave(function() 
    { 
     $(this).data('in', false); 
     setTimeout(hideMenu, delay); 
    }); 

    var delay = 400; 
    function hideMenu() 
    { 
     if (!$('.custom_button').data('in') && !$('.hover_menu').data('in') && !$('.hover_menu').data('hidden')) 
     { 
      $('.hover_menu').fadeOut('fast'); 
      $('.custom_button').removeClass('active'); 
      $('.hover_menu').data('hidden', true); 
     } 
    } 
}); 

Answer 1

Also, wenn Sie nicht gebunden sind, um mit Prototype nach unten und wollen stattdessen jQuery verwenden, gibt es ein Plugin jRails genannt, die für Prototype als Drop-in-Ersatz dient.

Nicht, dass es irgendetwas mit Prototype falsch ist, aber jQuery installiert zu bekommen, kann am Ende einfacher sein, als zu versuchen, es auf Prototype zu portieren. Hoffe, das hilft (Entschuldigung, wenn es nicht genau das ist, was Sie gesucht haben).

EDIT: This page hat einige gute Informationen über jQuery und Rails. Ich hoffe, das hilft.

Answer 2

Sie können Prototype durch das jRails-Plugin ersetzen. Oder Sie können auch Prototypen auf Ihre Bedürfnisse erweitern hier ist ein einfaches Beispiel eines Prototyp-Äquivalent für Daten:

Element.addMethods({ 
/** 
* Element#saveData(@element, key, value) -> @element 
* Caches given data 
* $('foo).saveData('keyName', 'Some random data'); 
* 
*/ 
saveData: function(element, key, value){ 
    if (Object.isUndefined(this['ATMCCache']) || !Object.isHash(this['ATMCCache'])){ 
     this['ATMCCache'] = $H(); 
    } 
    this['ATMCCache'].set(key,value); 
    return element; 
}, 
/** 
* Element#getData(@element, key) -> Value or Hash 
* Returns requested key or entire hash 
* $('foo).getData('keyName'); 
* 
*/ 
getData: function(element, key){ 
    return this['ATMCCache'].get(key) || this['ATMCCache']; 
}, 
/** 
* Element#hasData(@element) -> Boolean 
* Returns Boolean if element has any data stored 
* $('foo).hasData(); 
* 
*/ 
hasData: function(){ 
    return !Object.isUndefined(this['ATMCCache']); 
}}); 

Folgen Sie einfach der Dokumentation im sicher, Sie können von hier aus übernehmen und modifizieren oder zu tun, wie Sie mit diesem Code wünschen .