1. ホーム
  2. 質問と答え
  3. HTMLトグルボタン

HTMLトグルボタン

2009-10-17 22 views
5

トグルボタンをHTMLで表現する必要があります。私の意図は、通常の入力送信ボタンとスタイリングでそれを行うことです。すべてのブラウザで理解可能で、多かれ少なかれ動作するトグルボタンのスタイル方法に関する推奨事項HTMLトグルボタン

出典

2009-10-17 Pablo

答えて

8

true/false状態のコントロールを1つ表すので、下位レベルのブラウザやスクリーンリーダーなどとの互換性を維持するために、基本的なフォーム要素としてチェックボックスを使用することが本当に必要です。ここでのアプローチの1つは、ラベルコントロールをチェックボックスに関連付け、次に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>

出典

2009-10-17 18:15:45

+2

このアプローチは、キーボードフレンドリーではありません任意の特定のブラウザのsepcificationの実装」）を必要とせずに表示されます、ラベルは、自分自身を集中することはできませんし、それぞれのチェックボックスがあるときを通じて、タブとキーボードを切り替えることができません隠された – grr

+0

@grr：これは一般に「タブストップ」と呼ばれます。あなたはそれを防ぐことができます：http://stackoverflow.com/a/1561097/1160540 – vahanpwns

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"); 
     } 
}

に関するものです>以下は簡単な例です

外観は、ブラウザに基づく小さなヴィニービットを変更

Off buttonOn buttonToggle slide

以下のよう

ボタンの表示方法のイメージがある。（もちろん、それはIE上で完全に適切に見えることを期待しますいけません。あなたはグラデーションを削除し、通常の色を入れても、IEでもうまく動作します。「背景色：プロパティを背景画像と共に追加します：CSSでは、IEは背景色を取ります：背景画像をサポートしません：あなたのreqd背景色が

出典

2013-05-26 18:10:25 ebdo

関連する問題

 関連する問題