आप टॉगल बटन कैसे बनाते हैं?

98

मैं सीएसएस का उपयोग करके html में टॉगल बटन बनाना चाहता हूं। मैं यह चाहता हूं ताकि जब आप उस पर क्लिक करें, तो यह अंदर धकेल दिया जाए और जब आप उस पर क्लिक करें तो यह फिर से बाहर निकल जाए।

यदि ऐसा करने का कोई तरीका नहीं है तो बस सीएसएस का उपयोग करें। क्या jQuery का उपयोग करने का कोई तरीका है?

jquery  html  css 
— डोनी वी।
स्रोत
मैंने CSS3 के साथ केवल चालू / बंद स्विचेस बनाने के बारे में एक ट्यूटोरियल लिखा था , कोई जेएस की आवश्यकता नहीं थी। यहां आप डेमो को देख सकते हैं
— फेलिक्स हाग्सियल
— गोपाल जोशी

जवाबों:

87

अच्छा शब्दार्थ तरीका होगा कि आप चेकबॉक्स का उपयोग करें, और फिर इसे अलग-अलग तरीकों से स्टाइल करें अगर यह चेक किया गया है या नहीं। लेकिन इसके लिए कोई अच्छे तरीके नहीं हैं। आपको अतिरिक्त अवधि, अतिरिक्त div और, वास्तव में बहुत अच्छे लगने के लिए, कुछ जावास्क्रिप्ट जोड़ना होगा।

तो सबसे अच्छा समाधान बटन के दो अलग-अलग स्थितियों को स्टाइल करने के लिए एक छोटे jQuery फ़ंक्शन और दो पृष्ठभूमि छवियों का उपयोग करना है। सीमाओं द्वारा दिए गए अप / डाउन प्रभाव के साथ उदाहरण:

$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});
a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>
स्निपेट का विस्तार करें

जाहिर है, आप पृष्ठभूमि छवियों को जोड़ सकते हैं जो बटन अप और बटन डाउन का प्रतिनिधित्व करते हैं, और पृष्ठभूमि का रंग पारदर्शी बनाते हैं।

— alexmeia
स्रोत
17
यहाँ इस कोड के साथ एक JS fiddle है ताकि आप इसे लाइव करने की कोशिश कर सकें ... jsfiddle.net/LmULE
— Evan
FYI करें: मैंने इस पोस्ट की तरह ही काम किया, केवल Google Dart Steelpinjata.com/2014/03/20/toggle-buttons-in-dart का उपयोग करके । नोट: क्रोमियम में काम करता है, लेकिन इसे जावास्क्रिप्ट में संकलित किया जा सकता है और अन्य आधुनिक ब्राउज़रों में काम करेगा। IE एक ब्राउज़र के रूप में गिनती नहीं करता है ;-)
— सर्ज मर्ज़िलाकोव
51

JQuery यूआई टॉगल बटन बनाने से बाहर प्रकाश काम करता है। बस यह डाल दिया

<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />

अपने पृष्ठ पर और फिर अपने शरीर onLoadया अपने $.ready()(या कुछ वस्तु शाब्दिक init()फ़ंक्शन में यदि आपका भवन अजाक्स साइट है ..) तो कुछ JQuery ड्रॉप करें:

$("#myToggleButton").button()

बस। (मत भूलिए < label for=...>क्योंकि JQueryUI टॉगल बटन के शरीर के लिए इसका उपयोग करता है ..)

वहां से आप बस किसी अन्य की तरह इसके साथ काम करते हैं input="checkbox " " क्योंकि अंतर्निहित नियंत्रण अभी भी है, लेकिन JQuery UI स्क्रीन पर एक सुंदर टॉगल बटन की तरह दिखने के लिए इसे केवल स्किन करता है।

— bkdraper
स्रोत
यह देखते हुए कि ओपी ने jquery टैग जोड़ा है यह एक शानदार उत्तर है। दिए गए jqueryUI का उपयोग बधाई स्टाइल प्रदान करने के लिए किया जा सकता है।
— जो जॉनसन
28

यहाँ एक उदाहरण का उपयोग कर रहा है pure css:

  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  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;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
  }
<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>
स्निपेट का विस्तार करें

— suhailvs
स्रोत
19

इस उत्तर के साथ संयोजन में , आप इस तरह की शैली का उपयोग कर सकते हैं जो मोबाइल सेटिंग्स टॉगलर की तरह है।

togglers

एचटीएमएल

<a href="#" class="toggler">&nbsp;</a>
<a href="#" class="toggler off">&nbsp;</a>
<a href="#" class="toggler">&nbsp;</a>

सीएसएस

a.toggler {
    background: green;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    transition: all .5s ease;
}

a.toggler.off {
    background: red;
    border-right-width: 2px;
    border-left-width: 15px;
}

jQuery

$(document).ready(function(){
    $('a.toggler').click(function(){
        $(this).toggleClass('off');
    });
});

ज्यादा प्रीतिकर हो सकता है, लेकिन विचार देता है।
एक लाभ यह है कि यह jquery और / या CSS3 फ़िडलर के साथ एनिमेटेड हो सकता है

— पियरे डे लेसिन
स्रोत
7

यदि आप एक उचित बटन चाहते हैं तो आपको कुछ जावास्क्रिप्ट की आवश्यकता होगी। कुछ इस तरह से (स्टाइल पर कुछ काम करने की जरूरत है, लेकिन आप इसे प्राप्त करें)। ईमानदार होने के लिए इतना तुच्छ कुछ के लिए jquery का उपयोग करके परेशान नहीं करेगा।

<html>
<head>
<style type="text/css">
.on { 
border:1px outset;
color:#369;
background:#efefef; 
}

.off {
border:1px outset;
color:#369;
background:#f9d543; 
}
</style>

<script language="javascript">
function togglestyle(el){
    if(el.className == "on") {
        el.className="off";
    } else {
        el.className="on";
    }
}
</script>

</head>

<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>
— बंदर करते हैं
स्रोत
4

आप केवल toggleClass()राज्य को ट्रैक करने के लिए उपयोग कर सकते हैं । फिर आप जांच लें कि क्या बटन तत्व में वर्ग है, जैसे:

$("button.toggler").click( function() {
    $me = $(this);
    $me.toggleClass('off');
    if($me.is(".off")){
        alert('hi');
    }else {
        alert('bye');
    }
});

और मैं buttonसिमेंटिक कारणों से बटन के लिए तत्व का उपयोग करता हूं ।

<button class="toggler">Toggle me</button>
— टिम
स्रोत
3

आप एक एंकर तत्व ( <a></a>) का उपयोग कर सकते हैं , और एक: सक्रिय और a: लिंक का उपयोग करके पृष्ठभूमि छवि को चालू या बंद करने के लिए बदल सकते हैं। सिर्फ एक विचार।

संपादित करें: उपरोक्त विधि टॉगल के लिए बहुत अच्छी तरह से काम नहीं करती है। लेकिन आपको jquery का उपयोग करने की आवश्यकता नहीं है। तत्व के लिए एक सरल ऑनक्लिक जावास्क्रिप्ट फ़ंक्शन लिखें, जो पृष्ठभूमि की छवि को उचित रूप से बदलता है ताकि यह दिख सके कि बटन दबाया गया है, और कुछ ध्वज सेट करें। फिर अगले क्लिक पर, छवि और ध्वज को वापस लाया जाता है। इस तरह

var flag = 0;
function toggle(){
if(flag==0){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
    flag=1;
}
else if(flag==1){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
    flag=0;
}
}

और html ऐसा <div id="toggleDiv" onclick="toggle()">Some thing</div>

— anand.trex
स्रोत
3

मुझे नहीं लगता कि बटन बनाने के लिए JS का उपयोग करना अच्छा अभ्यास है। क्या होगा यदि उपयोगकर्ता का ब्राउज़र जावास्क्रिप्ट को निष्क्रिय कर देता है?

साथ ही, आप इसे करने के लिए बस एक चेकबॉक्स और थोड़ी सीएसएस का उपयोग कर सकते हैं। और आपके चेकबॉक्स की स्थिति को पुनः प्राप्त करना आसान है।

यह सिर्फ एक उदाहरण है, लेकिन आप इसे कैसे स्टाइल कर सकते हैं।

http://jsfiddle.net/4gjZX/

एचटीएमएल

<fieldset class="toggle">
  <input id="data-policy" type="checkbox" checked="checked" />
  <label for="data-policy">
  <div class="toggle-button">
    <div class="toggle-tab"></div>
  </div>
  Toggle
  </label>
</fieldset>​

सीएसएस

.toggle label {
  color: #444;
  float: left;
  line-height: 26px;
}
.toggle .toggle-button {
  margin: 0px 10px 0px 0px;
  float: left;
  width: 70px;
  height: 26px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fafafa));
  background-image: -webkit-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -moz-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -o-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -ms-linear-gradient(top, #eeeeee, #fafafa);
  background-image: linear-gradient(top, #eeeeee, #fafafa);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#fafafa');
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #D1D1D1;
}
.toggle .toggle-button .toggle-tab {
  width: 30px;
  height: 26px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -moz-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -o-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -ms-linear-gradient(top, #fafafa, #eeeeee);
  background-image: linear-gradient(top, #fafafa, #eeeeee);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#fafafa', EndColorStr='#eeeeee');
  border: 1px solid #CCC;
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}
.toggle input[type=checkbox] {
  display: none;
}
.toggle input[type=checkbox]:checked ~ label .toggle-button {
  background-color: #2d71c2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d71c2), to(#4ea1db));
  background-image: -webkit-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -moz-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -o-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -ms-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: linear-gradient(top, #2d71c2, #4ea1db);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#2d71c2', EndColorStr='#4ea1db');
}
.toggle input[type=checkbox]:checked ~ label .toggle-button .toggle-tab {
  margin-left: 39px;
  -webkit-box-shadow: -5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}​

उम्मीद है की यह मदद करेगा

— तितौं दे बेलील
स्रोत
2

मैं आपकी सीएसएस में एक वर्ग का उपयोग करने के लिए इच्छुक हूं जो बटन दबने पर सीमा शैली या सीमा चौड़ाई को बदल देता है, इसलिए यह टॉगल बटन की उपस्थिति देता है।

— Galwegian
स्रोत
1

इस बिट की कोशिश करो:

input type="button" 
                           data-bind="css:{on:toggleButton, off:toggleButton!=true},value:toggleButton,click: function() { $data.toggleButton(!($data.toggleButton()))}" />

in viewModel
self.toggleButton = ko.observable(false);
— पीटर
स्रोत
0

आप "सक्रिय" pseudoclass का उपयोग कर सकते हैं (यह IE6 पर काम नहीं करेगा, हालांकि, लिंक के अलावा अन्य तत्वों के लिए)

a:active
{
    ...desired style here...
}
— pilsetnieks
स्रोत
0

<label for="input">कार्यान्वयन के साथ jQuery का उपयोग करके टॉगलबटन के उदाहरण / संस्करण (अधिक विवरण में वर्णित) में से एक है।

1 हम क्लासिक एचटीएमएल का उपयोग करके अपने टॉगलबटन के लिए कंटेनर बनाएंगे <input>और<label>

<span>
  <input type="checkbox" value="1" name="some_feature_to_select" id="feature_cb" style="display: none;"> <!-- We can hide checkbox bec. we want <label> to be a ToggleButton, so we don't need to show it. It is used as our value holder -->
  <label for="feature_cb" id="label_for_some_feature">
    <img alt="Stylish image" src="/images/icons/feature.png">
  </label>
</span>

आगे हम अपने बटन को टॉगल करने के लिए फंक्शन को परिभाषित करेंगे। हमारा बटन वास्तव में सामान्य है <label>जिसे हम मूल्य टॉगलिंग का प्रतिनिधित्व करने के लिए स्टाइल करेंगे।

function toggleButton(button) {

var _for = button.getAttribute('for'); // defining for which element this label is (suppose element is a checkbox (bec. we are making ToggleButton ;) )
var _toggleID = 'input#'+_for; // composing selector ID string to select our toggle element (checkbox)
var _toggle = $( _toggleID ); // selecting checkbox to work on
var isChecked = !_toggle.is(':checked'); // defining the state with negation bec. change value event will have place later, so we negating current state to retrieve inverse (next).

if (isChecked)
    $(button).addClass('SelectedButtonClass'); // if it is checked -> adding nice class to our button (<label> in our case) to show that value was toggled
else
    $(button).removeClass('SelectedButtonClass'); // if value (or feature) was unselected by clicking the button (<label>) -> removing .SelectedButtonClass (or simply removing all classes from element)
}

फ़ंक्शन को पुन: प्रयोज्य तरीके से कार्यान्वित किया जाता है। आप इसे एक से अधिक, दो या यहां तक ​​कि तीन ToggleButtons आपके द्वारा बनाए गए के लिए उपयोग कर सकते हैं।

... और अंत में ... इसे उम्मीद के मुताबिक काम करने के लिए, हमें अपने कामचलाऊ <label>बटन के एक घटना ("परिवर्तन" घटना) के लिए टॉगल फ़ंक्शन को बांधना चाहिए (यह clickईवेंट बीईडी होगा। हम checkboxसीधे नहीं बदल रहे हैं, इसलिए कोई changeघटना नहीं है। के लिए निकाल दिया जा सकता है <label>)।

$(document).ready(function(){

    $("#some_feature_label").click(function () {
        toggleButton(this); // call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it
    });

    $("#some_other_feature_label").click(function () {
        toggleButton(this); // doing the same for any other feature we want to represent in a way of ToggleButton
    });

});

CSS के साथ हम वैल्यू में बदलाव का प्रतिनिधित्व करने के लिए परिभाषित कर सकते हैं backgorund-imageया कुछ कर सकते हैं । चेकबॉक्स के मूल्य को बदलने में हमारे लिए काम करेगा;)।border<label>

आशा है कि यह किसी की मदद करता है।

— पॉल टी। रावकेन
स्रोत
+ यह कार्यान्वयन मोबाइल उपकरणों पर भी सही ढंग से काम करता प्रतीत होता है। TDeBailleul द्वारा ऊपर प्रस्तावित CCS कार्यान्वयन एंड्रॉइड पर ठीक से काम नहीं कर रहा था (एंड्रॉइड 2.3.5 डिफ़ॉल्ट ब्राउज़र; उसी सिस्टम पर ओपेरा मोबाइल ठीक था)।
— पॉल टी। रॉकेन जूल
इसके अलावा, के बजाय .addClass()/ .removeClass()आप उपयोग कर सकते हैं .toggleClass(), लेकिन वर्णित विधि checked/ uncheckedमूल्यों के लिए कार्यों को स्पष्ट रूप से परिभाषित करती है ।
— पॉल टी। रॉकेन
0

प्रयत्न;

<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>

और में सुनिश्चित करें 

<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
      <link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>

याद रखें जब आप इसे कोड कर रहे हैं, केवल somename और someidइनपुट टैग में बदल सकते हैं, अन्यथा यह काम नहीं करता है।

— ЯegDwight
स्रोत
0

जहाँ तक मैं उत्तर के लिए भी खोज रहा था, और सीएसएस के साथ इसे जोड़ना चाहता था। मैं सीएसएस NINJA द्वारा समाधान पाया यह एक अच्छा <input type="checkbox">और कुछ सीएसएस लाइव डेमो के impelmentation है ! हालांकि यह IE 8 में काम नहीं कर रहा है आप selectivizr को लागू कर सकते हैं ! और सीएसएस को ठीक करें जहां यह IE में काम opacityकरने के filterलिए उपयोग करता है ।

EDIT 2014:

नए टॉगल बटन के लिए, मैं ले वेरो ब्लॉग पर पाया गया समाधान आईओएस चेकबॉक्स के समान ही उपयोग करता हूं

— Aivaras
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.