Results 1 to 9 of 9

Thread: iOS 5 Toggle

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    Sacramento, California
    Posts
    75
    Vote Rating
    11
      2  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Moved to showcases forum.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    42
    Vote Rating
    6
      0  

    Default Thanks

    Works perfectly thanks!

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    4
    Vote Rating
    0
      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 Premium User
    Join Date
    Mar 2011
    Location
    Philadelphia
    Posts
    42
    Vote Rating
    6
      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
      0  

    Default 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/

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •