HTML des boutons à bascule

J'ai besoin de représenter un bouton à bascule en HTML. Mon intention est de le faire avec une entrée normale, bouton de soumission et de style. Des recommandations sur la manière de style d'un bouton à bascule qui est compréhensible et fonctionne plus ou moins dans tous les navigateurs?

OriginalL'auteur |

coding-style html

Puisque vous êtes représentant d'une commande unique avec un vrai/faux de l'état, vous voulez vraiment utiliser une case à cocher comme la forme sous-jacente de l'élément de maintenir la compatibilité avec les navigateurs de niveau inférieur, les lecteurs d'écran et ainsi de suite. On approche ici est d'associer une étiquette de contrôle avec la case à cocher, puis à l'aide d'une combinaison de CSS et de jQuery pour la case elle-même "invisible", le rendu de l'étiquette, comme un bouton, et de modifier le libellé de la frontière de la propriété que la case est cochée ou décochée.

Ce code fonctionne dans Chrome, Safari, Opera, Firefox et IE (grâce à un conditionnel-commentaire pirater depuis IE traite caché des éléments de formulaire différemment pour les autres navigateurs). Si vous envoyez le en joignant le formulaire, vous obtenez ordinaire HTML case comportement dans le formulaire de soumission.

   <!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>

Cette approche n'est pas facile à piloter au clavier, les étiquettes peuvent pas se concentrer eux-mêmes et ne peuvent pas être à onglets à travers et activation avec le clavier lors de leurs respectifs case est caché.
ce qui est communément appelé "taquet". vous pouvez empêcher cela: stackoverflow.com/a/1561097/1160540

OriginalL'auteur Dylan Beattie

Bien que j'essayais de mettre en œuvre un curseur en html à l'aide de css et de javascript. Trouvé peu de références, mais ils n'ont pas été complètement utile. Afin de trouver ci-dessous ma mise en œuvre. Une partie est prise à partir de quelque part d'autre dans le web tho je ne me souviens pas d'où. De toute façon, ici, il va: 1>Ce curseur est basée sur un bouton sur lequel vous cliquez.

1>le code 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>code CSS

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@Related to switch button start@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.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 End@@@@@@@@@@@@@@@@ */

3>Code Javascript a>L'exemple ci-dessous est à l'égard de 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>ci-dessous est un exemple 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;
}

Les images de la façon dont le bouton s'affiche en dessous de

HTML des boutons à bascule

Les changements d'apparence un petit winy bits, basé sur le navigateur.(Évidemment, ne vous attendez à regarder tout à fait correcte sur IE. Si vous retirez de gradient et de mettre des couleurs normales, il travaillera à-dire comme un bien OU d' "il suffit d'ajouter background-color: propriété background-image: dans le CSS et depuis IE prend background-color: et ne prend pas en charge background-image: votre requis couleur d'arrière-plan sera affiché sans le besoin pour n'importe quel navigateur sepcification implémentations")

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.