1. 首页
  2. 问答
  3. HTML切换按钮

HTML切换按钮

2009-10-17 334 views
5

我要代表HTML的切换按钮。我的意图是通过正常的输入提交按钮和样式来完成。关于如何设计一个可以理解的切换按钮的建议，并且在所有浏览器中或多或少地起作用？HTML切换按钮

来源

2009-10-17 Pablo

回答

8

既然你代表了真/假状态单一的控制，你真的想用一个复选框作为底层的表单元素，以保持与下层的浏览器，屏幕阅读器等的兼容性。这里的一个方法是将标签控件与复选框使用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

+2

这种方法并不键盘友好，标签不能有专注自己，无法通过被标签，并用键盘切换时，它们各自的复选框隐。 – grr 2012-07-25 11:28:21

+0

@grr：这通常被称为“制表位”。你可以阻止它：http://stackoverflow.com/a/1561097/1160540 – vahanpwns 2014-02-11 21:21:44

2

那么我试图在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 buttonOn buttonToggle slide

外观改变基于浏览器的一个小酒味位。（当然不要让她的期望它看起来完全正确的IE浏览器。如果你删除渐变和正常的颜色，它也可以在IE中工作，或者“只需在CSS中添加background-color：属性和背景图像：因为IE采用背景色：并且不支持background-image：你的reqd背景颜色将显示，而不需要任何特定的浏览器规格说明实现“）

来源

2013-05-26 18:10:25 ebdo

相关问题

 相关问题