Hybrid View

  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,754
    Vote Rating
    828
    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/

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi