我正在创建一个名为 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;
}
});
任何帮助深表感谢。我是这种东西的新手。