Skip to content

Commit 5424294

Browse files
committed
Creating README file.
1 parent 805eed6 commit 5424294

File tree

1 file changed

+69
-0
lines changed

1 file changed

+69
-0
lines changed

README

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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

Comments
 (0)