1 Answer, 1 is accepted
0
Hello, Venkata.
The answer depends on what you would like to achieve.
For instance if you are targeting mobile applications (be it web or hybrid) we have such control in KendoUI Mobile -- http://demos.telerik.com/kendo-ui/mobile/switch/index.html.
If you are asking about TelerikUI for ASP.NET Ajax having such control, then the answer is almost -- we do have a toggle button, just not with that same styling.
If you just want to achieve the appearance with toggability, you can use the following snippet:
Note: this will not work in IE7 and the animations will not be available in browser which do not support them.
Regards,
Ivan Zhekov
Telerik
The answer depends on what you would like to achieve.
For instance if you are targeting mobile applications (be it web or hybrid) we have such control in KendoUI Mobile -- http://demos.telerik.com/kendo-ui/mobile/switch/index.html.
If you are asking about TelerikUI for ASP.NET Ajax having such control, then the answer is almost -- we do have a toggle button, just not with that same styling.
If you just want to achieve the appearance with toggability, you can use the following snippet:
<%@ Page %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Custom checkbox</title> <style type="text/css"> .custom-checkbox { width: 3em; height: 1em; padding: 1px; border-width: 1px; border-style: solid; display: inline-block; position: relative; overflow: hidden; } .custom-checkbox .chkb { position: absolute; left: -99em; top: -99em; } .custom-checkbox .lbl { width: 3em; height: 1em; display: block; text-indent: -999em; position: relative; overflow: hidden; } .custom-checkbox .lbl:before { content: "Off"; width: 1em; height: 1em; color: white; background: red; text-indent: 0; position: absolute; left: 0; top: 0; transition: all .5s; } .custom-checkbox .chkb:checked + .lbl:before{ content: "On"; background: green; left: 2em; } </style></head><body><form id="form1" runat="server"> <span class="custom-checkbox"> <input class="chkb" type="checkbox" id="chkb1" /> <label class="lbl" for="chkb1">Check label</label> </span></form></body></html>Note: this will not work in IE7 and the animations will not be available in browser which do not support them.
Regards,
Ivan Zhekov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.