Here I wrote console.log. Its printing 2 times but it should be a one print at a time. And also next line is not working!
/* $Id$ */
(function($) {
$.widget("ui.zflipswitch", {
widgetEventPrefix : "zflipswitch", //No I18N
options: {
type : undefined,
view : undefined,
option : undefined,
labelFor : undefined
},
_EVENTS: {
'ONCLICK': 'click',
'ONCHANGE': 'change',
'ONDRAG': 'drag'
},
_create:function() {
base = this;
if(this.options.view == "iconOnly")
{
var insideDiv = "<div id='leftside'></div><div id='onoffswitch' ><input type='checkbox' name='onoffswitch' id='onoffswitch-checkbox' checked><label id='onoffswitch-label' for='onoffswitch-checkbox' ><div id='onoffswitch-inner'>ON OFF</div><div id='onoffswitch-switch' ></div></label></div><div id='righttside'></div>";
this.element.append(insideDiv);
}
else if(this.options.view == "textOnly")
{
var insideDiv = "<div id='leftside1'></div><div id='onoffswitch1' ><input type='checkbox' name='onoffswitch' id='onoffswitch-checkbox1' checked><label id='onoffswitch-label1' for='onoffswitch-checkbox1' ><div id='onoffswitch-inner1'>ON OFF</div><div id='onoffswitch-switch1' ></div></label></div><div id='righttside1'></div>";
this.element.append(insideDiv);
}
$("#onoffswitch-label").click(function(e)
{
console.log("OK");
base._triggerEvent(base._EVENTS.ONCLICK);
e.stopPropagation();
});
},
_triggerEvent: function(event){
var ui = this;
return this._trigger(event, event, ui);
},
destroy : function() {
$(this.element).empty();
$(this.element).unbind("."+this.widgetName);
$.Widget.prototype.destroy.apply(this, arguments);
}
});
})(jQuery)
HTML:
<body >
<div id="main" ctype="zflipswitch" data='{"type":"checkbox","view":"iconOnly","labelFor":"myswitch1"}'>
</div>
<br>
<div id="xxx" ctype="zflipswitch" data='{"type":"checkbox","view":"textOnly","labelFor":"myswitch2"}'>
</div>
<br>
</body>