HTML切換按鈕

我要代表HTML的切換按鈕。我的意圖是通過正常的輸入提交按鈕和樣式來完成。關於如何設計一個可以理解的切換按鈕的建議，並且在所有瀏覽器中或多或少地起作用？HTML切換按鈕

2009-10-17 Pablo

既然你代表了真/假狀態單一的控制，你真的想用一個複選框作爲底層的表單元素，以保持與下層的瀏覽器，屏幕閱讀器等的兼容性。這裏的一個方法是將標籤控件與複選框使用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>

來源

2009-10-17 18:15:45

這種方法並不鍵盤友好，標籤不能有專注自己，無法通過被標籤，並用鍵盤切換時，它們各自的複選框隱。 – grr 2012-07-25 11:28:21

@grr：這通常被稱爲「製表位」。你可以阻止它：http://stackoverflow.com/a/1561097/1160540 – vahanpwns 2014-02-11 21:21:44

那麼我試圖在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; 

    }

個

如何出現的按鈕圖像是如下

Off button On button Toggle slide

外觀改變基於瀏覽器的一個小酒味位。（當然不要讓她的期望它看起來完全正確的IE瀏覽器。如果你刪除漸變和正常的顏色，它也可以在IE中工作，或者「只需在CSS中添加background-color：屬性和背景圖像：因爲IE採用背景色：並且不支持background-image：你的reqd背景顏色將顯示，而不需要任何特定的瀏覽器規格說明實現「）

來源

2013-05-26 18:10:25 ebdo

HTML切換按鈕

回答

相關問題