Skip to content

Commit 93b829f

Browse files
ahmad-sa3dahmad-sa3d
committed
version update: update rcSwitcher to version 3.0.0
1 parent add7dc5 commit 93b829f

File tree

8 files changed

+275
-78
lines changed

8 files changed

+275
-78
lines changed

‎README.md

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@
2424
>@author Ahmed Saad <a7mad.sa3d.2014@gmail.com>
2525
2626
### Version
27-
> 2.1.0
27+
> 3.0.0
28+
29+
### Updated
30+
> 4 Jul 2016
2831
2932

3033
----
@@ -45,9 +48,41 @@
4548
* ability to automatic fit font size.
4649
* ability to automatic stick switch to its parent side.
4750
* show switch corresponding input for functionality testing.
48-
* fire custom events on turnon, turnoff and change. so you can perform your tasks depends on switch status.
49-
* on firing events an information plain object is passed to event handler function as the second argument. it contains jquery objects of each switch piece and also input jquery object
50-
51+
7. ####_fire custom events :_
52+
53+
> __*`turnon.rcSwitcher`*__
54+
on turning on a Switch
55+
56+
> __*`turnoff.rcSwitcher`*__
57+
on turning off a Switch
58+
59+
> __*`toggle.rcSwitcher`*__
60+
on turning on / off a Switch
61+
62+
>> *on firing events an information plain object is passed to event handler function as the second argument. it contains jquery objects of each switch piece and also input jquery object, also on toggle event a third argument will passed its value will be current toggled value as 'turnon' OR 'turnoff'*
63+
64+
----
65+
### Changelog:
66+
67+
68+
1. add support for control swotch by changing input status
69+
70+
$input = $('input[type=checkbox]').first().rcSwitcher();
71+
72+
// swithcer will turn on
73+
$input.prop( 'checked', 'true' ).change();
74+
75+
// switcher will turn off
76+
$input.prop( 'checked', 'false' ).change();
77+
78+
79+
> __Notice :__
80+
81+
> *changing checkbox or radio checked status with javascript will not trigger --*change*-- event, so you must use _`change()`_ method*
82+
83+
2. change `change.rcSwitcher` Event to `toggle.rcSwitcher` to avoid built-in javascript `change` event
84+
3. enhance __*Demo*__ example to adapt with screen sizes and mobile phones
85+
4. some other tweaks.
5186

5287
---
5388
### Usage:
@@ -101,7 +136,7 @@ $(':radio').rcSwitcher().on({
101136
// to do on turning off a switch
102137
},
103138

104-
'change.rcSwitcher': function( e, dataObj, changeType ){
139+
'toggle.rcSwitcher': function( e, dataObj, changeType ){
105140

106141
// to do on turning on or off a switch
107142
// changeType is 'turnon' || 'turnoff'

‎css/rcswitcher.min.css

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/style.css

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,33 @@
22

33
/*@author Ahmed Saad <a7mad.sa3d.2014@gmail.com>*/
44

5+
html {
6+
position: relative;
7+
min-height: 100%;
8+
}
9+
510
body{
6-
/*background: #444;*/
7-
vertical-align: middle;
11+
/* Margin bottom by footer height */
12+
/*margin-bottom: 30px;*/
13+
/*background: #999*/
14+
}
15+
16+
#footer {
17+
position: absolute;
18+
bottom: 0;
19+
width: 100%;
20+
padding: 10px 0;
21+
/* Set the fixed height of the footer here */
22+
/*height: 30px;*/
23+
background-color: #f5f5f5;
24+
border-top: 1px solid lightgrey;
25+
text-align: center;
26+
left: 0px;
27+
right: 0px;
828
}
929

1030
.container{
11-
/*background: #f5f5f5;*/
12-
width: 590px;
13-
margin: 50px auto;
31+
margin: 0 auto;
1432
padding: 10px;
1533
}
1634

@@ -21,21 +39,45 @@ body{
2139
#zoom: 1;
2240
}
2341

42+
@media (min-width:320px) and ( max-width:639px ) {
43+
/* smartphones, iPhone, portrait 480x320 phones */
44+
.container
45+
{
46+
width: 292px;
47+
/*background: red;*/
48+
}
49+
}
50+
51+
@media (min-width:640px) {
52+
/* smartphones, iPhone, portrait 480x320 phones */
53+
.container
54+
{
55+
width: 584px;
56+
/*margin: 0 auto;*/
57+
/*background: blue;*/
58+
}
59+
}
60+
61+
62+
2463
label{
2564
display: inline-block;
2665
width: 150px;
2766
color: #888;
67+
line-height: 30px
2868
}
2969

3070
.block {
3171
width: 250px;
3272
background: #ededed;
3373
padding: 4px 10px;
3474
float: left;
35-
/*height: 300px;*/
75+
/*height: 350px;*/
3676
margin: 10px;
3777
border: 1px solid #ccc;
3878
border-radius: 4px;
79+
position: relative;
80+
box-shadow: 1px 1px 15px 0px rgba( 20, 20, 20, .3 );
3981
}
4082

4183
div h4
@@ -93,4 +135,21 @@ li span:before
93135
{
94136
content:" : ";
95137
color: #999;
96-
}
138+
}
139+
140+
button {
141+
z-index: 1;
142+
width: 120px;
143+
position: absolute;
144+
bottom: 0px;
145+
right: 50%;
146+
margin-right: -60px;
147+
}
148+
149+
#footer{
150+
color: #888;
151+
}
152+
153+
#footer cite{
154+
color: #c55;
155+
}

‎css/style.min.css

Lines changed: 4 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 69 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@
22
<html>
33
<head>
44
<title>rcSwitcher</title>
5-
<meta charset="utf-8" />
5+
<meta charset="UTF-8" >
6+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
67
<link type="text/css" rel="stylesheet" href="css/style.min.css">
78
<link type="text/css" rel="stylesheet" href="css/rcswitcher.min.css">
89
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
9-
<script type="text/javascript" src="js/rcswitcher.min.js"></script>
10-
</head>
11-
12-
<script>
10+
<script type="text/javascript" src="js/rcswitcher-3.0.0.min.js"></script>
1311

12+
<script>
1413

1514
window.onload = function(){
1615

@@ -20,14 +19,14 @@
2019
theme: 'light',
2120
// width: 70,
2221
blobOffset: 0,
23-
// inputs: true,
22+
inputs: true,
2423
autoStick: true,
2524

2625
})
2726
// Listen to status changes
2827
.on( 'turnon.rcSwitcher', function( e, data ){
2928

30-
console.log( data.$input[0].checked );
29+
// console.log( data.$input[0].checked );
3130

3231

3332
} );
@@ -56,7 +55,12 @@
5655
// autoFontSize: true,
5756
autoStick: true,
5857

59-
});
58+
}).on( 'toggle.rcSwitcher', function( e, data, type ){
59+
60+
console.log( type );
61+
62+
63+
} );
6064

6165
$('.delete :checkbox').rcSwitcher({
6266

@@ -72,20 +76,47 @@
7276

7377
});
7478

75-
};
76-
7779

78-
</script>
80+
81+
$('.toggle-radio').on( 'click', function(e){
7982

83+
if( $('input[value=male]').is(':checked' ) )
84+
$('input[value=male]').prop( 'checked', false )
85+
else
86+
$('input[value=male]').prop( 'checked', true )
8087

8188

82-
<body>
83-
84-
<section class="container clear-fix">
85-
89+
$('input[value=male]').change();
90+
91+
// console.log( $('input[value=male]')[0].checked );
92+
93+
} );
94+
95+
$('.toggle-checkbox').on( 'click', function(e){
96+
97+
if( $('input[value=access_cp]').is(':checked' ) )
98+
$('input[value=access_cp]').prop( 'checked', false )
99+
else
100+
$('input[value=access_cp]').prop( 'checked', true )
101+
102+
103+
$('input[value=access_cp]').change();
104+
105+
// console.log( $('input[value=access_cp]')[0].checked );
106+
107+
} );
108+
109+
};
110+
111+
</script>
112+
</head>
113+
<body>
114+
<section class="container clear-fix">
86115
<div class="gender block">
87116
<h4>Select Gender</h4>
88117

118+
<button class="toggle-radio" type="button">select male</button>
119+
89120
<label for="gender">Male </label><input type="radio" name="gender" value="male" ><br />
90121
<label >Female </label><input type="radio" name="gender" value="female" ><br />
91122
<label >Select </label><input type="radio" name="gender" value="select" checked >
@@ -116,6 +147,8 @@ <h4>Level</h4>
116147

117148
<div class="permissions block">
118149
<h4>Permissions</h4>
150+
151+
<button class="toggle-checkbox" type="button">toggle access_cp</button>
119152

120153
<label >Access CP</label><input type="checkbox" name="access_cp" value="access_cp"><br />
121154
<label >Manage Users </label><input type="checkbox" name="manage_users" value="manage_users" checked >
@@ -151,6 +184,27 @@ <h4>Delete users</h4>
151184

152185
</section>
153186

187+
<footer id="footer">
188+
<div>
189+
Developed By Ahmed Saad &copy; 2015-2016<br />
190+
<small>a7mad.sa3d.2014@gmail.com</small><br />
191+
<cite title="telephone">tel: +2 01011772100</cite>
192+
</div>
193+
</footer>
194+
195+
<!-- Foot Scripts -->
196+
<script type="text/javascript">
197+
198+
// sticky Footer
199+
var footer = document.getElementById( 'footer' );
200+
201+
var footerHeight = footer.scrollHeight,
202+
body = document.getElementsByTagName('body')[0];
203+
204+
body.style.marginBottom = footerHeight + 'px';
205+
206+
207+
</script>
154208

155209
</body>
156210

0 commit comments

Comments
 (0)