HTML切换按钮

时间：2009-10-17 17:24:37

标签： html coding-style

我需要在HTML中表示切换按钮。我的意图是使用正常的输入提交按钮和样式。关于如何设置切换按钮的样式的任何建议都是可以理解的，并且在所有浏览器中或多或少都有效？

3 个答案:

答案 0 :(得分：9)

由于您使用true / false状态表示单个控件，因此您确实希望使用复选框作为基础表单元素，以保持与下层浏览器，屏幕阅读器等的兼容性。这里的一种方法是将标签控件与复选框相关联，然后使用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>

答案 1 :(得分：2)

我正在尝试使用css和javascript在html中实现滑块。找到了一些参考文献但它们并没有完全有用。所以找到我的实现。它的一部分是从网络中的其他地方采取的，我不记得从哪里。无论如何它在这里：1＆gt;这个滑块基于你点击的按钮。

1＆gt; 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＆gt; 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＆gt; Javascript代码a＆gt;以下示例针对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＆gt;以下是一个简单的例子

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中工作或者“只需添加背景颜色：属性以及background-image：在CSS中，因为IE采用背景色：并且不支持背景图像：将显示您的reqd背景颜色，而不需要任何特定的浏览器sepcification实现“）

答案 2 :(得分：0)

您说的

所有浏览器？在这种情况下，无论您选择以视觉方式表示它，请务必使用aria-pressed，以便将切换状态公开给可访问性API（以及辅助技术）。一件好事是您可以在CSS选择器（例如

）中使用此属性 
button[aria-pressed="true"] {
    border: 2px solid #000;
}

这将省去您不得不提出的类名-这是一个标准名称！

n.b。严格来讲，aria-pressed属性只能与<button>元素或具有role=button的元素一起使用

相关问题
最新问题