HTML切换按钮
答
既然你代表了真/假状态单一的控制，你真的想用一个复选框作为底层的表单元素，以保持与下层的浏览器，屏幕阅读器等的兼容性。这里的一个方法是将标签控件与复选框使用CSS和jQuery的组合，以使实际的复选框本身“无形”，使标签的按钮，相关联，然后和修改标签的border属性的复选框被选中或未选中。
此代码在Chrome，Safari，Opera或Firefox和IE（由于条件注释黑客，因为IE不同对待隐藏的表单元素其他浏览器）。如果您提交封闭表单，则会在生成的表单提交中获得普通的HTML复选框行为。
<!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>
<title>jQuery Toggle Button </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
/* Style the label so it looks like a button */
label {
border: 2px outset #cccccc;
background-color: #cccccc;
position: relative;
z-index: 3;
padding: 4px;
}
/* CSS to make the checkbox disappear (but remain functional) */
label input {
position: absolute;
visibility: hidden;
}
</style>
<!--[if IE]>
/* Conditional styles applied in IE only to work around cross-browser bugs */
<style>
label input#myCheckbox {
visibility: visible;
z-index: 2;
}
</style>
<![endif]-->
<script type="text/javascript">
$(function() {
$("#toggleCheckbox").click(function() {
$(this).closest("label").css({ borderStyle: this.checked ? 'inset' : 'outset' });
});
});
</script>
</head>
<body>
<form action="http://www.w3schools.com/html/html_form_action.asp" method="get">
<label for="toggleCheckbox">
<input type="checkbox" name="toggled" id="toggleCheckbox" value="1" />
Toggled?</label>
<input type="submit" name="verb" value="Submit Form" />
</form>
</body>
</html>
答
那么我试图在HTML中使用CSS和JavaScript实现滑块。找到几个参考，但他们不完全有帮助。所以在下面找到我的实现。其中一部分来自网络的其他地方，我不记得从哪里。无论如何，这里是：1>这个滑块是基于一个你点击的按钮。
1> HTML代码
<div class="SwitchBtn" >
<input type="checkbox" class = "SwitchBtn_Check" id = "checkboxForSwitch" style = "display:none;"/>
<div class = "transitionSwitch">
<input type = "button" class = "SwitchBtn_Btn off" id="buttonForSwitch" name = "TurnOn" onclick = "toggleStandBy()" />
<div class = "slider_label off" id = "labelForSwitch" >
<div class = "SwitchBtn_active" id= "btnAct" ><span class = "switchOn">On</span></div>
<div class = "SwitchBtn_inactive" id= "btnInact" ><span class = "switchOff">Off</span></div>
</div>
</div>
</div>
2> CSS代码
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@Related to switch button [email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.SwitchBtn{
position: relative; /*this is very important or else precentage used in its child nodes will take effect of the next parent which has anything other than static*/
overflow: hidden;
height:44.56px;
width:148.10px;
-webkit-box-shadow: 0 0 0 2px rgb(145, 149, 155);
-moz-box-shadow: 0 0 0 2px rgb(145, 149, 155);
box-shadow: 0 0 0 2px rgb(145, 149, 155);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-user-select:none;
-moz-user-select:none;
}
.transitionSwitch{
overflow: hidden;
margin-left: 0;
width:100%;
height: 100%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.SwitchBtn_Check:checked+ .transitionSwitch{
margin-left:50%;
}
.slider_label{
position:absolute;
width:150%;
height:100%;
overflow: hidden;
margin-left:-50%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 0 2px rgb(145, 149, 155);
-moz-box-shadow: 0 0 0 2px rgb(145, 149, 155);
box-shadow: 0 0 0 2px rgb(145, 149, 155);
}
.switchOn
{
position:relative;
top:5.57px; /*vvvsma half of vvsma i.e. 11.14px*/
left:11.14px; /*vvsma half of vsma i.e. 22.28px*/
}
.switchOff
{
position:relative;
top:5.57px;
left:11.14px;
}
.SwitchBtn_active{
position:absolute;
width:50%;
height:100%;
vertical-align:center;
left:0;
font-weight: normal;
font-family: Avenir, Tahoma, Arial, Verdana;
color: #FCF9F9;
font-size: 26.21px;
text-indent:10px;
background-image: -moz-linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%);
background-image: -webkit-linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%);
background-image: -o-linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%);
background-image: linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.SwitchBtn_inactive
{
width:50%;
height:100%;
vertical-align:center;
position:absolute;
right:0;
font-weight: normal;
font-family: Avenir, Tahoma, Arial, Verdana;
color: #291818;
font-size: 26.21px;
text-indent:45px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-image: -moz-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%);
background-image: -webkit-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%);
background-image: -o-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%);
background-image: linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%);
}
.SwitchBtn_Btn{
width:50%;
height:100%;
position:absolute;
z-index:1;
margin-left:0;
-webkit-box-shadow: 0 0 0 0.5px rgb(145, 149, 155);
-moz-box-shadow: 0 0 0 0.5px rgb(145, 149, 155);
box-shadow: 0 0 0 0.5px rgb(145, 149, 155);
background-image: -moz-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%);
background-image: -webkit-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%);
background-image: -o-linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%);
background-image: linear-gradient(top, rgb(236,236,237) 0%, rgb(208,209,211) 50%, rgb(185,187,189) 51%, rgb(190,191,194) 100%);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* @@@@@@@@@@@@@@@@@@@@@@@Related to switch button [email protected]@@@@@@@@@@@@@@@ */
3> JavaScript代码>下面的例子是相对于Ajax的
function toggleStandBy()
{
var xmlhttp;
if(window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(xmlhttp.responseText == "1")
{
document.getElementById('checkboxForSwitch').checked = !document.getElementById('checkboxForSwitch').checked;
}
}
}
xmlhttp.open("POST","http://192.168.1.x/sample.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
if(document.getElementById('buttonForSwitch').name == "TurnOn")
{
document.getElementById('buttonForSwitch').name = "TurnOff";
xmlhttp.send("state=1");
}
else if(document.getElementById('buttonForSwitch').name == "TurnOff")
{
document.getElementById('buttonForSwitch').name = "TurnOn";
xmlhttp.send("state=0");
}
}
一>的下面是一个简单的例子
function toggleStandBy()
{
if(document.getElementById('buttonForSwitch').name == "TurnOn")
{
document.getElementById('buttonForSwitch').name = "TurnOff";
}
else if(document.getElementById('buttonForSwitch').name == "TurnOff")
{
document.getElementById('buttonForSwitch').name = "TurnOn";
}
document.getElementById('checkboxForSwitch').checked = !document.getElementById('checkboxForSwitch').checked;
}
如何出现的按钮图像是如下
外观改变基于浏览器的一个小酒味位。（当然不要让她的期望它看起来完全正确的IE浏览器。如果你删除渐变和正常的颜色，它也可以在IE中工作，或者“只需在CSS中添加background-color：属性和背景图像：因为IE采用背景色：并且不支持background-image：你的reqd背景颜色将显示，而不需要任何特定的浏览器规格说明实现“）
这种方法并不键盘友好，标签不能有专注自己，无法通过被标签，并用键盘切换时，它们各自的复选框隐。 – grr 2012-07-25 11:28:21
@grr：这通常被称为“制表位”。你可以阻止它：http://*.com/a/1561097/1160540 – vahanpwns 2014-02-11 21:21:44