Question

我在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>

Answer 1

在所有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');
}

如果您对该对象有实际参考，那么它会略有不同，但仍然遵循类似的原则。

Answer 2

这是您可以为自己创建的jQuery插件的一个很好的候选者。当然，如果你想花一些时间学习这个原则：）

How to develop a jQuery plugin了解jQuery插件的内容和方式

Answer 3

我的出价：

(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();

为了回答你的问题，我在几个地方使用了extend：一个用于选项，另一个用于jQuery插件能力。

$.fn.extend告诉jQuery这是在扩展它的功能。
$.extend({},$.fn.customScroller.defaults, option);允许您调用.customScroller({ scrollAmount: 10 })并更改滚动的行为。

任何其他问题，请问。

jquery原型用于常用功能

3 个答案: