我希望您能在我的网络应用程序中使用extjs创建类似于移动设备上的开/关按钮。我找不到任何示例或解决方案。我实际上想要像这样:演示
CSS
我该如何使用ExtJS实现这个功能?
/*
Created by @JohnieHjelm. I took the liberty of doing this ON/OFF switch
just to express my love for CSS3. You're free to use this and of course
I hoped you learned something. Sharing is Caring♥
*/
body{
background:#eee;
}
ul{
list-style:none;
width:85px;
height:26px;
position:absolute;
top:50%;
left:50%;
margin:-13px 0 0 -42px;
}
ul li{
float:left;
line-height:23px;
font-size:11px;
padding:2px 10px 0;
background: #E5E5E5;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F3F3), to(#E5E5E5));
text-shadow:0 1px 0 #FFF;
border-left:1px solid #D5D5D5;
border-top:1px solid #D5D5D5;
border-bottom:1px solid #D5D5D5;
-webkit-box-shadow:0 1px 0 #FFF inset, 0 0 5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .3);
}
ul li:first-child{
-webkit-border-radius:5px 0 0 5px;
}
ul li:last-child{
-webkit-border-radius:0 5px 5px 0;
}
ul li a{
text-decoration: none;
font-family:Helvetica, Arial;
text-transform:uppercase;
color:#a1a1a1;
}
.on{
background: #505050;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#777), to(#505050));
text-shadow:0 -1px 0 #444, 0 0 7px #9AE658;
border-right:1px solid #444;
border-top:1px solid #444;
border-bottom:1px solid #444;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .7) inset, 0 1px 0 #FFF;
}
ul li:not(.on):active{
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#f1f1f1));
}
ul li.on a{
color:#7BBA47;
cursor: default;
}
jQuery
$(function(){
$("ul li").click(function(){
$("ul li").removeClass("on");
$(this).addClass("on");
});
});
我该如何使用ExtJS实现这个功能?