我正在创建一个简单的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