iOS 5 Toggle

[gypsie]

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:
ios5toggle.png

[mitchellsimoens]

Moved to showcases forum.

[dgotty]

Works perfectly thanks!

[Arise]

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]

Not sure if this has anything to do with it but why do you have a layout of hbox on the toggle field?

[luckyshot]

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:

sencha-touch-2-toggle-button-ios-like-iphone.png

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

[ttupd8]

Love it! Nice work!! All in CSS - impressive!

[Kurt001]

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]

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;
}