jquery: turning multiple functions into one plugin

Question

I am learning to turn a function into a plugin. and turning a function into a plugin seems quite straight forward. But what if I have two functions correspond with each other - how can I turn these two functions into one plugin then?

such as I have these functions for making a jquery slideshow,

function run_slide(target_slide) {

    //add a class the the first element
    $('li:first-child',target_slide).addClass('active');

    //Set the opacity of all images to 0
    $('.slide li').css({opacity: 0.0});

    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('loop_slide("'+target_slide+'")',5000);
}

function loop_slide(target_slide) {

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('.slide li:first-child') :current.next()) : $('.slide li:first-child')); 

    //Set the fade in effect for the next image, show class has higher z-index
    current.addClass('last-active');
    next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function(){
        current.animate({opacity: 0.0}, 1000).removeClass('active last-active');

        $('.caption p',target_slide).html(caption_description);
    });

}

this is how I call these functions,

run_slide('#slide');

ideally I would like to call these functions from the plugin method,

$('#slide').run_slide();

but how to wrap these two functions into the plugin making method below as in jquery's documenation,

(function( $ ){
  $.fn.myPlugin = function() {

    // Do your awesome plugin stuff here

  };
})( jQuery );

thanks.

JohnO · Accepted Answer · 2011-01-08 23:34:53Z

5

According to jquery's docs/style guide a single plugin should not clutter up the $.fn namespace with multiple entries. But your single plugin requires multiple functions, as you've drawn it up. The answer is a singleton like so: http://docs.jquery.com/Plugins/Authoring#Namespacing The first code block is what you should not do. The second is what you should do. You create a singleton with all your methods attached. Via scope closure that singleton is available to your plugin $.fn... call. This way your plugin can work on multiple DOM objects at the same time while not cluttering up the jquery namespace, or memory-space with multiple instances of your functions running around. All around win :)

answered Jan 8, 2011 at 23:34

JohnO

2,0692 gold badges13 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy · Accepted Answer · 2011-01-08 23:25:27Z

Something like this:

$(function() {
    $.fn.run_slide = function {
        var target_slide = $(this);
        //add a class the the first element
        $('li:first-child', target_slide).addClass('active');

        //Set the opacity of all images to 0
        $('.slide li').css({
            opacity: 0.0
        });

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval(function() {
            target_slide.loop_slide();
        }, 5000);
    }

    $.fn.loop_slide = function() {
        var target_slide = $(this);
        //Get next image, if it reached the end of the slideshow, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('.slide li:first-child') : current.next()) : $('.slide li:first-child'));

        //Set the fade in effect for the next image, show class has higher z-index
        current.addClass('last-active');
        next.css({
            opacity: 0.0
        }).addClass('active').animate({
            opacity: 1.0
        }, 1000, function() {
            current.animate({
                opacity: 0.0
            }, 1000).removeClass('active last-active');

            $('.caption p', target_slide).html(caption_description);
        });
    }
});

or you could also define another function inside the plugin like this:

$.fn.run_slide = function(){
    function loop_slide(){
        //...
    }

    loop_slide.call(this);
}

Community · Accepted Answer · 2017-05-23 12:11:50Z

1

Try this creating a jquery plugin with multiple functions

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Jan 8, 2011 at 23:10

Matt Asbury

5,6902 gold badges24 silver badges29 bronze badges

Collectives™ on Stack Overflow

jquery: turning multiple functions into one plugin

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related