jquery原型用于常用功能

时间:2011-03-11 19:54:33

标签: javascript jquery class function prototype

我在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 个答案:

答案 0 :(得分: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');
}

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

我的出价:

(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 })并更改滚动的行为。

任何其他问题,请问。