javascript - 需要帮助创建 jquery 插件

Question

我正在创建一个名为“togglebutton”的简单 jquery 插件。我的问题在底部。 这是代码。

/** 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'});

我将在 jquery 插件定义中添加什么，以便我可以将其命名为:

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

非常感谢任何帮助。我是这类东西的新手。

Answer 1

开始方式示例:

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

这是一个很棒的教程，而且很容易实现

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