šŸŒ“

Sencha Touch 2 – Toggle buttons like in iOs I’m developing an iPhone app here at work using PhoneGap/Cordova and Sencha Touch 2 and the default Toggle button is too big and very different from the iOS look and feel. So I’ve put together a piece of CSS you can copy and paste in your projects and will replace all the toggle buttons in […]

by
on October 11, 2012
(1 minute read)

I’m developing an iPhone app here at work using PhoneGap/Cordova and Sencha Touch 2 and the default Toggle button is too big and very different from the iOS look and feel. So I’ve put together a piece of CSS you can copy and paste in your projects and will replace all the toggle buttons in Sencha. It shows great in retina display and the functionality is exactly the same as with the default Sencha Toggle.

Simple Cloud Hosting Built for Developers

Here’s a preview:

Sencha Touch 2 - Toggle field like iOS5 and iOS6

 

As you can see, the default iOS is not exactly the same as my approach since I wanted to keep the CSS code simple and short while still giving the user a nice and smooth User Experience so they are familiar with the element and its functionality.

To install it just copy and paste the code below into your CSS file. This code is for Sencha Touch version 2, for version 1 see here.

The CSS

.x-toggle {border:none;height:1.7em}
.x-thumb {height:1.7em;width:1.7em}
.x-toggle .x-thumb::before {left:0;top:0;}
.x-thumb::before {background-image: -webkit-linear-gradient(white,#CDCDCD 2%,#fff);background-image: linear-gradient(white,#CDCDCD 2%,#fff);height:1.7em;width:1.7em}
.x-toggle-on,.x-toggle-off {background-size:100% 100%;}
.x-toggle-on {background-image:url('data:image/png;base64,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');}

.x-toggle-off {background-image:url('data:image/png;base64,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')}

Things Iā€™m buying on Amazon this week

The JavaScript

No need to change anything, just a normal toggle:

{
	xtype: 'togglefield',
	name: 'togglebutton',
	label: 'Toggle me!',
	value: 1
},

Free 100% online banking account

šŸ’³ Get your free debit Mastercard

3 comments

  • Hektor says:

    Nice work!

    I tried it on my Chrome,seems malposition of thumb on the toggle

    btw, the toggle is not located in the center

  • Hektor says:

    after override the size and radius of thumb,it seems work perfect!

    .x-thumb:after {
    content: “”;
    position: absolute;
    width: 1.43em;
    height: 1.43em;
    top: 0.135em;
    left: 0.135em;
    border: 1px solid #919191;
    -webkit-border-radius: 0.715em;
    border-radius: 0.715em;
    background-image: none;
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(3%, #eaeaea), color-stop(100%, #d0d0d0));
    background-image: -webkit-linear-gradient(top, #ffffff, #eaeaea 3%, #d0d0d0);
    background-image: linear-gradient(top, #ffffff, #eaeaea 3%, #d0d0d0);
    -webkit-background-clip: padding;
    background-clip: padding-box;
    }

  • Raviraj Kakade says:

    Nice… Xavi.. it’s work fine

Treasure Chest

Get notified of new projects I make
Usually one email every 3 months

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));*/ /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();