1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    Sacramento, California
    Posts
    75
    Vote Rating
    8
    gypsie is on a distinguished road

      2  

    Default iOS 5 Toggle

    iOS 5 Toggle


    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:
    Code:
    {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):
    Code:
    /* ------------------ *//* 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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Moved to showcases forum.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      0  

    Default Thanks

    Thanks


    Works perfectly thanks!

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    4
    Vote Rating
    0
    Arise is on a distinguished road

      0  

    Default


    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.

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

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    30
    Vote Rating
    3
    dgotty is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    luckyshot is on a distinguished road

      0  

    Default Sencha Touch 2 - Toggle buttons like in iOs

    Sencha Touch 2 - Toggle buttons like in iOs


    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/

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    ttupd8 is on a distinguished road

      0  

    Default Brilliant!

    Brilliant!


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

  8. #8
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    574
    Vote Rating
    31
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default Love it

    Love it


    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.

  9. #9
    Sencha User
    Join Date
    Apr 2010
    Posts
    29
    Vote Rating
    1
    Sno is on a distinguished road

      0  

    Default


    This didn't work perfect for me right out of 2.1.1 so here's the css that worked for me.


    Code:
    /* ------------------ *//* 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;
    }