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

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


任何帮助深表感谢。我是这种东西的新手。

最佳答案

开始的示例方法:

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


这是一个很棒的教程,很容易实现

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

10-05 22:37