Question

我创建了一个非常简单的jQuery内容滑块。我想把它变成一个插件，这样我就可以轻松初始化并在初始化时指定的元素上使用它，而不必更改.each中的选择器。这是代码：

$('.subSlider').each(function(){
    var numberOfSlides = parseInt($(this).find("ul li").length);
    var eachWidth = parseInt($(this).find("ul li").css("width").replace("px", ""));
    var eachBorder = parseInt($(this).find("ul li").css("border-right-width").replace("px",""))+parseInt($(this).find("ul li").css("border-left-width").replace("px",""));
    var eachPadding = parseInt($(this).find("ul li").css("padding-right").replace("px", ""))+parseInt($(this).find("ul li").css("padding-left").replace("px", ""));
    var totalItemWidth = eachWidth+eachBorder+eachPadding;
    var totalWidth = totalItemWidth*numberOfSlides;

    function showHideNav(elementToMove){
        if (elementToMove.css("margin-left") == "0px"){
            elementToMove.parent().parent().find('.subSliderNav').not('.next').hide();
        } else {
            elementToMove.parent().parent().find('.subSliderNav').not('.next').show();
        };

        var overlap = totalWidth-elementToMove.parent().parent().width();
        if (parseInt(elementToMove.css("margin-left").replace('px','')) <= -overlap){
            elementToMove.parent().parent().find('.subSliderNav.next').hide();
        } else {
            elementToMove.parent().parent().find('.subSliderNav.next').show();
        }
    }

    $(this).parent().prepend('<div class="subSliderNav"></div>');
    $(this).parent().prepend('<div class="subSliderNav next"></div>');

    $(this).parent().find('ul').width(totalWidth);
    $(this).parent().on("click", ".subSliderNav", function(){
        var direction = "+";
        if ($(this).hasClass('next')){
            direction = "-";
        }
        var elementToMove = $(this).parent().find('.subSlider ul');
        elementToMove.animate({
            "margin-left": direction+"="+totalItemWidth
        }, 200, function(){
            showHideNav(elementToMove);
        });
    });
    showHideNav($(this).find('ul'));
});

Answer 1

我会试一试，有很多猜测，因为那里有一些奇怪的东西，我试图至少尽可能地清理，并得到这个，不知道它是否适用你的标记与否：

(function( $ ) {
    $.fn.subSlider = function() {
        var elems = this.find("ul li"),
            numberOfSlides = elems.length,
            eachWidth = parseInt(elems.css("width")),
            eachBorder = parseInt(elems.css("border-right-width"))+parseInt(elems.css("border-left-width")),
            eachPadding = parseInt(elems.css("padding-right"))+parseInt(elems.css("padding-left")),
            totalItemWidth = eachWidth+eachBorder+eachPadding,
            totalWidth = totalItemWidth*numberOfSlides;

        function showHideNav(elementToMove){
            var overlap = totalWidth-elementToMove.parent().parent().width();
            elementToMove.parent().parent()
                         .find('.subSliderNav').not('.next')
                         .toggle(elementToMove.css("margin-left") == "0px")
                         .end().end()
                         .find('.subSliderNav.next')
                         .toggle(parseInt(elementToMove.css("margin-left")) <= -overlap);
        }

        this.parent().prepend('<div class="subSliderNav next"></div><div class="subSliderNav"></div>') 
            .find('ul').width(totalWidth)
            .end().on("click", ".subSliderNav", function(){
                var direction = $(this).hasClass('next')?"-":"+";
                $(this).parent().find('.subSlider ul').animate({
                    "margin-left": direction+"="+totalItemWidth
                }, 200, function(){
                    showHideNav($(this));
                });
            });
        showHideNav($('ul', this));
    };
})( jQuery );

如何将我的简单内容滑块变成插件？

1 个答案: