Question

I’m creating a simple jquery plugin named togglebutton. My question is at the bottom.
Here are the codes.

/** CSS */
.toggle-button{
    -moz-border-radius:4px;
    border-radius:4px;
    border:solid gray 1px;
    padding:4px;
    color:#fff; 
}
.state-on{ background:gray; }

.state-off{ background:blue; }


/** JQuery Plugin Definition */
jQuery.fn.togglebutton = function (options) {
    myoptions = jQuery.extend ({
    state: "off",
    }, options);

    this.click(function(){
        myoptions.click;
        opt = options;
        $this = $(this);
        if(opt.state == 'on'){
            turnoff($this);
            opt.state = 'off';
        }
        else if(opt.state == 'off'){
            turnon($this);
            opt.state = 'on';
        }
    });

    this.each(function () {
        this.options = myoptions;
        $this = $(this);
        opt = this.options;

        if(opt.state == 'on'){
            $this.attr('class', "toggle-button state-on");
        }
        else if(opt.state == 'off'){
            $this.attr('class', "toggle-button state-off");
        }

    });

    function turnon($this){
        $this.attr('class', "toggle-button state-on");
    }
    function turnoff($this){
        $this.attr('class', "toggle-button state-off");
    }
}

/** How to Call */
$('#crop').togglebutton({state:'off'});

What will I add to my jquery plugin definition so I can call it something like:

$('#crop').togglebutton({
    state:'off',
    click: function(event, ui) {
        val = ui.value;
    }
});

Any help is much appreciated. I’m a newbie to this kinf of stuff.

Answer 1

Sample way to start:

// plugin definition
$.fn.togglebutton = function() {
  // Your plugin implementation code goes here.
};

Here is a great tutorial and it’s very easy to implement

http://www.learningjquery.com/2007/10/a-plugin-development-pattern