|
| 1 | +Switcher Jquery Plugin |
| 2 | +----------------------- |
| 3 | + |
| 4 | +switcher plugin let you transform your input checkbox and radios into a nice switch buttons with a nice interfaces. |
| 5 | + |
| 6 | + Requirements: |
| 7 | + ============= |
| 8 | + browser supports css3 transition and transform, latest versions of modern browsers support css3 |
| 9 | + NOTE: plugin uses jquery 2+ library |
| 10 | + |
| 11 | + Features: |
| 12 | + ========= |
| 13 | + |
| 14 | + - auto generated markup, so no need for extra or specific html |
| 15 | + - uses css3 transform and transition properties with full browsers vendor prefix |
| 16 | + - support array checkbox inputs |
| 17 | + - multiple themes |
| 18 | + - you can manipulate switch style: |
| 19 | + - control switch width and height |
| 20 | + - control switch blob offset |
| 21 | + - control switch on off direction automatically and manually |
| 22 | + - control switch on state text and off state text |
| 23 | + - ability to automatic fit font size |
| 24 | + - show its input for functionality testing |
| 25 | + - fire custom events on turnon, turnoff and change. so you can perform your tasks depends on switch status |
| 26 | + |
| 27 | + Usage: |
| 28 | + ====== |
| 29 | + |
| 30 | + // convert all checkboxs to switchs |
| 31 | + $('input[type=checkbox]').switcher(); |
| 32 | + |
| 33 | + |
| 34 | + // Options |
| 35 | + $('input[type=checkbox]').switcher({ |
| 36 | + // Default value // info |
| 37 | + |
| 38 | + theme: 'modern', // light select theme between 'light, dark, modern, iphone, flat' |
| 39 | + width: 80, // 56 in 'px' |
| 40 | + height: 26, // 22 |
| 41 | + blobOffset: 0, // 2 |
| 42 | + dir: 'rtl', // html dir || 'ltr' set switch direction 'important for transform' |
| 43 | + reverse: true, // false reverse on off order |
| 44 | + onText: 'YES', // 'ON' text displayed on ON state |
| 45 | + offText: 'NO', // 'OFF' text displayed on OFF state |
| 46 | + inputs: true, // false show corresponding inputs |
| 47 | + autoFontSize: true, // false auto fit text size with respect to switch height |
| 48 | + }); |
| 49 | + |
| 50 | + |
| 51 | + // assign event handler |
| 52 | + $(':radio').switcher().on({ |
| 53 | + |
| 54 | + 'turnon.switcher': function( e, dataObj ){ |
| 55 | + |
| 56 | + // to do on turning on a switch |
| 57 | + }, |
| 58 | + |
| 59 | + 'turnoff.switcher': function( e, dataObj ){ |
| 60 | + |
| 61 | + // to do on turning off a switch |
| 62 | + }, |
| 63 | + |
| 64 | + 'change.switcher': function( e, dataObj ){ |
| 65 | + |
| 66 | + // to do on turning on or off a switch |
| 67 | + } |
| 68 | + |
| 69 | + }); |
0 commit comments