HTML 切换按钮

【问题标题】：HTML toggle buttonsHTML 切换按钮
【发布时间】：2009-10-17 17:24:37
【问题描述】：

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

【问题讨论】：

    标签： html coding-style


    【解决方案1】：

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

    此代码适用于 Chrome、Safari、Opera、Firefox 和 IE（感谢条件注释 hack，因为 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>

    【讨论】：

    • 这种方法对键盘不友好，标签本身不能有焦点，并且当它们各自的复选框被隐藏时，标签不能通过键盘切换和切换。
    • @grr：这通常称为“制表位”。你可以防止它：stackoverflow.com/a/1561097/1160540
    【解决方案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 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");
        }
}

    a>下面是一个简单的例子

    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 中使用，或者“只需添加背景颜色: 属性与 background-image: 在 CSS 中并且因为 IE 采用 background-color: 并且不支持 background-image: 你的 reqd 背景颜色将显示而不需要任何特定的浏览器 sepcification 实现")

    【讨论】：

      【解决方案3】：

      所有浏览器你说？在这种情况下，无论您选择如何直观地表示它，请务必使用aria-pressed，以便将切换状态暴露给可访问性 API（以及辅助技术）。这样做的一个好处是，您可以在 CSS 选择器中使用此属性，例如 

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

      这样你就不必想出一个类名了——有一个标准的！

      n.b.严格来说，aria-pressed 属性只能与&lt;button&gt; 元素一起使用，或者与role=button 元素一起使用

      【讨论】：

        猜你喜欢
        • 2017-08-15
        • 1970-01-01
        • 2018-12-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-08-10
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode