Несколько функций и обратных вызовов в пользовательском плагине jquery? - PullRequest
Новая
       31

Несколько функций и обратных вызовов в пользовательском плагине jquery?

1 голос
/ 01 сентября 2011

Хорошо, я не уверен, правильно ли я поступаю по этому поводу или нет, но здесь идет ...

Я пишу собственный плагин jQuery для обеспечения функциональности выпадающего меню с анимацией (и в качестве учебного упражнения, поэтому, пожалуйста, не говорите: «Почему бы просто не использовать superduperwonderplugin-x »).

Я хочу, чтобы меню можно было анимировать по-разному, в зависимости от пользовательских настроек (т. Е. Исчезать, скользить, падать и т. Д.). В настоящий момент каждая отдельная анимация обрабатывается отдельной функцией в файле плагина, но я не уверен, как обращаться с функциями обратного вызова (передача this back)!

- т.е. анимация происходит только на последнем элементе в стеке объекта.

Вот мой код: 

/**
 * Grizzly's Menuifier
 * 
 * @author  Chris.Leaper
 * @version a1.0
 */
(function($){
    $.fn.gmenu = function(options) {

        /* Transitions:
            - fade >> fadeIn / fadeOut
            - slide >> slideDown / slideUp
            - drop >> (different to above?)
            - bounce >> (custom config transition=? and easing=bounce)
            - stretch >> (custom config transition=? and easing=elastic)
            - fold >> (custom) drop menu @ half width then 'fold' out to full menu width
        */

        // Set the plugin default options:
        var defaults = {
            levels: '1',
            fit: 'auto',
            easing: 'linear',
            transition: 'slide',
            speed: 500
        };

        options = $.extend(defaults, options); // Merge the user options with the plugin defaults

        return this.each(function() {
            var $this = $(this);
            var opt = options;
            var container;
            var ul;

            // Setup the container elements (parent DIV/NAV and UL)!
            if( $this.is('ul') ) container = $(this).parent();
            else container = $(this);

            console.log('Container: ' + container.get(0).tagName + ' id=#' + container.attr('id') + ' class=' + container.attr('class'));

            ul = container.children('ul:first-child');

            console.log('UL: ' + ul);

            // Set the UL's position to relative:
            if($(ul).css('position') != 'relative') $(ul).css('position', 'relative');

            var offset;
            var menus = ul.children('li:has(ul)');

            console.log('List Item: ' + menus);

            menus.each(function(index, menu) {
                $menu = $(menu);

                console.log('Menu: ' + $menu);

                // Set the menu LI's position to relative (contains the absolutely positioned child UL!)
                if($menu.css('position') != 'relative') $menu.css('position', 'relative');

                // Get the menu LI's position relative to the document (it's offset)
                // -- This is only needed when positioning non-child elements
                // (i.e. ID linked menu>submenu relationships as may be used for a separated DIV based menu!!)
//              offset = menu.offest();

                // Position the submenu according to it's parent
                var submenu = $menu.children('ul');

                console.log('Submenu: ' + submenu.get(0).tagName + ' id=#' + submenu.attr('id') + ' class=' + submenu.attr('class'));

                setPosition(submenu, $menu.height());

                switch(opt.transition) {
                    case 'bounce':
                        setSMBounce(menu, opt);
                        break;
                    case 'fade':
                        setSMFade(menu, opt);
                        break;
                    case 'fold':
                        setSMFold(menu, opt);
                        break;
                    case 'stretch':
                        setSMStretch(menu, opt);
                        break;
                    case 'slide':
                    default:
                        menu = setSMSlide(menu, opt);
                }
            });

            debug(this);
        });
    };
})(jQuery);

function setPosition(submenu, height) {
    $(submenu).css({
        left: 0,
        position: 'absolute',
        top: height
    }).hide();
}

function setSMSlide(menu, opt) {
    $menu = $(menu);

    console.log('SM Slide: ' + $menu.get(0));

    $menu.first('a').mouseenter(function() {
        console.log('Start SlideDown');
        $menu.stop(true, true).slideDown(opt.speed, opt.easing);
        console.log('Stop SlideDown');
    });

    $menu.first('a').mouseleave(function() {
        console.log('Start SlideUp');
        $menu.stop(true, true).slideUp(opt.speed, opt.easing);
        console.log('Stop SlideUp');
    });
}


Я думаю, что мне следует использовать (тот же) подход, основанный на пространстве имен, для определения моих отдельных функций ( литерал объекта или что-то еще? ), но я не был уверен, что это значит или как это сделать.

Может кто-нибудь помочь мне, пожалуйста?

1 Ответ

1 голос
/ 02 сентября 2011

Для инкапсуляции ваших функций setPosition и setSMSlide (в вашем примере) просто определите их внутри функции вашего плагина (хорошее место было бы после определения переменной по умолчанию.вот так: 

var defaults = {
        levels: '1',
        fit: 'auto',
        easing: 'linear',
        transition: 'slide',
        speed: 500
    },
    setPosition = function(submenu, height) {...},
    setSMSlide = function(menu, opt) {...};

Из-за того, как работает область видимости в Javascript, ваши функции setPosition и setSMSlide будут по-прежнему доступны изнутри вашего объявления gmenu.

...