Ho bisogno di rappresentare un pulsante di commutazione in HTML. La mia intenzione è di farlo con un normale pulsante di invio dell'input e uno stile. Qualche consiglio su come modellare un pulsante di attivazione che sia comprensibile e funzioni più o meno in tutti i browser?Pulsanti di attivazione HTML
risposta
Dato che si rappresenta un controllo singolo con uno stato vero/falso, si desidera veramente utilizzare una casella di controllo come elemento del modulo sottostante per mantenere la compatibilità con browser di livello inferiore, screen reader e così via. Un approccio qui è quello di associare un controllo etichetta con la casella di controllo e quindi utilizzare una combinazione di CSS e jQuery per rendere la casella di controllo effettiva 'invisibile', rendere l'etichetta come un pulsante e modificare la proprietà del bordo dell'etichetta quando la casella di controllo è selezionata o deselezionato.
Questo codice funziona in Chrome, Safari, Opera, Firefox e IE (grazie a un blocco condizionale dei commenti poiché IE tratta gli elementi del modulo nascosti in modo diverso dagli altri browser). Se si invia il modulo di inclusione si ottiene il normale comportamento della casella di controllo HTML nell'invio del modulo risultante.
<!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>
Beh, stavo cercando di implementare un dispositivo di scorrimento in html utilizzando css e javascript. Ho trovato pochi riferimenti ma non erano completamente d'aiuto. Quindi trova sotto la mia implementazione. Parte di esso è preso da qualche altra parte nel web che non ricordo da dove. Comunque qui va: 1> Questo cursore si basa su un pulsante su cui fai clic.
1> Il codice 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> codice 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> codice JavaScript a> L'esempio che segue è per quanto riguarda l'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> Il di seguito è riportato un semplice esempio
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;
}
Le immagini di come viene visualizzato il pulsante è, come di seguito
L'aspetto cambia un po 'vinoso piccolo basato sul browser. (Ovviamente non si ottengono aspettano farlo sembrare completamente corretta su IE. Se rimuovi gradiente e metti i colori normali, funzionerà anche in IE OPPURE "aggiungi solo colore di sfondo: proprietà insieme all'immagine di sfondo: in CSS e poiché IE acquisisce colore di sfondo: e non supporta immagine di sfondo: il tuo reqd il colore di sfondo verrà mostrato senza la necessità di implementazioni particolari di settaggio del browser ")
- 1. Creazione di due pulsanti HTML affiancati
- 2. Come ottenere un gruppo di pulsanti di attivazione per agire come i pulsanti di opzione in WPF?
- 3. Pulsanti radio HTML: nascondi punti elenco
- 4. Distinguere tra i pulsanti di invio sul modulo HTML con due pulsanti di invio
- 5. Attivazione di un PopupMenu con pulsanti all'interno di un oggetto ListView
- 6. Come applicare groupname ai pulsanti di scelta HTML in asp.net?
- 7. Mantieni pulsanti html nella parte superiore di un div
- 8. Attivazione/attivazione del pulsante Immagine in Swing
- 9. Raggruppamento pulsanti di commutazione Silverlight
- 10. Pulsante di attivazione del fuoco in AngularJS
- 11. Puoi stile i pulsanti del modulo html con css?
- 12. HTML perché i pulsanti nei moduli inviano dati?
- 13. CSS: Rimuovi le ombre sui pulsanti HTML disabilitati
- 14. Quarzo: attivazione di più lavori
- 15. Problema di attivazione Android WebView
- 16. Redirect dopo plugin di attivazione
- 17. Invio invio chiave in un modulo HTML invio invece di pulsante di attivazione
- 18. Attivazione del campo di inserimento successivo nel modulo immettendo
- 19. Modulo HTML, pulsanti di invio multipli, payload post ignora i pulsanti non cliccati: questo comportamento standard è?
- 20. Attivazione del browser Funzioni di zoom in e zoom out
- 21. Due pulsanti affiancati
- 22. Personalizzazione dello stato di attivazione/disattivazione di un pulsante di attivazione in wpf
- 23. Funzione attivazione Theano HiddenLayer
- 24. Attivazione dispositivo A2DP (Android)
- 25. attivazione manuale evento touch
- 26. scroll infinito attivazione manuale
- 27. attivazione di un pulsante specifico all'interno di un disabile griglia
- 28. Attivazione/disattivazione del flash
- 29. Android: attivazione del onCreateOptionsMenu
- 30. Attivazione finestra Python
Questo approccio non è intuitivo per la tastiera, le etichette non possono focalizzarsi da sole e non possono essere visualizzate e attivate con la tastiera quando la rispettiva casella di controllo è nascosto. – grr
@grr: questo è comunemente chiamato "tab stop". puoi impedirlo: http://stackoverflow.com/a/1561097/1160540 – vahanpwns