96

私はもともと HTML、CSS、JavaScript で Web アプリを作成していましたが、Bootstrap で再度作成するように依頼されました。私はそれをすべてうまくやったが、私が元々持っていたトグルボタンの代わりにラジオ（元はチェックボックス）ボタンに戻ったWebアプリのトグルボタンを持っていた。

ボタンのコードは次のとおりです。

<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 ページがリンクされている JavaScript および CSS ファイルは次のとおりです。

<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">

トグルボタンを元に戻すことができるようにコードを変更する方法はありますか?

4

10 に答える 10

82

2013年からの最初の回答

優れた (非公式の) Bootstrap Switch が利用可能です。

クラシック 2013 スイッチ

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

ラジオタイプまたはチェックボックスをスイッチとして使用します。V.1.8typeから属性が追加されました。

ソースコードはGithub で入手できます。

2018年からの注意

多くの人が指摘したように、常にユーザビリティの問題に悩まされているように見えたため、この種の古いスイッチ ボタンを現在使用することはお勧めしません。

React Component フレームワークからこのような最新のスイッチを確認することを検討してください(Bootstrap 関連ではありませんが、Bootstrap グリッドと UI に統合できます)。

Angular、View、または 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'))

ネイティブ ブートストラップ スイッチ

ネイティブ Bootstrap スイッチについては、以下の ohkts11 の回答を参照してください。

于 2013-03-01T15:16:59.007 に答える
59

HTML を変更してもかまわない場合は、s でdata-toggle属性を使用できます<button>。ボタンの例のシングル トグルセクションを参照してください。

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>
于 2014-01-21T05:02:25.860 に答える
32

Bootstrap 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これらを機能させるには、Bootstrap の Javascript で s を初期化する必要があります。

$('.btn').button();
于 2014-09-18T18:37:14.977 に答える
8

JavaScriptを使用して「アクティブ」クラスを手動でアクティブ化しようとしています。完全なライブラリほど使いやすいわけではありませんが、簡単なケースでは十分なようです:

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

よく考えてみると、'active' クラスはボタンが押されたときにブートストラップによって使用され、その前後 (私たちのケース) では使用されないため、同じクラスを再利用しても競合は発生しません。

この例を試して、失敗したかどうか教えてください: http://jsbin.com/oYoSALI/1/edit?html,js,output

于 2013-11-27T12:54:39.100 に答える
3

ここでは、 Bootstrap Toggle Buttonに非常に便利です。コードスニペットの例!! 以下の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>
上記でいくつかの例を示しました。お役に立てば幸いです。Js Fiddle はこちら ソースコードはGitHub で入手できます。

Bootstrap 4 の更新 2020

2020年はbootstrap4-toggleを推奨しました。

<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>

于 2017-05-05T07:08:12.417 に答える
2

CSS Toggle Switch ライブラリを使用できます。CSS をインクルードし、自分で JS をプログラムするだけです: http://ghinda.net/css-toggle-switch/bootstrap.html

于 2014-04-04T18:30:17.013 に答える
2

Bootstrap 3.3.0 のマテリアル デザイン スイッチを使用できます。

http://bootsnipp.com/snippets/featured/material-design-switch

于 2016-01-07T10:21:55.177 に答える
-1

誰かがまだ素敵なスイッチ/トグル ボタンを探している場合に備えて、私は Rick の提案に従い、その周囲に単純な angular ディレクティブangular-switchを作成しました。Windows スタイルのスイッチを好むだけでなく、上記の angular-bootstrap-switch と bootstrap-switch を一緒に使用する場合と比較して、ダウンロードの合計もはるかに小さくなります (2kb 対 23kb の縮小された css+js)。

次のように使用します。まず、必要な 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 アプリで有効にします。

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

これで、次のように使用する準備が整いました。

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

ここに画像の説明を入力

于 2015-08-06T23:38:08.537 に答える