एचटीएमएल टॉगल बटन

मुझे HTML में टॉगल बटन का प्रतिनिधित्व करने की आवश्यकता है। मेरा इरादा एक सामान्य इनपुट सबमिट बटन और स्टाइल के साथ करना है। टॉगल बटन को स्टाइल करने के तरीके के बारे में कोई भी सिफारिश जो समझा जा सकता है और सभी ब्राउज़रों में कम या ज्यादा काम करता है?एचटीएमएल टॉगल बटन

स्रोत

2009-10-17 Pablo

चूंकि आप एक वास्तविक/झूठी स्थिति के साथ एक ही नियंत्रण का प्रतिनिधित्व कर रहे हैं, इसलिए आप वास्तव में डाउनलवेल ब्राउज़र, स्क्रीन पाठकों और अन्य के साथ संगतता बनाए रखने के लिए अंतर्निहित फॉर्म तत्व के रूप में एक चेकबॉक्स का उपयोग करना चाहते हैं। यहां एक दृष्टिकोण चेकबॉक्स के साथ लेबल नियंत्रण को जोड़ना है, और फिर वास्तविक चेकबॉक्स को 'अदृश्य' बनाने के लिए सीएसएस और jQuery के संयोजन का उपयोग करना, लेबल को बटन के रूप में प्रस्तुत करना, और लेबल की सीमा संपत्ति को संशोधित करना क्योंकि चेकबॉक्स चेक किया गया है या अनचेक।

यह कोड क्रोम, सफारी, ओपेरा, फ़ायरफ़ॉक्स और आईई में काम करता है (एक सशर्त-टिप्पणी हैक के लिए धन्यवाद क्योंकि आईई छिपे हुए फॉर्म तत्वों को अन्य ब्राउज़रों के लिए अलग-अलग व्यवहार करता है)। यदि आप संलग्न फॉर्म जमा करते हैं तो आपको परिणामी फॉर्म सबमिशन में सामान्य 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

यह दृष्टिकोण कुंजीपटल के अनुकूल नहीं है, लेबल खुद को ध्यान केंद्रित नहीं कर सकते हैं और जब उनके संबंधित चेकबॉक्स पर कीबोर्ड के साथ टैब्ड नहीं किया जा सकता है छिपा हुआ। – grr

@grr: इसे आमतौर पर "टैब स्टॉप" कहा जाता है। आप इसे रोक सकते हैं: http://stackoverflow.com/a/1561097/1160540 – vahanpwns

वैसे मैं सीएसएस और जावास्क्रिप्ट का उपयोग कर एचटीएमएल में एक स्लाइडर को लागू करने की कोशिश कर रहा था। कुछ संदर्भ मिले लेकिन वे पूरी तरह से सहायक नहीं थे। तो मेरे कार्यान्वयन के नीचे खोजें। इसका हिस्सा वेब पर कहीं और से लिया जाता है, जहां से मुझे याद नहीं है। वैसे भी यह यहां जाता है: 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> सीएसएस कोड

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@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> जावास्क्रिप्ट कोड एक> नीचे दिए गए उदाहरण सम्मान के साथ अजाक्स

है

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 button On button Toggle slide

उपस्थिति ब्राउज़र के आधार पर एक छोटे से winy सा बदल जाता है। (जाहिर है यह IE पर पूरी तरह से उचित देखने के लिए उम्मीद हो न। यदि आप ढाल को हटाते हैं और सामान्य रंग डालते हैं तो यह आईई में भी काम करेगा या "केवल पृष्ठभूमि-रंग जोड़ें: पृष्ठभूमि-छवि के साथ संपत्ति: सीएसएस में और चूंकि आईई पृष्ठभूमि-रंग लेता है: और पृष्ठभूमि-छवि का समर्थन नहीं करता है: आपका reqd पृष्ठभूमि रंग किसी भी विशेष ब्राउज़र sepcification कार्यान्वयन की आवश्यकता के बिना दिखाया जाएगा ")

स्रोत

2013-05-26 18:10:25 ebdo

एचटीएमएल टॉगल बटन

उत्तर

संबंधित मुद्दे