JQuery прототип для часто используемой функции - PullRequest
Новая
       7

JQuery прототип для часто используемой функции

0 голосов
/ 11 марта 2011

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

$(document).ready(function() {
        var scrollAmt = 50; //distance in pixels;
        var scrollableAmt = $('#weblinks .container').outerHeight();
        var viewAmt = $('#weblinks').outerHeight();

        var maxScroll = Math.ceil((scrollableAmt-viewAmt) / scrollAmt);
        var currentItem = 0;

        function setScrollButtons(scrollRef,scrollAmount){

        }

        $("#weblinks .scrollDownBtn").click(function(){
            if (currentItem <= maxScroll){


                $('#weblinks .container:not(:animated)').animate({'top' : '-='+ scrollAmt + ''},500,function(){
                    currentItem++
                });

            } else {
                currentItem = 0;
                $('#weblinks .container:not(:animated)').animate({'top' : currentItem},500);
            }
        });
        $("#weblinks .scrollUpBtn").click(function(){
            if (currentItem > 0){

                $('#weblinks .container:not(:animated)').animate({'top' : '+='+ scrollAmt + ''},500,function(){
                    currentItem--;
                });

            } else {
                $('#weblinks .container:not(:animated)').animate({'top' : currentItem},500);
            }
        });
    });

По сути, я бы хотел создать функцию или класс, я думаю, что он завершит весь приведенный выше код, но сможет передать ему ссылку на div вместо #weblinks, и, возможно, передать это сумма прокрутки, и несколько экземпляров этой функции могут существовать на одной странице вместе. У кого-нибудь есть какой-нибудь совет о том, как это сделать?

РЕДАКТИРОВАТЬ: я добавил HTML, который всегда будет существовать для каждого скроллера. 

<div id="weblinks" class="scrollbar_container">
        <div class="customScrollBox">
            <div class="container">
                <div class="content">

                </div>
            </div>

            <a class="scrollUpBtn" href="javascript:void(0);"></a> <a class="scrollDownBtn" href="javascript:void(0);"></a>         
        </div>
    </div>

Ответы [ 3 ]

1 голос
/ 11 марта 2011

Это хороший кандидат на плагин jQuery, который вы можете создать для себя. Конечно, если вы хотите потратить некоторое время и изучить этот принцип:)

Как разработать плагин jQuery , чтобы узнать, что и как делают плагины jQuery

1 голос
/ 12 марта 2011

Моя ставка: 

(function($){
    $.fn.extend({
        customScroller: function(options){
            return this.each(function(i,e){
                var container = $(e).find('.container'),
                    content = $(e).find('.content'),
                    scrollUpBtn = $(e).find('.scrollUpBtn'),
                    scrollDownBtn = $(e).find('.scrollDownBtn');

                var self = $(e);
                var o = $.extend({}, $.fn.customScroller.defaults, options);

                o.scrollableAmt = container.outerHeight();
                o.viewAmt = self.outerHeight();
                o.maxScroll = Math.ceil((o.scrollableAmt - o.viewAmt) / o.scrollAmt);

                scrollDownBtn.click(function(){
                    console.log('DOWN -- current: '+o.currentItem);
                    if (o.currentItem <= o.maxScroll){
                        container.filter(':not(:animated)').animate({
                            top: '-='+o.scrollAmt
                        },500,function(){
                            o.currentItem++;
                        });
                    }else{
                        o.currentItem = 0;
                        container.filter(':not(:animated)').animate({
                            top: o.currentItem
                        },500);
                    }
                });
                scrollUpBtn.click(function(){
                    console.log('UP -- current: '+o.currentItem);
                    if (o.currentItem > 0){
                        container.filter(':not(:animated)').animate({
                            top: '+='+o.scrollAmt
                        },500,function(){
                            o.currentItem--;
                        });
                    }else{
                        container.filter(':not(:animated)').animate({
                            top: o.currentItem
                        },500);
                    }
                });
            });
        }
    });

    $.fn.customScroller.defaults = {
        scrollAmt: 50,
        scrollableAmt: 0,
        viewAmt: 0,
        maxScroll: 0,
        currentItem: 0
    };
})(jQuery);

$('#weblinks').customScroller();

Чтобы ответить на ваш вопрос, я использую расширение в нескольких местах: одно для опций, а другое для аддонной способности jQuery.

  • $.fn.extend сообщает jQuery, что расширяет его функциональность.
  • $.extend({},$.fn.customScroller.defaults, option); позволяет вам позвонить .customScroller({ scrollAmount: 10 }) и изменить поведение прокрутки.

любые другие вопросы, пожалуйстапросто спросите.

1 голос
/ 11 марта 2011

Вы можете довольно просто изменить его в случае, если у всех div будет класс подконтейнера. Что-то вроде: 

function scrollExample(divId) {
    var scrollAmt = 50; //distance in pixels;
    var scrollableAmt = $(divId + ' .container').outerHeight();
    var viewAmt = $(divId).outerHeight();

    var maxScroll = Math.ceil((scrollableAmt-viewAmt) / scrollAmt);
    var currentItem = 0;

    function setScrollButtons(scrollRef,scrollAmount){

    }

    $(divId + " .scrollDownBtn").click(function(){
        if (currentItem <= maxScroll){


            $(divId + ' .container:not(:animated)').animate({'top' : '-='+ scrollAmt + ''},500,function(){
                currentItem++
            });

        } else {
            currentItem = 0;
            $(divId + ' .container:not(:animated)').animate({'top' : currentItem},500);
        }
    });
    $(divId + " .scrollUpBtn").click(function(){
        if (currentItem > 0){

            $(divId + ' .container:not(:animated)').animate({'top' : '+='+ scrollAmt + ''},500,function(){
                currentItem--;
            });

        } else {
            $(divId + ' .container:not(:animated)').animate({'top' : currentItem},500);
        }
    });
});

Тогда назовите это что-то вроде: 

$(document).ready(function() {
    scrollExample('#webLinks');
}

Если бы у вас была фактическая ссылка на объект, она бы немного отличалась, но все равно следовала бы аналогичному принципу.

...