My first JQuery plugin

[piers]

Hi,

I have been trying to create a little jquery plugin for myself so that I can reuse some helpful multiple button submit code.
This plugin will allow me to have a class as a selector for every button I want to use on a webpage, a class for everything I want to show/hide and set the toggle speed to slow, medium or fast.

The issue I have is that what I want as my default settings ie the p tag and slow are acting as hard coded to the plugin rather than taking the parameter inputs of the function ie area and speed.

This is the code for my plugin:

(function( $ ) {
  $.fn.multiButtonClick = function (area,speed) {

 var settings = $.extend({

        area : 'p',
        speed : 'slow'

        }, area, speed);

        return $(this).click(function() { 


            $(this).parent().nextAll(settings.area).first().toggle(settings.speed);

        });

    };

}( jQuery )); 

This is the code I have to make use of the plugin as a test when I click my button with the .sh class it should toggle to show/hide the navigation area of my website but instead does the p tag on my webpage:

$(document).ready(function() {
    $('.sh').multiButtonClick('#nav','slow');

});

Any help with this would be appreciated.

[pixelsoul]

Try this instead

(function( $ ) {
    $.fn.multiButtonClick = function (settings) {

        // defaults set
        var defaults = {
        area : 'p',
        speed : 'slow'
        }; 

        var settings = $.extend({}, defaults, settings);

        return $(this).click(function() {
            $(this).parent().nextAll(settings.area).first().toggle(settings.speed);
        });
    };
}( jQuery )); 

And then you would call it like this

$('.sh').multiButtonClick({area:'#nav', speed: 'slow'});

[piers]

Hi,

Thanks for that, it has worked. A quick question on performance though.
Currently I am doing this:

$('.sh').multiButtonClick({area: '.linkcontainer' ,speed: 'fast'});
$('.sh').multiButtonClick({area: '.firstpara' ,speed: 'fast'}); 
$('.sh').multiButtonClick({area: '#myForm', speed: 'fast'});    

I know it is possible to have multiple selectors and chain multiple functions however I was hoping to chain my ids and classes so that I only have to create the object once.

I tried

$('.sh').multiButtonClick({area: '.firstpara #myForm' ,speed: 'fast'});

and I also tried inserting a comma as in the code below but the most it would toggle show/hide was the .firstpara . It wasn't picking up #myForm. Do you know why that is the case?

$('.sh').multiButtonClick({area: '.firstpara, #myForm' ,speed: 'fast'});

[pixelsoul]

I am at work so I don't really have time to test this, and I am not really sure this is the route you want to go with this, but you might be able to do something like below. You would then need to pass your values for area as an array.

(function( $ ) {
    $.fn.multiButtonClick = function (settings) {

        // defaults set
        var defaults = {
        area : ['p'],
        speed : 'slow'
        }; 

        var settings = $.extend({}, defaults, settings);

        $.each(settings.area, function(i, value){
            return $(this).click(function() {
                $(this).parent().nextAll(value).first().toggle(settings.speed);
            });   
        });

    };
}( jQuery ));

And then you would call it like:

$('.sh').multiButtonClick({area: ['.linkcontainer', '.firstpara', '#myForm'] ,speed: 'fast'});

Again, I am not entirely sure this would work. Even if it does, I am not sure doing it this way is really ideal for future re-use of your plugin.

[piers]

Hi,

I appreciate all your help with this. I was able to use how you called it as an array without setting area as an array and it worked fine, I didn't need to use the $.each function.