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

Answer 2

$.fn.hello = function(options) {

   return this.each(function() {

   });
};

然后你可以按照以下方式使用上面的插件..

$('.tip').hello();

需要帮助创建jquery插件

2 个答案: