Necesito representar un botón de alternar en HTML. Mi intención es hacerlo con un botón y estilo de envío de entrada normal. ¿Alguna recomendación sobre cómo diseñar un botón para alternar que sea comprensible y funcione más o menos en todos los navegadores?Botones de alternar HTML
Dado que representa un solo control con un estado verdadero/falso, realmente desea utilizar una casilla de verificación como elemento de formulario subyacente para mantener la compatibilidad con los navegadores de nivel inferior, lectores de pantalla, etc. Un enfoque aquí es asociar un control de etiqueta con la casilla de verificación y luego usar una combinación de CSS y jQuery para hacer que la casilla real sea "invisible", mostrar la etiqueta como un botón y modificar la propiedad de borde de la etiqueta cuando se marca la casilla o sin marcar.
Este código funciona en Chrome, Safari, Opera, Firefox e IE (gracias a un hack de comentario condicional dado que IE trata los elementos de formulario ocultos de manera diferente a otros navegadores). Si envía el formulario adjunto, obtiene un comportamiento de casilla HTML normal en el envío del formulario resultante.
<!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>
Bueno, estaba tratando de implementar un control deslizante en html usando css y javascript. Encontré pocas referencias pero no fueron completamente útiles. Así que busque debajo de mi implementación. Parte de esto se toma de otro lugar en la web aunque no recuerdo de dónde. De todos modos aquí va: 1> Este control deslizante se basa en un botón que haga clic.
1> código 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> código 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> Código Javascript a> El siguiente ejemplo es con respecto al 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");
}
}
a> La a continuación se muestra un ejemplo simple
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;
}
Las imágenes de cómo aparece el botón es la siguiente
La apariencia cambia un poquito vinoso basado en el navegador. (Obviamente no te dan esperar que se vea completamente adecuada en IE. Si eliminas el degradado y colocas colores normales, también funcionará en IE O "simplemente agrega color de fondo: propiedad junto con background-image: en CSS y dado que IE toma color de fondo: y no admite background-image: tu reqd el color de fondo se mostrará sin la necesidad de implementaciones particulares de sepcificación del navegador ")
Este enfoque no es compatible con el teclado, las etiquetas no pueden enfocarse por sí mismas y no se pueden desplazar con el teclado cuando se marcan sus casillas de verificación respectivas. oculto. – grr
@grr: esto se denomina comúnmente "tab stop". usted puede prevenirlo: http://stackoverflow.com/a/1561097/1160540 – vahanpwns