बूटस्ट्रैप में टॉगल बटन कैसे बनाएं

92

मैंने मूल रूप से HTML, CSS और JavaScript में एक वेब ऐप बनाया, फिर इसे बूटस्ट्रैप में भी फिर से बनाने के लिए कहा गया। मैंने यह सब ठीक कर लिया है, लेकिन मेरे पास वेब ऐप में बटन टॉगल थे जो रेडियो में बदल गए हैं (मूल रूप से चेकबॉक्स) बटन, बजाय मैं मूल रूप से टॉगल बटन के।

बटन के लिए कोड है:

<label>
  Notifications
  <span class='toggle'>
    <input type='radio'
      class='notifications'
      name='notifications'
      id='notifications' />
  </span>
</li>
<label>
  Preview
  <span class='toggle'>
    <input type='radio'
      class='preview'
      name='preview'
      id='preview' />
  </span>
</li>

HTML पेज से जुड़ी जावास्क्रिप्ट और सीएसएस फाइलें इस प्रकार हैं:

<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

क्या कोड को बदलने का कोई तरीका है ताकि मुझे टॉगल बटन वापस मिल सके?

javascript  jquery  css  twitter-bootstrap  jqtouch 
— मेगन सिमे
स्रोत
1
यहाँ कई उदाहरण हैं twitter.github.com/bootstrap/javascript.html#buttons
— itsme
मैं लिंक की सराहना करता हूं, लेकिन मेरे पास वह नहीं है जिसकी मुझे तलाश है। टॉगल बटन मेरे पास एक प्रकार का iPhone है, जिसे आप 'on' / 'off' तरह की तरह देखेंगे। क्या इसका कोई मतलब है?
— मेगन सिमे
ठीक है, तो यह jqtouch.js से संबंधित है और न ही bootstrap करने के लिए मुझे लगता है कि
— itsme
1
ठीक है। अगर यह आसान है, तो यह जीथुब पर है।
— मेगन सिमे
1
LOL आदमी मैं फ़ाइलों की एक अनंत सूची देखता हूं :) क्या आप अधिक विशिष्ट नहीं हो सकते? : D
— itsme

जवाबों:

80

प्रारंभिक उत्तर 2013 से

एक उत्कृष्ट (अनौपचारिक) बूटस्ट्रैप स्विच उपलब्ध है ।

क्लासिक 2013 स्विच

<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();

यह स्विच के रूप में रेडियो प्रकार या चेकबॉक्स का उपयोग करता है । typeV.1.8 के बाद से एक विशेषता जोड़ी गई है।

स्रोत कोड Github पर उपलब्ध है ।

2018 से नोट

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

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

अन्य कार्यान्वयन कोणीय, दृश्य या jQuery के लिए मौजूद हैं।

आधुनिक 2018 स्विच

import '../assets/index.less'
import React from 'react'
import ReactDOM from 'react-dom'
import Switch from 'rc-switch'

class Switcher extends React.Component {
  state = {
    disabled: false,
  }

  toggle = () => {
    this.setState({
      disabled: !this.state.disabled,
    })
  }

