PDA

View Full Version : On/Off toggle buttom



tomalex0
13 Sep 2010, 8:56 PM
Hi,

A small tweak in css gave me usual Toggle Button that we used to see in Iphone

Example


{
xtype: 'toggle',
name: 'single_toggle',
value : 1
}


Css



.x-field-toggle .x-slider {
-webkit-border-radius: 0em;
-webkit-box-shadow: inset rgba(0, 0, 0, 0) 0 0 0;
}


.x-field-toggle .x-slider .x-field-thumb:after {
position: absolute;
width: 2.5em;
height: 2.5em;
top: 0;
left: 0;
-webkit-box-shadow: rgba(0, 0, 0, 0) 0 0 0em;
-webkit-border-radius: 0em;
-webkit-transform: scale(0);
border: none;
background:none;
overflow: visible;
z-index: 2;
}

.x-field-toggle .x-slider.x-toggle-on {
-webkit-appearance: none;
background: url(checkbox_on.png);
width: 94px;
height: 27px;
border: 0;
float: left;
margin: 8px 4px 0 5px;
}

.x-field-toggle .x-slider.x-toggle-off {
-webkit-appearance: none;
background: url(checkbox_off.png);
width: 94px;
height: 27px;
border: 0;
float: left;
margin: 8px 4px 0 5px;
}

14 Sep 2010, 4:56 AM
Is this a question? I'm confused.

aconran
14 Sep 2010, 10:52 AM
tomalex0 is showing some custom styling to get iPhone style toggles.

14 Sep 2010, 10:59 AM
Cool. Moved to examples/showcases.


Should we offer an extensions forum?

corvonero
14 Sep 2010, 2:18 PM
Cool. Moved to examples/showcases.


Should we offer an extensions forum?

ABSOLUTELY YES!!

tomalex0
12 Jan 2011, 9:53 AM
Modified css compatible with 1.01a version



.x-field-toggle .x-slider {
-webkit-border-radius: 0em;
width:5.6em;
height:1.6em;
border: 0;


}

.x-field-toggle .x-slider.x-toggle-on {
background: url(checkbox_on.png) no-repeat;
}

.x-field-toggle .x-slider.x-toggle-off {
background: url(checkbox_off.png) no-repeat;
}

.x-field-toggle .x-thumb::before{
-webkit-box-shadow:none;
background-color:transparent;
border:none;
background-image:none;
}

AndreaCammarata
12 Jan 2011, 10:59 AM
Really nice tweak tomalex.

For Sencha team: Yes please activate a Sencha Ux forum, I was wondering if this was possible in a thread I open some weeks ago.
http://www.sencha.com/forum/showthread.php?118590-Sencha-Touch-Ux-forum-section

bbriot
5 Apr 2011, 1:56 AM
just a little message to indicate that :

xtype: 'toggle', line code, must be replace with this one :

xtype: 'togglefield',

And with this modification, it will work great with senchaTouch 1.1

headkit
23 Jun 2011, 5:46 AM
is there a way where you could use the css3-background-gradients and adding a transparent PNG with the button state titles? maybe by adding one more <span>-tag to the togglefield?

Gatoche
19 Jul 2011, 6:30 AM
Thanks for publishing, works great.
It's just what i was looking for.

Thanks a lot.

tomalex0
25 Aug 2011, 5:08 AM
Hi,

I got few feedbacks regarding earlier implementaion if it can be done using CSS3.
So tried to implement ios toggle field with using CSS3 techniques. I think i'm almost got it right :)

css techniques are shared from http://development.tobypitman.com/iphoneCheckboxes/iphoneCheckboxes2.html

I have not done much change in exisiting togglefield i just added a functionality to change the state text.
I thought to kept it as a separate component.

You may also find bit odd as the State text are specified in the thumb itself. I think there areas where we can better the way CSS are laid out, feel free to inform me if it can be written in a better way.

Features
Look and feel of ios toggle field with CSS3
Custom text for min and max state (I have not tackled the issue if text is long)


Main IosToggleField


