javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

removed div.track from toggle

Browse Source
This commit is contained in:
Adam Bradley
2013-10-17 11:46:48 -05:00
parent ac8da1dccf
commit 02cf3872a1
10 changed files with 189 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
dist/css/ionic-scoped.css vendored
View File

@ -177,13 +177,14 @@
/** /**
* List refreser elements * List refreser elements
*/ */
/* the checkmark within the box */
/* what the background looks like when its checked */
/* what the checkmark looks like when its checked */
/* the overall container of the toggle */ /* the overall container of the toggle */
/* hide the actual <input type="checkbox"> */
/* the background of the toggle's track area */
/* also the track appearance when the toggle is "off" */
/* the handle (circle) thats inside the toggle's track area */ /* the handle (circle) thats inside the toggle's track area */
/* also the appearance when the handle is "off" */ /* also the appearance when the handle is "off" */
/* When the toggle is "on" */ /* The track when the toggle is "on" */
/* the handle when the toggle is "on" */
@keyframes fadein { @keyframes fadein {
from { from {
opacity: 0.7; } opacity: 0.7; }
@ -2121,62 +2122,81 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 7px 7px; padding: 7px 7px;
cursor: pointer; }
.ionic .checkbox input {
position: relative;
width: 28px;
height: 28px;
border: 0;
background: transparent;
cursor: pointer; cursor: pointer;
/* what the checkbox looks like when its not checked */ -webkit-appearance: none; }
/* the checkmark within the box */ .ionic .checkbox input:before {
/* what it looks like when it is checked */ } /* what the checkbox looks like when its not checked */
.ionic .checkbox input { display: table;
display: none; } width: 100%;
.ionic .checkbox .handle { height: 100%;
width: 28px;
height: 28px;
border: 1px solid #049cdb; border: 1px solid #049cdb;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color 0.1s ease-in-out; }
.ionic .checkbox .handle:after { .ionic .checkbox input:after {
position: absolute; position: absolute;
top: 37%; top: 37%;
left: 14px; left: 26%;
width: 14px; display: table;
height: 7px; width: 14px;
border: 1px solid white; height: 7px;
border-top: none; border: 1px solid white;
border-right: none; border-top: none;
content: ''; border-right: none;
opacity: 0; content: ' ';
transition: opacity 0.05s ease-in-out; opacity: 0;
-webkit-transform: rotate(-45deg); transition: opacity 0.05s ease-in-out;
transform: rotate(-45deg); } -webkit-transform: rotate(-45deg);
.ionic .checkbox input:checked + .handle { transform: rotate(-45deg); }
background: #049cdb; } .ionic .checkbox input:checked:before {
.ionic .checkbox input:checked + .handle:after { border: 0;
opacity: 1; } background: #049cdb; }
.ionic .checkbox input:checked:after {
opacity: 1; }
.ionic .toggle { .ionic .toggle {
position: relative;
display: inline-block; } display: inline-block; }
.ionic .toggle input[type="checkbox"] { .ionic .toggle input {
display: none; } /* set the actual checkbox input to have a width/height */
.ionic .toggle .track { /* but hide its appearance, then use :after to style it */
display: inline-block;
box-sizing: border-box;
width: 54px; width: 54px;
height: 32px; height: 32px;
border: solid 2px #e5e5e5; border: 0;
border-radius: 20px; background: transparent;
background-color: #e5e5e5; -webkit-appearance: none;
cursor: pointer; /* the track appearance when the toggle is "off" */ }
transition-timing-function: ease-in-out; .ionic .toggle input:after {
transition-duration: 0.1s; display: inline-block;
transition-property: background-color, border; } box-sizing: border-box;
width: 100%;
height: 100%;
border: solid 2px #e5e5e5;
border-radius: 20px;
background-color: #e5e5e5;
content: ' ';
cursor: pointer;
transition-timing-function: ease-in-out;
transition-duration: 0.1s;
transition-property: background-color, border; }
.ionic .toggle .handle { .ionic .toggle .handle {
position: absolute; position: absolute;
top: 6px;
left: 2px;
display: block; display: block;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
transition: -webkit-transform 0.1s ease-in-out; transition: -webkit-transform 0.1s ease-in-out;
/* used to create a larger hit area to slide the handle */ } /* used to create a larger (but hidden) hit area to slide the handle */ }
.ionic .toggle .handle:before { .ionic .toggle .handle:before {
position: absolute; position: absolute;
top: -2px; top: -2px;
@ -2184,14 +2204,12 @@
display: table; display: table;
padding: 17px 30px; padding: 17px 30px;
content: " "; } content: " "; }
.ionic .toggle :checked + .track { .ionic .toggle input:checked:after {
/* the track when the toggle is "on" */
border-color: #5f85ef; border-color: #5f85ef;
background-color: #5f85ef; background-color: #5f85ef; }
/* the handle when the toggle is "on" */ } .ionic .toggle input:checked + .handle {
.ionic .toggle :checked + .track .handle { background-color: white;
background-color: white; -webkit-transform: translate3d(22px, 0, 0); }
-webkit-transform: translate3d(22px, 0, 0); }
.ionic .radio-buttton-list .list-item-content { .ionic .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */ /* give some room to the right for the checkmark icon */
padding-right: 60px; } padding-right: 60px; }

124
dist/css/ionic.css vendored
View File

@ -2591,72 +2591,94 @@ input[type="checkbox"][readonly] {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 7px 7px; padding: 7px 7px;
cursor: pointer; }
.checkbox input {
position: relative;
width: 28px;
height: 28px;
border: 0;
background: transparent;
cursor: pointer; cursor: pointer;
/* what the checkbox looks like when its not checked */ -webkit-appearance: none; }
/* the checkmark within the box */ .checkbox input:before {
/* what it looks like when it is checked */ } /* what the checkbox looks like when its not checked */
.checkbox input { display: table;
display: none; } width: 100%;
.checkbox .handle { height: 100%;
width: 28px;
height: 28px;
border: 1px solid #049cdb; border: 1px solid #049cdb;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color 0.1s ease-in-out; }
.checkbox .handle:after {
position: absolute; /* the checkmark within the box */
top: 37%; .checkbox input:after {
left: 14px; position: absolute;
width: 14px; top: 37%;
height: 7px; left: 26%;
border: 1px solid white; display: table;
border-top: none; width: 14px;
border-right: none; height: 7px;
content: ''; border: 1px solid white;
opacity: 0; border-top: none;
transition: opacity 0.05s ease-in-out; border-right: none;
-webkit-transform: rotate(-45deg); content: ' ';
transform: rotate(-45deg); } opacity: 0;
.checkbox input:checked + .handle { transition: opacity 0.05s ease-in-out;
background: #049cdb; } -webkit-transform: rotate(-45deg);
.checkbox input:checked + .handle:after { transform: rotate(-45deg); }
opacity: 1; }
/* what the background looks like when its checked */
.checkbox input:checked:before {
border: 0;
background: #049cdb; }
/* what the checkmark looks like when its checked */
.checkbox input:checked:after {
opacity: 1; }
/* the overall container of the toggle */ /* the overall container of the toggle */
.toggle { .toggle {
position: relative;
display: inline-block; } display: inline-block; }
/* hide the actual <input type="checkbox"> */ .toggle input {
.toggle input[type="checkbox"] { /* set the actual checkbox input to have a width/height */
display: none; } /* but hide its appearance, then use :after to style it */
/* the background of the toggle's track area */
/* also the track appearance when the toggle is "off" */
.toggle .track {
display: inline-block;
box-sizing: border-box;
width: 54px; width: 54px;
height: 32px; height: 32px;
border: solid 2px #e5e5e5; border: 0;
border-radius: 20px; background: transparent;
background-color: #e5e5e5; -webkit-appearance: none;
cursor: pointer; /* the track appearance when the toggle is "off" */ }
transition-timing-function: ease-in-out; .toggle input:after {
transition-duration: 0.1s; display: inline-block;
transition-property: background-color, border; } box-sizing: border-box;
width: 100%;
height: 100%;
border: solid 2px #e5e5e5;
border-radius: 20px;
background-color: #e5e5e5;
content: ' ';
cursor: pointer;
transition-timing-function: ease-in-out;
transition-duration: 0.1s;
transition-property: background-color, border; }
/* the handle (circle) thats inside the toggle's track area */ /* the handle (circle) thats inside the toggle's track area */
/* also the appearance when the handle is "off" */ /* also the appearance when the handle is "off" */
.toggle .handle { .toggle .handle {
position: absolute; position: absolute;
top: 6px;
left: 2px;
display: block; display: block;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
transition: -webkit-transform 0.1s ease-in-out; transition: -webkit-transform 0.1s ease-in-out;
/* used to create a larger hit area to slide the handle */ } /* used to create a larger (but hidden) hit area to slide the handle */ }
.toggle .handle:before { .toggle .handle:before {
position: absolute; position: absolute;
top: -2px; top: -2px;
@ -2665,15 +2687,15 @@ input[type="checkbox"][readonly] {
padding: 17px 30px; padding: 17px 30px;
content: " "; } content: " "; }
/* When the toggle is "on" */ /* The track when the toggle is "on" */
.toggle :checked + .track { .toggle input:checked:after {
/* the track when the toggle is "on" */
border-color: #5f85ef; border-color: #5f85ef;
background-color: #5f85ef; background-color: #5f85ef; }
/* the handle when the toggle is "on" */ }
.toggle :checked + .track .handle { /* the handle when the toggle is "on" */
background-color: white; .toggle input:checked + .handle {
-webkit-transform: translate3d(22px, 0, 0); } background-color: white;
-webkit-transform: translate3d(22px, 0, 0); }
.radio-buttton-list .list-item-content { .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */ /* give some room to the right for the checkmark icon */

13
dist/js/ionic-angular.js vendored
View File

@ -692,28 +692,21 @@ angular.module('ionic.ui.toggle', [])
replace: true, replace: true,
require: '?ngModel', require: '?ngModel',
scope: true, scope: true,
template: '<div class="toggle">' + template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
' <input type="checkbox">'+
' <div class="track">' +
' <div class="handle"></div>' +
' </div>' +
'</div>',
link: function($scope, $element, $attr, ngModel) { link: function($scope, $element, $attr, ngModel) {
var checkbox, track, handle; var checkbox, handle;
if(!ngModel) { return; } if(!ngModel) { return; }
checkbox = $element.children().eq(0); checkbox = $element.children().eq(0);
track = $element.children().eq(1);
handle = track.children().eq(0); handle = track.children().eq(0);
if(!checkbox.length || !track.length || !handle.length) { return; } if(!checkbox.length || !handle.length) { return; }
$scope.toggle = new ionic.views.Toggle({ $scope.toggle = new ionic.views.Toggle({
el: $element[0], el: $element[0],
checkbox: checkbox[0], checkbox: checkbox[0],
track: track[0],
handle: handle[0] handle: handle[0]
}); });

18
dist/js/ionic.js vendored
View File

@ -2875,20 +2875,8 @@ ionic.views.TabBar.prototype = {
ionic.views.Toggle = function(opts) { ionic.views.Toggle = function(opts) {
this.el = opts.el; this.el = opts.el;
this.checkbox = opts.checkbox; this.checkbox = opts.checkbox;
this.track = opts.track;
this.handle = opts.handle; this.handle = opts.handle;
this.openPercent = -1; this.openPercent = -1;
/*
// remember that this element, and all its children are apart of a component
// and assign the component instance to each element so the lookups
// only has to go through this process just once
this.el.isComponent = true;
this.track.component = this;
this.track.isComponent = true;
this.handle.component = this;
this.handle.isComponent = true;
*/
}; };
ionic.views.Toggle.prototype = { ionic.views.Toggle.prototype = {
@ -2898,8 +2886,8 @@ ionic.views.TabBar.prototype = {
}, },
drag: function(e) { drag: function(e) {
var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2); var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2); var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
if(e.pageX >= slidePageRight - 4) { if(e.pageX >= slidePageRight - 4) {
this.val(true); this.val(true);
@ -2920,7 +2908,7 @@ ionic.views.TabBar.prototype = {
} else if(openPercent === 100) { } else if(openPercent === 100) {
this.val(true); this.val(true);
} else { } else {
var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) ); var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
openPixel = (openPixel < 1 ? 0 : openPixel); openPixel = (openPixel < 1 ? 0 : openPixel);
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)'; this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
} }

13
js/ext/angular/src/directive/ionicToggle.js vendored
View File

@ -8,28 +8,21 @@ angular.module('ionic.ui.toggle', [])
replace: true, replace: true,
require: '?ngModel', require: '?ngModel',
scope: true, scope: true,
template: '<div class="toggle">' + template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
' <input type="checkbox">'+
' <div class="track">' +
' <div class="handle"></div>' +
' </div>' +
'</div>',
link: function($scope, $element, $attr, ngModel) { link: function($scope, $element, $attr, ngModel) {
var checkbox, track, handle; var checkbox, handle;
if(!ngModel) { return; } if(!ngModel) { return; }
checkbox = $element.children().eq(0); checkbox = $element.children().eq(0);
track = $element.children().eq(1);
handle = track.children().eq(0); handle = track.children().eq(0);
if(!checkbox.length || !track.length || !handle.length) { return; } if(!checkbox.length || !handle.length) { return; }
$scope.toggle = new ionic.views.Toggle({ $scope.toggle = new ionic.views.Toggle({
el: $element[0], el: $element[0],
checkbox: checkbox[0], checkbox: checkbox[0],
track: track[0],
handle: handle[0] handle: handle[0]
}); });

3
js/ext/simple/toggle.js
View File

@ -18,12 +18,11 @@
var opts = { var opts = {
el: el, el: el,
checkbox: el.querySelector("input[type='checkbox']"), checkbox: el.querySelector("input[type='checkbox']"),
track: el.querySelector(".track"),
handle: el.querySelector(".handle") handle: el.querySelector(".handle")
}; };
// validate its a well formed toggle with the required pieces // validate its a well formed toggle with the required pieces
if(!opts.checkbox || !opts.track || !opts.handle) return; if(!opts.checkbox || !opts.handle) return;
// initialize an instance of a Toggle // initialize an instance of a Toggle
el.component = new ionic.views.Toggle(opts); el.component = new ionic.views.Toggle(opts);

18
js/views/toggleView.js
View File

@ -4,20 +4,8 @@
ionic.views.Toggle = function(opts) { ionic.views.Toggle = function(opts) {
this.el = opts.el; this.el = opts.el;
this.checkbox = opts.checkbox; this.checkbox = opts.checkbox;
this.track = opts.track;
this.handle = opts.handle; this.handle = opts.handle;
this.openPercent = -1; this.openPercent = -1;
/*
// remember that this element, and all its children are apart of a component
// and assign the component instance to each element so the lookups
// only has to go through this process just once
this.el.isComponent = true;
this.track.component = this;
this.track.isComponent = true;
this.handle.component = this;
this.handle.isComponent = true;
*/
}; };
ionic.views.Toggle.prototype = { ionic.views.Toggle.prototype = {
@ -27,8 +15,8 @@
}, },
drag: function(e) { drag: function(e) {
var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2); var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2); var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
if(e.pageX >= slidePageRight - 4) { if(e.pageX >= slidePageRight - 4) {
this.val(true); this.val(true);
@ -49,7 +37,7 @@
} else if(openPercent === 100) { } else if(openPercent === 100) {
this.val(true); this.val(true);
} else { } else {
var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) ); var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
openPixel = (openPixel < 1 ? 0 : openPixel); openPixel = (openPixel < 1 ? 0 : openPixel);
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)'; this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
} }

59
scss/ionic/_toggle.scss
View File

@ -4,35 +4,43 @@
/* the overall container of the toggle */ /* the overall container of the toggle */
.toggle { .toggle {
position: relative;
display: inline-block; display: inline-block;
} }
/* hide the actual <input type="checkbox"> */ .toggle input {
.toggle input[type="checkbox"] { /* set the actual checkbox input to have a width/height */
display: none; /* but hide its appearance, then use :after to style it */
}
/* the background of the toggle's track area */
/* also the track appearance when the toggle is "off" */
.toggle .track {
display: inline-block;
box-sizing: border-box;
width: $toggle-width; width: $toggle-width;
height: $toggle-height; height: $toggle-height;
border: solid $toggle-border-width $toggle-off-border-color; border: 0;
border-radius: $toggle-border-radius; background: transparent;
background-color: $toggle-off-bg-color; -webkit-appearance: none;
cursor: pointer;
transition-timing-function: ease-in-out; /* the track appearance when the toggle is "off" */
transition-duration: $toggle-transition-duration; &:after {
transition-property: background-color, border; display: inline-block;
box-sizing: border-box;
width: 100%;
height: 100%;
border: solid $toggle-border-width $toggle-off-border-color;
border-radius: $toggle-border-radius;
background-color: $toggle-off-bg-color;
content: ' ';
cursor: pointer;
transition-timing-function: ease-in-out;
transition-duration: $toggle-transition-duration;
transition-property: background-color, border;
}
} }
/* the handle (circle) thats inside the toggle's track area */ /* the handle (circle) thats inside the toggle's track area */
/* also the appearance when the handle is "off" */ /* also the appearance when the handle is "off" */
.toggle .handle { .toggle .handle {
position: absolute; position: absolute;
top: ($toggle-height - $toggle-handle-height) + $toggle-border-width;
left: $toggle-border-width;
display: block; display: block;
width: $toggle-handle-width; width: $toggle-handle-width;
height: $toggle-handle-height; height: $toggle-handle-height;
@ -40,7 +48,7 @@
background-color: $toggle-handle-off-bg-color; background-color: $toggle-handle-off-bg-color;
transition: -webkit-transform $toggle-transition-duration ease-in-out; transition: -webkit-transform $toggle-transition-duration ease-in-out;
/* used to create a larger hit area to slide the handle */ /* used to create a larger (but hidden) hit area to slide the handle */
&:before { &:before {
position: absolute; position: absolute;
top: -2px; top: -2px;
@ -51,17 +59,14 @@
} }
} }
/* The track when the toggle is "on" */
/* When the toggle is "on" */ .toggle input:checked:after {
.toggle :checked + .track {
/* the track when the toggle is "on" */
border-color: $toggle-on-border-color; border-color: $toggle-on-border-color;
background-color: $toggle-on-bg-color; background-color: $toggle-on-bg-color;
}
/* the handle when the toggle is "on" */ /* the handle when the toggle is "on" */
.handle { .toggle input:checked + .handle {
background-color: $toggle-handle-on-bg-color; background-color: $toggle-handle-on-bg-color;
-webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0); -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
}
} }

4
test/index.html
View File

@ -29,7 +29,7 @@
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p> <p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p> <p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p> <p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p>
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p> <p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star"></i> Input: Toggle</a></p>
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p> <p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p> <p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
<p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p> <p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
@ -51,7 +51,5 @@
} }
</script> </script>
<script src="../dist/js/ionic.js"></script>
</body> </body>
</html> </html>

9
test/input-toggle.html
View File

@ -22,18 +22,14 @@
Airplane Mode Airplane Mode
<label class="toggle" id="airplaneMode"> <label class="toggle" id="airplaneMode">
<input type="checkbox" name="airplaneMode"> <input type="checkbox" name="airplaneMode">
<div class="track"> <div class="handle"></div>
<div class="handle"></div>
</div>
</label> </label>
</li> </li>
<li class="list-item"> <li class="list-item">
Do Not Disturb Do Not Disturb
<label class="toggle" id="doNotDisturb"> <label class="toggle" id="doNotDisturb">
<input type="checkbox" name="doNotDisturb" checked="checked"> <input type="checkbox" name="doNotDisturb" checked="checked">
<div class="track"> <div class="handle"></div>
<div class="handle"></div>
</div>
</label> </label>
</li> </li>
</ul> </ul>
@ -57,7 +53,6 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../dist/js/ionic.js"></script> <script src="../dist/js/ionic.js"></script>
<script src="../dist/js/ionic-simple.js"></script>
<!-- for testing only --> <!-- for testing only -->