HTML切换按钮

Question

HTML切换按钮

htmlcoding-style

6

我需要在HTML中表示一个切换按钮。我的意图是使用普通的输入提交按钮和样式来完成。您有什么建议如何样式化一个能够被理解并且在所有浏览器中运作良好的切换按钮吗？

- pupeno

3个回答

2

我将尝试使用CSS和JavaScript在HTML中实现一个滑块。我找到了一些参考资料，但它们并不完全有用。因此，以下是我的实现方式。其中一部分是从网上某处借鉴的，但我已经忘记了来源。无论如何，让我们开始吧：

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 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>JavaScript代码 a>以下示例与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;

   }

以下是按钮的外观图片：关闭按钮

外观会因浏览器而略微变化。（显然不能期望在IE上完全正常显示。如果您删除渐变并放置普通颜色，它将在IE中正常工作，或者在CSS中添加background-color:属性以及background-image:，由于IE接受background-color:并不支持background-image:，因此您所需的背景颜色将显示，无需任何特定的浏览器规范实现。）

- ebdo

0

所有浏览器？无论你选择以何种方式进行视觉呈现，一定要使用aria-pressed，以便将切换状态暴露给辅助功能API（因此也暴露给辅助技术）。其中一个好处是，您可以在CSS选择器中使用此属性，例如：

button[aria-pressed="true"] {
    border: 2px solid #000;
}

这将为您节省编写类名的时间 - 有一个标准的名称！

n.b. 严格来说，aria-pressed 属性应仅与 <button> 元素或带有 role=button 属性的元素一起使用。

- brennanyoung

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dylan Beattie · Accepted Answer

由于您要表示单个控件的真/假状态，因此最好使用复选框作为底层表单元素，以保持与下级浏览器、屏幕阅读器等的兼容性。这里一种方法是将标签控件与复选框相关联，然后使用CSS和jQuery的组合，使实际的复选框本身“不可见”，将标签呈现为按钮，并在复选框被选中或取消选中时修改其边框属性。

该代码适用于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>