/**
* @class Ext.form.iosToggle
* @extends Ext.form.Toggle
* <p>Specialized Slider with a single thumb and only two values. By default the toggle component can
* be switched between the values of 0 and 1.</p>
* @xtype iostogglefield
*/
Ext.form.iosToggle = Ext.extend(Ext.form.Toggle, {

/**
* @cfg {String} minValueCls CSS class added to the field when toggled to its minValue
*/
minValueCls: 'x-iostoggle-off',


/**
* @cfg {String} maxValueCls CSS class added to the field when toggled to its maxValue
*/
maxValueCls: 'x-iostoggle-on',

/**
* @cfg {String} minText default text for minValue
*/
minText : 'OFF',

/**
* @cfg {String} maxText default text for maxValue
*/
maxText:'ON',

// inherit docs
setValue: function(value) {
Ext.form.iosToggle.superclass.setValue.call(this, value, this.animationDuration);


var fieldEl = this.fieldEl,thumbText;
if (this.constrain(value) === this.minValue) {
fieldEl.addCls(this.minValueCls);
fieldEl.removeCls(this.maxValueCls);
thumbText = this.minText;
}
else {
fieldEl.addCls(this.maxValueCls);
fieldEl.removeCls(this.minValueCls);
thumbText = this.maxText;
}
Ext.get(this.el.query(".x-toggle-thumb-iosthumb")[0]).update(thumbText);
},
getThumbClass: function() {
return Ext.form.Toggle.iosThumb;
}
});


Ext.reg('iostogglefield', Ext.form.iosToggle);


ios thumb


/**
* @class Ext.form.Toggle.iosThumb
* @extends Ext.form.Slider.Thumb
* @private
* @ignore
*/
Ext.form.Toggle.iosThumb = Ext.extend(Ext.form.Slider.Thumb, {
onRender: function() {
Ext.form.Toggle.iosThumb.superclass.onRender.apply(this, arguments);
Ext.DomHelper.append(this.el, [{
cls: 'x-toggle-thumb-iosthumb'
}]);
}
});


CSS



.x-toggle-thumb-iosthumb{
position:relative;
margin:0.38em 0 0 0;
text-align:center;
}


.x-iostoggle-on .x-toggle-thumb-iosthumb{
color:white;
text-shadow:0px 0px 2px rgba(0, 0, 0, 0.6);
}


.x-iostoggle-off .x-toggle-thumb-iosthumb{
position:relative;
margin:0.38em 0 0 0;
text-align:center;
text-shadow:0px 0px 2px #F4F4F4;
}


.x-field-toggle .x-slider.x-iostoggle-off, .x-field-toggle .x-slider.x-iostoggle-on{
display: block;
margin-bottom: 20px;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #555555;
width: 80px;
position: relative;
height: 32px;
}


.x-field-toggle .x-slider.x-iostoggle-off{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
}


.x-field-toggle .x-slider.x-iostoggle-on{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#white));
}


.x-iostoggle-off .x-thumb::before, .x-iostoggle-on .x-thumb::before {
content: "";
position: absolute;
width: 2.2em;
height: 1.650em;
top: 0em !important;
left: 0em !important;
-webkit-border-radius: 0.925em;
border-radius:3px;
-webkit-background-clip: padding;
background-clip: padding-box;
}
.x-iostoggle-off .x-thumb::before {
border:1px solid #E5E5E5;
background-color: white;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(white));
background-image: linear-gradient(white,#A1A1A1 2%,#white);
}


.x-iostoggle-on .x-thumb::before {
border:1px solid #1C60A5;
background-color: #14539C;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
background-image: linear-gradient(white,#14539C 2%,#3095C7);
}


How to use



{
xtype: 'iostogglefield',
name : 'enable'
label: 'Security Mode',
minText : 'M',
maxText : 'F'
}





{
xtype: 'iostogglefield',
name : 'enable'
label: 'Security Mode'
}

tomalex0
25 Aug 2011, 5:19 AM
Screen shots

27692



27693

tomalex0
25 Aug 2011, 8:49 PM
Updated Css



.x-toggle-thumb-iosthumb{
position:relative;
margin:0.5em 0 0 0;
text-align:center;
font-size: 0.9em;
font-weight :bold;
}


.x-iostoggle-on .x-toggle-thumb-iosthumb{
color:white;
text-shadow:#062547 0 -1px 0;
}


.x-iostoggle-off .x-toggle-thumb-iosthumb{
color : #666;
text-shadow:#FFFFFF 0 1px 0;
}


.x-field-toggle .x-slider.x-iostoggle-off, .x-field-toggle .x-slider.x-iostoggle-on{
display: block;
margin-bottom: 20px;
border-radius: 4px;
-moz-border-radius: 4px;
border: #777 1px solid;
width: 80px;
position: relative;
height: 32px;
}


.x-field-toggle .x-slider.x-iostoggle-off, .x-field-toggle .x-slider.x-iostoggle-on{
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #EBEBEB),color-stop(.8, #D6D6D6), color-stop(1,#A2A2A2));
border:#777 1px solid;
-webkit-box-shadow:#CCC 0 0 2px;
}


.x-iostoggle-off .x-thumb::before, .x-iostoggle-on .x-thumb::before {
content: "";
position: absolute;
width: 2.2em;
height: 1.650em;
top: 0em !important;
left: 0em !important;
-webkit-border-radius: 0.925em;
border-radius:3px;
-webkit-background-clip: padding;
background-clip: padding-box;

}
.x-iostoggle-off .x-thumb::before {
border:1px solid #E5E5E5;
background-color: white;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(white));
background-image: linear-gradient(white,#A1A1A1 2%,#white);
-webkit-box-shadow:#222 0 0 3px
}


.x-iostoggle-on .x-thumb::before {
border:1px solid #14539C;
background-color: #14539C;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
background-image: linear-gradient(white,#14539C 2%,#3095C7);
-webkit-box-shadow:#05203F 0 0 3px
}

jep
8 Sep 2011, 9:04 AM
FYI, I extended this a bit further:

http://www.sencha.com/forum/showthread.php?146520-Animated-iOS-%28iPhone-iPad%29-style-On-Off-toggle&p=646474

tomalex0
8 Sep 2011, 9:31 PM
Nice to know that you have updated as per you wanted.,
current implementation of mine no longer uses images but only gradients. and we can specify custom minText and maxText. Just try it and let me know, i haven't got any feedback after i updated.

rabelanger
9 Sep 2011, 4:44 AM
Hi,

I tried your on/off button on my app (sencha touch 1.1/ phonegap 1.0) on a iPad 2. The button inside the slider is off a bit, the button doesn't fit flush inside the slider.

I'll post the solution if I manage to tweak it.

On chrome (dev. 15) and safari 5.1, it does look perfect, that's why its a pain to fix.

raf

jep
9 Sep 2011, 7:20 AM
tomalex0: The problem I had with the current one using the gradients and fonts is that it doesn't really match the iOS one anymore. It makes the application feel not-native. Unfortunately, I'm not sure it's possible to get it very perfect using just html/css.

tomalex0
12 Sep 2011, 12:36 AM
@rabelanger

Thanks for reply, don't have the device to check with :(.

Fanny144
19 Sep 2011, 2:37 AM
I had encountered the same problem.
In the function cssTranslate, the offset is outside the correct range so the thumb Yes or No goes out of the toggle.

I can only think to put a fixed value in that function to css tranlate3d. But it isn't efficient.
The strange thing is that I think it doesn't happen with the default togglefield of Sencha.

If you have any solution to this problem I'd like know it.

Thanks!!

tomalex0
19 Sep 2011, 4:06 AM
@rabelanger

I have updated css to fix the issue with thumb in slider. I have checked in ipad and iphone and looks fine for me.

Please check the github code

Fanny144
19 Sep 2011, 5:40 AM
I continue with the same problem.
Happens when loading a form with loadForm and between the values ??must be loaded one or more toggles.
28138
The toggles with NO have the corect value, the others the thumb isn't clear. It's more to the rigth. But if I click on any of them display correctly, the toggles don't look good only when loading.

Thanks

tomalex0
19 Sep 2011, 8:04 PM
@fanny
Thanks for the screen shots, can you provided me details on your testing environment.
Is it web browser or device , which version?

Can you also provide demo code you trying.

Fanny144
20 Sep 2011, 12:54 AM
I think I fix it, but anyway thanks for the interest.
I delete
this.onOrientationChange() in setValue

iconcells
28 Dec 2011, 5:31 PM
It woulds as expected. many thanks

larimer
10 Jan 2012, 10:03 AM
Just wanted to share a method I just cooked up.. pretty simple really, and my case only required one instance, so eager to hear suggestions-

The button:


items: [
{
xtype: 'button',
text: 'Menu',
toggle: 'open'
}
]


The controller:



init: function(){
this.control({
'button[toggle]': {
tap: function(btn) {
if (btn.toggle == 'open'){
btn.toggle = 'close';
btn.setUi('action');
console.log('Open!');
} else {
btn.toggle = 'open';
btn.setUi('default');
console.log('Close!');
}
}
}
});
}

kalor
1 Mar 2012, 4:28 PM
I'm confused. I tried to implement this but the CSS validator falls over on the ::after and ::before with "The pseudo-element ::before can't appear here in the context css2".

But that's using the code on the first page of this thread, BEFORE you added the CSS3 solution.

I also can't find a way to get Eclipse to use CSS3 validation and shut up.

How do I use any of this?

Sasha172
24 Aug 2012, 4:04 AM
Cool. Moved to examples/showcases.


Should we offer an extensions forum?

YES you TOTALLY should :)