2

私は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;
    }
});

どんな助けでも大歓迎です。私はこの種類のものの初心者です。

4

2 に答える 2

1

開始方法の例：

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

これは素晴らしいチュートリアルであり、実装は非常に簡単です

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

于 2012-05-04T09:25:44.937 に答える
1 
$.fn.hello = function(options) {

   return this.each(function() {

   });
};

次に、uは上記のプラグインを次のように使用できます。

$('.tip').hello();
于 2012-05-04T09:30:06.173 に答える