1

我正在为滑块使用 jquery 插件。它包含一个pauseSlide我试图从外部调用的函数。这是插件：

(function ($) {
    $.fn.liteSlider = function (options) {

        var defaults = {
            content: '.content',
            width: 500,
            height: 250,
            autoplay: false,
            delay: 3,
            buttonsClass: '',
            activeClass: '',
            controlBt: '',
            playText: ' Play',
            pauseText: 'Pause'
        };

        var options = $.extend(defaults, options);

        var slideNo = 1;
        var timer = 0;
        var playStatus = options.autoplay;
        var thisClass = ($(this).attr('class')).split(' ');
        var theClass = '.' + thisClass[0];
        var count = 0;
        var slides;
        var currentSlide = 1;
        var delay = parseInt(options.delay) * 1000;

        $(this).children(options.content).each(function () {
            slides = ++count;
        });

        function wrapContent(ele) {
            ele.wrap('<div class="sliderContentsWrap" />');
        }

        function applyCss(ele) {
            $('.sliderContentsWrap').css({
                padding: 0,
                margin: 0,
                width: options.width,
                height: options.height,
                overflow: 'hidden',
                position: 'relative'
            });

            ele.css({
                padding: 0,
                margin: 0,
                width: options.width * slides,
                height: options.height,
                position: 'absolute'
            });

            ele.children(options.content).css({
                float: 'left',
                width: options.width,
                height: options.height
            });
        }

        function resetButtons() {
            i = 0;
            $('.' + options.buttonsClass).each(function () {
                i++;
                $(this).addClass('bt' + i);
                $(this).attr('rel', i);
            });
        }

        function goToSlide(theSlide) {

            var animateLeft = -(options.width) * (parseInt(theSlide) - 1);
            $('.sliderContentsWrap' + ' ' + theClass)
                .animate({
                left: animateLeft
            });

            $('.' + options.buttonsClass).each(function () {
                $(this).removeClass(options.activeClass);
                if ($(this).hasClass('bt' + theSlide)) {
                    $(this).addClass(options.activeClass)
                }
            });

            currentSlide = theSlide;
        }

        function autoplay() {
            if (currentSlide < slides) {
                goToSlide(parseInt(currentSlide) + 1);
            } else {
                goToSlide(1);
            }
        }

        function playSlide() {
            clearInterval(timer);
            timer = setInterval(function () {
                autoplay();
            }, delay);

            $(options.controlBt).text(options.pauseText);
            playStatus = true;
        }

        function pauseSlide() {
            clearInterval(timer);
            $(options.controlBt).text(options.playText);
            playStatus = false;
        }

        function init(ele) {
            wrapContent(ele);
            applyCss(ele);
            resetButtons();

            if (options.autoplay == true) {
                playSlide()
            } else {
                pauseSlide();
            }
        }

        return this.each(function () {
            init($(this));

            $('.' + options.buttonsClass).click(function (e) {
                e.preventDefault();
                pauseSlide();
                goToSlide($(this).attr('rel'));
            });

            $(options.controlBt).click(function (e) {
                e.preventDefault();
                if (playStatus == true) {
                    pauseSlide()
                } else {
                    playSlide()
                };
            });

        });

    };

    //added this
    $.liteSlider = {
        pause: function() {
            alert('clicked');
            pauseSlide();
        }
    };   

})(jQuery);

除此之外，我正在使用$.liteSlider.pause();它显示警报但它不运行该pauseSlide()功能。有什么建议么？

4

3 回答 3

3

关于 jQuery 的插件创作，尤其是命名空间点： http ://docs.jquery.com/Plugins/Authoring#Namespacing

[...] 您应该将插件的所有方法收集在一个对象字面量中，并通过将方法的字符串名称传递给插件来调用它们。[...]

(function($) {
    var YourPluginMethods = {
        init: function (options) {
            return this.each(function () {

            });
        },
        pauseSlide : function(options) {
            return this.each(function () {
                // Do some stuff for each instance of your plugin here
            });
        }
    };

    $.fn.YourPlugin = function(method) {        
        // Method calling logic
        if (YourPluginMethods[method]) {
            return YourPluginMethods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (!method || typeof method === 'object') {
            return YourPluginMethods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.YourPlugin');
        }
    };
})(jQuery);

$('your-selector').YourPlugin('pauseSlide', {
    speed: 'slow'
});

一旦你以这种方式声明了你的方法，你就可以在任何 HTML 选择器上调用它。

于 2013-04-16T23:57:04.633 回答
0

问题是调用pauseSlide与声明不在同一范围内。

于 2013-04-16T23:29:31.040 回答
0

pauseSlide超出范围。解决此问题的一种简单方法可能是var pauseSlide;在范围内声明某处，然后再分配它。

(function ($) {
    var pauseSlide;

    $.fn.liteSlider = function (options) {

        var defaults = {
            content: '.content',
            width: 500,
            height: 250,
            autoplay: false,
            delay: 3,
            buttonsClass: '',
            activeClass: '',
            controlBt: '',
            playText: ' Play',
            pauseText: 'Pause'
        };

        var options = $.extend(defaults, options);

        var slideNo = 1;
        var timer = 0;
        var playStatus = options.autoplay;
        var thisClass = ($(this).attr('class')).split(' ');
        var theClass = '.' + thisClass[0];
        var count = 0;
        var slides;
        var currentSlide = 1;
        var delay = parseInt(options.delay) * 1000;

        $(this).children(options.content).each(function () {
            slides = ++count;
        });

        function wrapContent(ele) {
            ele.wrap('<div class="sliderContentsWrap" />');
        }

        function applyCss(ele) {
            $('.sliderContentsWrap').css({
                padding: 0,
                margin: 0,
                width: options.width,
                height: options.height,
                overflow: 'hidden',
                position: 'relative'
            });

            ele.css({
                padding: 0,
                margin: 0,
                width: options.width * slides,
                height: options.height,
                position: 'absolute'
            });

            ele.children(options.content).css({
                float: 'left',
                width: options.width,
                height: options.height
            });
        }

        function resetButtons() {
            i = 0;
            $('.' + options.buttonsClass).each(function () {
                i++;
                $(this).addClass('bt' + i);
                $(this).attr('rel', i);
            });
        }

        function goToSlide(theSlide) {

            var animateLeft = -(options.width) * (parseInt(theSlide) - 1);
            $('.sliderContentsWrap' + ' ' + theClass)
                .animate({
                left: animateLeft
            });

            $('.' + options.buttonsClass).each(function () {
                $(this).removeClass(options.activeClass);
                if ($(this).hasClass('bt' + theSlide)) {
                    $(this).addClass(options.activeClass)
                }
            });

            currentSlide = theSlide;
        }

        function autoplay() {
            if (currentSlide < slides) {
                goToSlide(parseInt(currentSlide) + 1);
            } else {
                goToSlide(1);
            }
        }

        function playSlide() {
            clearInterval(timer);
            timer = setInterval(function () {
                autoplay();
            }, delay);

            $(options.controlBt).text(options.pauseText);
            playStatus = true;
        }

        pauseSlide = function() {
            clearInterval(timer);
            $(options.controlBt).text(options.playText);
            playStatus = false;
        }

        function init(ele) {
            wrapContent(ele);
            applyCss(ele);
            resetButtons();

            if (options.autoplay == true) {
                playSlide()
            } else {
                pauseSlide();
            }
        }

        return this.each(function () {
            init($(this));

            $('.' + options.buttonsClass).click(function (e) {
                e.preventDefault();
                pauseSlide();
                goToSlide($(this).attr('rel'));
            });

            $(options.controlBt).click(function (e) {
                e.preventDefault();
                if (playStatus == true) {
                    pauseSlide()
                } else {
                    playSlide()
                };
            });

        });

    };

    //added this
    $.liteSlider = {
        pause: function() {
            alert('clicked');
            pauseSlide();
        }
    };
于 2013-04-16T23:29:52.607 回答