1. #1
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default Animated iOS (iPhone/iPad) style On/Off toggle

    Animated iOS (iPhone/iPad) style On/Off toggle


    I took this a bit further, since I wanted an on/off that animates like the one in iOS. Here's the full code, along with the image for the slider if you want to use that instead of the base64 embed.

    Code:
    <html>
      <head>
        <title>test</title>
    
        <link rel="stylesheet" href="../sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
        <script type="text/javascript" src="../sencha-touch-1.1.0/sencha-touch-debug-w-comments.js"></script>  
    
        <style type="text/css">
          .x-field-toggle .x-input-onofftoggle.x-slider {
            -webkit-border-radius: 0em;
            width:95px;
            height:27px;
            border: none;
            /* background-image: url('images/onoff_toggle.png'); */
            background-image: url('data:image/png;base64,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');
            background-repeat: no-repeat;
            background-color: inherit;
            background-position: -53px;
            -webkit-transition-property: background-position;
            -webkit-transition-duration: 0.2s;
            -moz-transition-property: background-position;
            -moz-transition-duration: 0.2s;
          }
          
          .x-field-toggle .x-input-onofftoggle.x-slider.x-toggle-on {
            background-position: 0;
          }
          
          .x-field-toggle .x-input-onofftoggle.x-slider.x-toggle-off {
            background-position: -53px;
          }
          
          .x-field-toggle .x-input-onofftoggle .x-thumb::before{
            display:none;
          }   
        </style>
        
        <script type="text/javascript">
    Ext.setup({
      onReady: function() {
        
        //var 
        mainPnl = new Ext.Panel({
          scroll:'vertical',
          fullscreen:true,
          items:{
            xtype:'formpanel',
            items:[
              {
                xtype:'togglefield',
                label:'Regular toggle'
              },
              {
                xtype:'togglefield',
                label:'On/Off toggle',
                inputType:'onofftoggle'
              }
            ]
          }
        });
      }      
    });
        </script>    
    </head>
    <body>
    </body>
    </html>
    I haven't tested this very widely (actually, not even on my iPad/iPhone, only in Chrome) yet, so there are possibly some shortcomings. I'm also not particularly happy with how it has to just hide a bunch of stuff in the existing toggle.

    But it works, which is a good first step.
    Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Location
    Shanghai
    Posts
    71
    Vote Rating
    0
    perry_jia is on a distinguished road

      0  

    Default


    Thank you, you are a terrific guy.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    0
    sandeep_tp is on a distinguished road

      0  

    Default Localization

    Localization


    Since you are putting images for the toggle on/off, how would this work in case we have same screen supporting multi lingual. Do you have any solution for this?

Thread Participants: 2

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