जावास्क्रिप्ट/सीएसएस के साथ चालू/बंद स्विच कैसे बनाएं?

मैं एक स्लाइडिंग स्विच चाहते हैं। बाईं तरफ बंद हो जाएगा और दाईं तरफ होगा। जब उपयोगकर्ता स्विच को टॉगल करता है, तो मैं 'स्लाइडर' भाग को दूसरी तरफ स्लाइड करना चाहता हूं और इंगित करता हूं कि यह बंद है। तब मैं एक कॉलबैक कर सकता था जो टॉगल स्विच की स्थिति इनपुट के रूप में लेता है, इसलिए मैं तदनुसार कार्य कर सकता हूं।जावास्क्रिप्ट/सीएसएस के साथ चालू/बंद स्विच कैसे बनाएं?

कोई विचार यह कैसे करना है?

स्रोत

2009-12-24 esac

सुनिश्चित नहीं है कि यह प्रश्न लगभग 5 वर्षों के खुले होने के बाद बहुत व्यापक है। यह स्पष्ट रूप से बताता है कि मैं क्या देख रहा हूं और उसी दिन एक प्रतिक्रिया मिली जिसने पूरी तरह से प्रश्न का उत्तर दिया। सवाल अभी भी बहुत सारी गतिविधियां प्राप्त करता है और वर्तमान में नए प्रतिक्रियाएं सवाल पूछने के 4.5 साल बाद पोस्ट की जाती हैं। – esac

मैंने सीएसएस (केवल चेकबॉक्स और रेडियो) के साथ स्विच चालू/बंद करने के तरीके के बारे में [एक ट्यूटोरियल] लिखा है (http://blog.felixhagspiel.de/index.php/posts/custom-inputs)। [यहां आप डेमो देख सकते हैं] (http://custom-inputs.felixhagspiel.de/) –

[आपके प्रश्न से निश्चित नहीं है, लेकिन शायद आप इस तरह कुछ ढूंढ रहे हैं।] (Http: //www.webdesignerwall। com/डेमो/jquery/simple-slide-panel.html) – Sarfraz

आपका मतलब आईफोन चेकबॉक्स की तरह कुछ है? Thomas Reynolds' iOS Checkboxes script:

प्रयास करें एक बार फ़ाइलें आपकी साइट के लिए उपलब्ध हैं, स्क्रिप्ट को सक्रिय करने के लिए बहुत आसान है:

...
$(document).ready(function() { 
    $(':checkbox').iphoneStyle(); 
}); 

परिणाम:

स्रोत

2009-12-24 09:07:36

यह वास्तव में निफ्टी –

सुंदर है। मेरे पास एक आईफोन नहीं है इसलिए मुझे नहीं पता था कि इसे क्या कहा जाता था। – esac

http://proto.io/freebies/onoff/ - एनिमेटेड संक्रमणों के साथ शुद्ध CSS3 चालू/बंद flipswitches उत्पन्न करने के लिए सेवा। – realmag777

सादे जावास्क्रिप्ट का उपयोग

<html> 

    <head> 

    <!-- define on/off styles --> 
    <style type="text/css"> 
     .on { background:blue; } 
     .off { background:red; } 
    </style> 

    <!-- define the toggle function --> 
    <script language="javascript"> 
     function toggleState(item){ 
      if(item.className == "on") { 
       item.className="off"; 
      } else { 
       item.className="on"; 
      } 
     } 
    </script> 
    </head> 

    <body> 
    <!-- call 'toggleState' whenever clicked --> 
    <input type="button" id="btn" value="button" 
     class="off" onclick="toggleState(this)" /> 
    </body> 

</html>

jQuery

का उपयोग करके आप jQuery का उपयोग करते हैं, तो आप इसे toggle समारोह का उपयोग कर, या अंदर क्लिक ईवेंट हैंडलर toggleClass समारोह का उपयोग कर, इस तरह कर सकते हैं :

$(document).ready(function(){ 
    $('a#myButton').click(function(){ 
     $(this).toggleClass("btnClicked"); 
    }); 
});

jQuery यूआई प्रभावों का उपयोग करके, आप संक्रमण को एनिमेट कर सकते हैं: http://jqueryui.com/demos/toggleClass/

स्रोत

2009-12-24 09:03:31 Groo

बहुत बहुत धन्यवाद .... – anglimasS

रूपरेखा: दो तत्व बनाएं: एक स्लाइडर/स्विच और स्लाइडर के माता-पिता के रूप में एक गंदगी। राज्य को टॉगल करने के लिए स्लाइडर तत्व को "चालू" और "ऑफ" वर्ग के बीच स्विच करें। एक वर्ग के लिए शैली में, "बाएं" को 0 पर सेट करें और डिफ़ॉल्ट "दाएं" छोड़ दें; अन्य वर्ग के लिए, विपरीत कार्य करें:

<style type="text/css"> 
.toggleSwitch { 
    width: ...; 
    height: ...; 
    /* add other styling as appropriate to position element */ 
    position: relative; 
} 
.slider { 
    background-image: url(...); 
    position: absolute; 
    width: ...; 
    height: ...; 
} 
.slider.on { 
    right: 0; 
} 
.slider.off { 
    left: 0; 
} 
</style> 
<script type="text/javascript"> 
function replaceClass(elt, oldClass, newClass) { 
    var oldRE = RegExp('\\b'+oldClass+'\\b'); 
    elt.className = elt.className.replace(oldRE, newClass); 
} 
function toggle(elt, on, off) { 
    var onRE = RegExp('\\b'+on+'\\b'); 
    if (onRE.test(elt.className)) { 
     elt.className = elt.className.replace(onRE, off); 
    } else { 
     replaceClass(elt, off, on); 
    } 
} 
</script> 
... 
<div class="toggleSwitch" onclick="toggle(this.firstChild, 'on', 'off');"><div class="slider off" /></div>

वैकल्पिक रूप से, बस "पर" और "बंद" राज्यों में, जो स्थिति के बारे में mucking की तुलना में एक बहुत आसान तरीका है के लिए पृष्ठभूमि छवि निर्धारित किया है।

स्रोत

2009-12-24 09:04:30 outis

इस जनरेटर को देखें: On/Off FlipSwitch

आप केवल विभिन्न अलग-अलग शैली के परिणाम और उसके सीएसएस प्राप्त कर सकते हैं - कोई जावास्क्रिप्ट नहीं!

स्रोत

2012-10-16 06:35:05

अच्छा एक ....... –

यह वास्तव में बहुत अच्छा है। – HPWD

Darn proto.io पृष्ठ काम नहीं कर रहा है। –

मैं इसकी तलाश कर रहा था। यदि आप बूटस्ट्रैप का उपयोग करते हैं, तो एक उत्कृष्ट (अनौपचारिक) Bootstrap Switch is available।

स्रोत

2013-03-01 15:11:28 smonff

लिंक http://bootstrap-switch.org/ पर रीडायरेक्ट करता है जो लोड करने में विफल रहता है। Http://www.bootstrap-switch.org/ का उपयोग करें (www के साथ; मेरे लिंक में www को दृष्टि से छिपाने के लिए SO के लिए धन्यवाद) इसके बजाय लोड होता है। –

आप एचटीएमएल और सीएसएस का उपयोग करके इसे प्राप्त कर सकते हैं और एक चेकबॉक्स को एचटीएमएल स्विच में परिवर्तित कर सकते हैं।

एचटीएमएल

 <div class="switch"> 
     <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"> 
     <label for="cmn-toggle-1"></label> 
     </div>

सीएसएस

input.cmn-toggle-round + label { 
    padding: 2px; 
    width: 100px; 
    height: 30px; 
    background-color: #dddddd; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    -ms-border-radius: 30px; 
    -o-border-radius: 30px; 
    border-radius: 30px; 
} 
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { 
    display: block; 
    position: absolute; 
    top: 1px; 
    left: 1px; 
    bottom: 1px; 
    content: ""; 
} 
input.cmn-toggle-round + label:before { 
    right: 1px; 
    background-color: #f1f1f1; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    -ms-border-radius: 30px; 
    -o-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-transition: background 0.4s; 
    -moz-transition: background 0.4s; 
    -o-transition: background 0.4s; 
    transition: background 0.4s; 
} 
input.cmn-toggle-round + label:after { 
    width: 40px; 
    background-color: #fff; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    -ms-border-radius: 100%; 
    -o-border-radius: 100%; 
    border-radius: 100%; 
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    -webkit-transition: margin 0.4s; 
    -moz-transition: margin 0.4s; 
    -o-transition: margin 0.4s; 
    transition: margin 0.4s; 
} 
input.cmn-toggle-round:checked + label:before { 
    background-color: #8ce196; 
} 
input.cmn-toggle-round:checked + label:after { 
    margin-left: 60px; 
} 

.cmn-toggle { 
    position: absolute; 
    margin-left: -9999px; 
    visibility: hidden; 
} 
.cmn-toggle + label { 
    display: block; 
    position: relative; 
    cursor: pointer; 
    outline: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

DEMO

स्रोत

2016-01-02 04:03:47

हर बार मुझे एक स्विच करना है, मैं इस विधि का उपयोग करता हूं। एक लेबल और सीएसएस के साथ बस एक साधारण चेकबॉक्स। – Magus

आद्य।आईओ में स्विच जनरेटर का वास्तव में अच्छा/बंद है जो अत्यधिक अनुकूलन प्रतीत होता है। मैं इसे अपने प्रोजेक्ट के लिए उपयोग कर सकता हूं।

https://proto.io/freebies/onoff/

स्रोत

2016-04-16 21:08:49

आप शील्ड यूआई के Switch widget पर एक नज़र ले जा सकते हैं। यह इस प्रकार उपयोग करना आसान है:

<input id="switch3" type="checkbox" value="" /> 

<script type="text/javascript"> 
    jQuery(function ($) { 
     $("#switch3").shieldSwitch({ 
     onText: "Yes, save it", 
     ffText: "No, delete it", 
     cls: "large" 
    }); 
</script>

स्रोत

2016-10-25 07:16:50

जावास्क्रिप्ट/सीएसएस के साथ चालू/बंद स्विच कैसे बनाएं?

उत्तर

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