1

http://www.addthis.com/help/toolboxからカスタム ホバー メニューを配置する必要がありますが、指定されたコードは JQuery であるのに対し、Rails は Prototype を使用します。私はどちらの JavaScript ライブラリについてもあまり経験がありません。

$(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);
        }
    }
});
4

2 に答える 2

2

したがって、Prototype の使用に縛られておらず、代わりにjQueryを使用したい場合は、 Prototypeのドロップイン代替として機能するjRailsというプラグインがあります。

Prototypeに問題があるわけではありませんが、jQueryをインストールする方がPrototypeに移植するよりも簡単かもしれません。参考になれば幸いです（探していたものと違っていたらすみません）。

編集:このページには、 jQueryとRailsに関する優れた情報があります。それが役立つことを願っています。

于 2009-07-06T20:55:55.837 に答える
1

PrototypeをjRailsプラグインに置き換えることができます。または、プロトタイプをニーズに合わせて拡張することもできます。これは、データに相当するプロトタイプの簡単な例です。

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']);
}});

ここから引き継いで、このコードで必要に応じて変更または実行できることを確認して、ドキュメントに従ってください。

于 2010-12-06T19:08:02.787 に答える