  render() {
    return (
      <div style={{ margin: 20 }}>
        <Switch
          disabled={this.state.disabled}
          checkedChildren={'开'}
          unCheckedChildren={'关'}
        />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Switcher />, document.getElementById('__react-content'))

देशी बूटस्ट्रैप स्विच

देखें ohkts11 का जवाब नीचे के बारे में देशी बूटस्ट्रैप स्विच ।

— smonff
स्रोत
19
मैं उन स्विचों से बचूँगा
— ckarbass
3
यह साइट अब मौजूद नहीं है
— w3bMak3r
आप सही हैं @ w3bMak3r, डोमेन नाम बदल दिया गया है। अपडेट किया गया।
— smonff
यह एक अच्छा प्लगइन है। प्रयोग करने में आसान। लेकिन सफारी के साथ समस्या 5.1.7। जब मैं एक बार क्लिक करता हूं, तो दूसरे हिलते हैं। क्या कोई इसे हल कर सकता है?
— Sarower Jahan
2
बूटस्ट्रैप टॉगल एक अन्य बूटस्ट्रैप-आधारित विकल्प है
— चार्ल्स पी।
58

यदि आपको अपना HTML बदलने में कोई आपत्ति नहीं है, तो आप इस data-toggleविशेषता का उपयोग कर सकते हैं <button>। बटन उदाहरणों का एकल टॉगल अनुभाग देखें :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>
— सैम
स्रोत
1
क्या चेकबॉक्स / रेडियो विकल्प की तरह एकल-टॉगल में आंतरिक चेकबॉक्स रखने का कोई तरीका है ?
— शिमी वेइटहैंडलर
3
aria-pressed="true"राज्य की जाँच करने के लिए इस्तेमाल किया जा सकता है
— बड़ाइबोबो
31

बूटस्ट्रैप 3 में चेकबॉक्स या रेडियो बटन के आधार पर टॉगल बटन बनाने के विकल्प हैं: http://getbootstrap.com/javascript/#buttons

चेक बॉक्स

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

रेडियो के बटन

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

इन्हें काम करने के लिए आपको .btnबूटस्ट्रैप के जावास्क्रिप्ट के साथ आरंभ करना होगा :

$('.btn').button();
— StriplingWarrior
स्रोत
क्या चेकबॉक्स / रेडियो विकल्प की तरह एकल-टॉगल में आंतरिक चेकबॉक्स रखने का कोई तरीका है ?
— शिमी वेइटहैंडलर
@ शमी: यदि आप एक एकल चेकबॉक्स को एक बटन समूह में रखते हैं, तो आपको वही व्यवहार मिलेगा। मुझे चेकबॉक्स समर्थित एकल-टॉगल प्राप्त करने के लिए किसी भी कम-क्रिया विधि के बारे में पता नहीं है।
— स्ट्रिपिंगवर्यर
7

मैं जावास्क्रिप्ट के साथ मैन्युअल रूप से 'सक्रिय' वर्ग को सक्रिय करने की कोशिश कर रहा हूं। यह एक पूर्ण पुस्तकालय के रूप में उपयोग करने योग्य नहीं है, लेकिन आसान मामलों के लिए पर्याप्त लगता है:

var button = $('#myToggleButton');
button.on('click', function () {
  $(this).toggleClass('active');
});

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

इस उदाहरण को आज़माएं और मुझे बताएं कि क्या यह विफल रहता है: http://jsbin.com/oYoSALI/1/edit?html,js,output

— p2kmgcl
स्रोत
1
मुझे लगता है कि उपयोगकर्ता ने इसके बारे में नहीं पूछा, लेकिन आपकी प्रतिक्रिया ने मेरे सवाल का जवाब दिया!
— टेट्री
मुझे लगता है कि यह वैसे भी उपयोगकर्ता का अगला सवाल होता।
— ईगलिई
5

यदि आप एक छोटा कोड आधार रखना चाहते हैं, और आपको केवल आवेदन के छोटे हिस्से के लिए टॉगल बटन की आवश्यकता होगी। मैं आपको सुझाव दूंगा कि आप अपने स्वयं के कोड (जावास्क्रिप्ट, जावास्क्रिप्ट, जावास्क्रिप्ट) के जावास्क्रिप्ट कोड को बनाए रखें और सीधे सादे सीएसएस की जगह लें।

अच्छा टॉगल बटन जनरेटर: https://proto.io/freebies/onoff/

— पोरौटी
स्रोत
3

यहाँ बूटस्ट्रैप टॉगल बटन के लिए यह बहुत उपयोगी है । कोड स्निपेट में उदाहरण !! और नीचे jsfiddle।

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <input id="toggle-trigger" type="checkbox" checked data-toggle="toggle">
    <button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>
स्निपेट का विस्तार करें
मैंने आपको ऊपर कुछ उदाहरण दिखाए। मुझे उम्मीद है यह मदद करेगा। जेएस फिडेल यहाँ है स्रोत कोड GitHub पर avaible है।

अद्यतन बूटस्ट्रैप 4 के लिए 2020

मैंने 2020 में बूटस्ट्रैप 4-टॉगल की सिफारिश की थी ।

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

<input id="toggle-trigger" type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>

<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>
स्निपेट का विस्तार करें

— मुहम्मट टोनल कर सकते हैं
स्रोत
लघु, और टू द प्वाइंट, त्वरित और आसान समाधान, आपने मेरा दिन बना दिया!
— मेयर स्पिट्जर
2

आप सीएसएस टॉगल स्विच लाइब्रेरी का उपयोग कर सकते हैं। बस CSS को शामिल करें और JS को स्वयं प्रोग्राम करें: http://ghinda.net/css-toggle-switch/bootstrap.html

— OMA
स्रोत
1
हालांकि यह प्रश्न का उत्तर दे सकता है, लेकिन यहां वास्तविक जानकारी प्रदान करना बेहतर है न कि केवल एक लिंक। लिंक-ओनली उत्तरों को अच्छे उत्तर नहीं माना जाता है और संभवतः हटा दिया जाएगा ।
— 21
लेकिन यह एक स्पष्टीकरण की एक कड़ी नहीं है। यह एक वास्तविक पुस्तकालय का लिंक है, जिसका मैं अपने उत्तर में नाम बता रहा हूं। क्या आप वास्तव में मुझे पूरे पुस्तकालय स्रोत कोड को यहाँ पोस्ट करना चाहते हैं? मेरा उत्तर केवल तभी गलत होगा जब मैंने कहा था कि "इस पुस्तकालय का उपयोग करें: [लिंक]" पुस्तकालय का नाम लिए बिना / वह नाम ज्ञात होने के बाद से लाइब्रेरी को कहीं और से डाउनलोड करने का प्रयास कर सकती है।
— OMA
आपको पूरे पुस्तकालय के स्रोत कोड को पोस्ट करने की आवश्यकता नहीं है, लेकिन बहुत कम से कम आपको इसका उपयोग करने के लिए कुछ अंतर्दृष्टि प्रदान करने की आवश्यकता है। "बस CSS को शामिल करें और JS को स्वयं प्रोग्राम करें" पर जाने के लिए बहुत कुछ नहीं है और ओपी या अन्य उपयोगकर्ताओं की मदद करने की संभावना नहीं है।
— elixenide
2
खैर, यह वास्तव में उपयोग करने के लिए आसान है! बस सीएसएस कोड के नमूनों में से एक को शामिल करें और फिर जो भी आप करना चाहते हैं उसके साथ जेएस को प्रोग्राम करें। मैं वास्तविक जेएस प्रोग्रामिंग पर टिप्पणी नहीं कर सकता, क्योंकि मूल पोस्टर ने टॉगल बटन का उपयोग करते समय एक विशिष्ट कार्रवाई करने के लिए नहीं कहा था, इसलिए मैं इसके बारे में और क्या कह सकता हूं? इसके अलावा, स्वीकृत उत्तर को ओके क्यों माना जाता है? यह एक "लिंक-ओनली" उत्तर भी है! (यह सिर्फ यह कहता है "निश्चित नहीं कि अगर यह मदद करता है, लेकिन एक उत्कृष्ट (अनौपचारिक) बूटस्ट्रैप स्विच उपलब्ध है। हालांकि यह रेडियो प्रकारों का उपयोग करता है")। वह जवाब ठीक क्यों है? आपने इसके लिंक-केवल प्रकृति के बारे में कोई टिप्पणी नहीं की।
— ओएमए
-1

यदि कोई अभी भी एक अच्छा स्विच / टॉगल बटन की तलाश में है, तो मैंने रिक के सुझाव का पालन किया और इसके चारों ओर एक सरल कोणीय निर्देशन बनाया, कोणीय-स्विच । एक विंडोज स्टाइल स्विच को प्राथमिकता देने के अलावा, कुल डाउनलोड भी बहुत छोटा है (कोणीय बूटस्ट्रैप-स्विच और बूटस्ट्रैप-स्विच एक साथ ऊपर उल्लिखित की तुलना में 2kb बनाम 23 केबी न्यूनतम सीएसएस + जेएस)।

आप इसका उपयोग इस प्रकार करेंगे। पहले आवश्यक js और css फ़ाइल शामिल करें:

<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>

और इसे अपने कोणीय ऐप में सक्षम करें:

angular.module('yourModule', ['csComp'
    // other dependencies
]);

अब आप निम्नानुसार इसका उपयोग करने के लिए तैयार हैं: 

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>

यहां छवि विवरण दर्ज करें

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