PDA

View Full Version : iOS 5 Toggle



gypsie
31 Mar 2012, 5:27 PM
Here is a little hack to emulate iOS 5 toggle in Sencha touch 2. I needed one for myself so hopefully someone will find this useful.

here is the js:

{xtype: 'togglefield',
label: 'iOS 5 Toggle',
cls: 'ios5_toggle',
listeners: {
initialize: function () {

var me = this;
var mec = this.getComponent();
var mythumb = this.element.down('.x-thumb');
var mytoggle = this.element.down('.x-toggle');
var myelement = this.element;

mythumb.on({
// this improves the ON/OFF effect
drag: {
fn: function () {
var value,oldvalue,onCls,offCls;
value = me.getValue();
onCls = me.getMaxValueCls(),
offCls = me.getMinValueCls();
if(value != oldvalue) {
mytoggle.addCls(value ? onCls : offCls);
mytoggle.removeCls(value ? offCls : onCls);
}
oldvalue = value;
}
},
// this improves the tap action (responds to tap on thumb)
tap: {
fn: function (e,t) {
var value,oldValue,onCls,offCls,thumb;
oldValue = me.getValue();
value = ((me.getValue()==1) ? 0 : 1);
mec.setIndexValue(0, value, mec.getAnimation());
onCls = me.getMaxValueCls(),
offCls = me.getMinValueCls();
mytoggle.addCls(value ? onCls : offCls);
mytoggle.removeCls(value ? offCls : onCls);
}
}
});

}, // initialize
} // listeners
},

here is the css (put this somewhere AFTER the main css):

/* ------------------ *//* IOS5 TOGGLE
/* ------------------ */
.ios5_toggle .x-toggle {
float:right;
top:.45em;
right:1.8em;
border: 0.1em solid #888888;
width: 4.7em;
height:1.7em;
}


.ios5_toggle .x-thumb{
width: 1.6em; /*adjust track*/
}


.ios5_toggle .x-thumb:before {
width: 1.7em;
height:1.7em;
top: -.06em;
left: -.06em;


box-shadow: inset 0 2px 1px white, inset 0 -2px 1px white ;
background-color: #dfdfdf !important;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dfdfdf), to(#ffffff));
}


.ios5_toggle .x-toggle-on {
background-color: #369aee;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007fea), to(#6EAFE6));
-webkit-box-shadow: inset .4em .9em .1em 0 rgba(0,0,0,0.05), inset .1em .1em .3em 0 rgba(0,0,0,0.4);
box-shadow: inset .4em .9em .1em 0 rgba(0,0,0,0.1), inset .1em .1em .3em 0 rgba(0,0,0,0.4);
}


.ios5_toggle .x-toggle-on:before {
position:absolute;
content:'ON';
font-size: 1.0em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:-.05em;
color: #fff;
left: 1em;
top: .28em;
}


.ios5_toggle .x-toggle-off {
background-color: #fff !important;
background-image: none;
-webkit-box-shadow: inset -.4em .9em .1em 0 rgba(0,0,0,0.05), inset -.1em .1em .3em 0 rgba(0,0,0,0.4);
box-shadow: inset -.4em .9em .1em 0 rgba(0,0,0,0.1), inset -.1em .1em .3em 0 rgba(0,0,0,0.4);
}


.ios5_toggle .x-toggle-off:before {
position:absolute;
content:'OFF';
font-size: 1.0em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:-.05em;
color: #999;
left: 2em;
top: .28em;
}

here is the screenshot:
33393

mitchellsimoens
1 Apr 2012, 8:24 AM
Moved to showcases forum.

dgotty
20 Jun 2012, 10:08 AM
Works perfectly thanks!

Arise
4 Oct 2012, 11:32 AM
Not perfect, as it seems that it does not properly fires the change event.

Sometimes it fires only when the toggle goes in one direction, sometimes it doesn't fire at all, and sometimes it fires just fine.


{
xtype: 'iostoggle',
name: 'show_mobile',
layout:'hbox',
label: 'Show Mobile',
value: false,
listeners: {
change: function(){
console.log('toggle changed');
}
}
},

dgotty
4 Oct 2012, 12:39 PM
Not sure if this has anything to do with it but why do you have a layout of hbox on the toggle field?

luckyshot
11 Oct 2012, 4:30 AM
Thanks gypsie, it didn't work for me so I coded my own which only needs 7 lines of CSS (images embedded). Here's a preview:

39290

Code is here, just copy and paste into a CSS file.
http://xaviesteve.com/3375/sencha-touch-2-toggle-buttons-like-in-ios/

ttupd8
28 Oct 2012, 12:47 PM
Love it! Nice work!! All in CSS - impressive!

Kurt001
17 Nov 2012, 12:38 PM
I love it.

for those you can't get it to work.
you still need to make the same changes to the design, as if you where using sencha toggle.

I love it.

Sno
5 Apr 2013, 7:45 PM
This didn't work perfect for me right out of 2.1.1 so here's the css that worked for me.




/* ------------------ *//* IOS5 TOGGLE
/* ------------------ */


.ios5_toggle .x-form-label {
color: $form-bg-color;
opacity:0;
}
.ios5_toggle .x-toggle {
float:right;
top:.45em;
right:1.8em;
border: 0.1em solid #888888;
width: 4.7em;
background-color: $form-bg-color;
color:green;
}


.ios5_toggle .x-thumb:before {
width: 1.7em;
box-shadow: inset 0 2px 1px white, inset 0 -2px 1px white ;
background-color: #dfdfdf !important;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dfdfdf), to(#ffffff));
}




.ios5_toggle .x-toggle-on {
background-color: #369aee;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007fea), to(#6EAFE6));
-webkit-box-shadow: inset .4em .9em .1em 0 rgba(0,0,0,0.05), inset .1em .1em .3em 0 rgba(0,0,0,0.4);
box-shadow: inset .4em .9em .1em 0 rgba(0,0,0,0.1), inset .1em .1em .3em 0 rgba(0,0,0,0.4);
}




.ios5_toggle .x-toggle-on:before {
position:absolute;
content:'ON';
font-size: 1.0em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:-.05em;
color: #fff;
left: 1em;
top: .35em;
}




.ios5_toggle .x-toggle-off {
background-color: #fff !important;
background-image: none;
-webkit-box-shadow: inset -.4em .9em .1em 0 rgba(0,0,0,0.05), inset -.1em .1em .3em 0 rgba(0,0,0,0.4);
box-shadow: inset -.4em .9em .1em 0 rgba(0,0,0,0.1), inset -.1em .1em .3em 0 rgba(0,0,0,0.4);
}




.ios5_toggle .x-toggle-off:before {
position:absolute;
content:'OFF';
font-size: 1.0em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:-.05em;
color: #999;
left: 2em;
top: .35em;
}