Results 1 to 3 of 3

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    24
      0  

    Default 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 Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Location
    Shanghai
    Posts
    71
    Vote Rating
    3
      0  

    Default

    Thank you, you are a terrific guy.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    0
      0  

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

Posting Permissions

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