(Function ($ ){ $. Fn. tzCheckbox = function (options ){ // Default On/Off labels: Options = $. extend ({ Labels: ['on', 'off'] }, Options ); Return this. each (function (){ Var originalCheckBox = $ (this ), Labels = []; // Checking for the data-on/data-off HTML5 data attributes: If (originalCheckBox. data ('on ')){ Labels [0] = originalCheckBox. data ('on '); Labels [1] = originalCheckBox. data ('off '); } Else labels = options. labels; // Creating the new checkbox markup: Var checkBox = $ ('<span> ',{ ClassName: 'tzcheckbox' + (this. checked? 'Checked ':''), Html: '<span class = "tzCBContent">' + labels [this. checked? 0: 1] + '</Span> <span class = "tzCBPart"> </span>' }); // Inserting the new checkbox, and hiding the original: CheckBox. insertAfter (originalCheckBox. hide ()); CheckBox. click (function (){ CheckBox. toggleClass ('checked '); Var isChecked = checkBox. hasClass ('checked '); // Synchronizing the original checkbox: OriginalCheckBox. attr ('checked', isChecked ); Checkbox.find('.tzcbcontent'{.html (labels [isChecked? 0: 1]); }); // Listening for changes on the original and affecting the new one: OriginalCheckBox. bind ('change', function (){ CheckBox. click (); }); }); }; }) (JQuery ); |