トグルボタンはどのように作成しますか？

98

CSSを使用してHTMLでトグルボタンを作成したいと思います。クリックすると押し込まれたままになり、もう一度クリックすると飛び出るようにします。

CSSを使用するだけの方法がない場合。jQueryを使用してそれを行う方法はありますか？

jquery  html  css 
— ドニーV
ソース
CSS3のみでオン/オフスイッチを作成する方法についてのチュートリアルを書きました。JSは必要ありません。ここでは、デモを見ることができます
— Felix Hagspiel
— ゴパル・ジョシ

回答:

87

良い意味論的な方法は、チェックボックスを使用し、チェックされているかどうかにかかわらず、さまざまな方法でスタイルを設定することです。しかし、それを行う良い方法はありません。追加のスパン、追加のdivを追加する必要があります。本当に見栄えを良くするには、JavaScriptを追加します。

したがって、最善の解決策は、小さなjQuery関数と2つの背景画像を使用して、ボタンの2つの異なるステータスをスタイル設定することです。ボーダーで上下効果を与える例：

$(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>
スニペットを展開

もちろん、ボタンアップとボタンダウンを表す背景画像を追加して、背景色を透明にすることができます。

— アレクセイア
ソース
17
これがこのコードのJSフィドルです。実際に
— Evan
参考までに、私はこの投稿と同じことをしましたが、Google Dart steelpinjata.com/2014/03/20/toggle-buttons-in-dartのみを使用しました。注：Chromiumで動作しますが、JavaScriptにコンパイルでき、他の最新のブラウザで動作します。IEはブラウザーとしてカウントされません;-)
— Serge Merzliakov
50

jQuery UIは、トグルボタンの作成を簡単にします。これを置くだけ

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

あなたのページにそしてあなたの体onLoadまたはあなたの$.ready()（またはinit()あなたがajaxサイトを構築している場合はいくつかのオブジェクトリテラル関数..）のようにいくつかのJQueryをドロップしてください：

$("#myToggleButton").button()

それでおしまい。（< label for=...>JQueryUIはトグルボタンの本体にそれを使用するため、忘れないでください。）

そこから他のように操作します input="checkboxコントロールと同じように操作できます。これは、基本的なコントロールがまだ残っているためですが、JQuery UIは、スキンを適用して画面上のかわいいトグルボタンのように見せます。

— bkdraper
ソース
OPがjqueryタグを追加したことを考えると、これは素晴らしい答えです。指定されたjqueryUIを使用して、一致するスタイルを提供できます。
— Joe Johnston、
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

この回答と組み合わせて、モバイル設定トグラーのようなこの種のスタイルを使用することもできます。

トグラー

HTML

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

CSS

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');
    });
});

かなりきれいかもしれませんが、アイデアを与えます。
1つの利点は、jqueryやCSS3 Fiddlerでアニメーション化できることです。

— ピエール・ド・レスピーネ
ソース
7

適切なボタンが必要な場合は、javascriptが必要です。このようなもの（スタイリングにいくつかの作業が必要ですが、要点はわかります）。正直に言うとそれほど些細なことのために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：activeおよびa：linkを使用して、背景画像をオンまたはオフに切り替えることができます。ちょっとした考え。

編集：上記の方法は、トグルではうまく機能しません。ただし、jqueryを使用する必要はありません。要素の簡単なonClick JavaScript関数を記述します。これは、ボタンが押されたように見えるように背景画像を適切に変更し、フラグを設定します。次に次のクリックで、画像とフラグが元に戻ります。そのようです

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を使用してボタンを作成することは良い習慣ではないと思います。ユーザーのブラウザでJavaScriptが無効になっている場合はどうなりますか？

さらに、チェックボックスと少しのCSSを使用して実行することもできます。また、チェックボックスの状態を簡単に取得できます。

これは一例ですが、好きなようにスタイルを設定できます。

http://jsfiddle.net/4gjZX/

HTML

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

CSS

.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

ボタンが押されたときに境界線のスタイルまたは境界線の幅を変更するCSSのクラスを使用する傾向があるので、トグルボタンの外観を提供します。

— ガルウィ語
ソース
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

「アクティブ」な疑似クラスを使用できます（ただし、リンク以外の要素の場合、IE6では機能しません）。

a:active
{
    ...desired style here...
}
— pilsetnieks
ソース
0

以下に、jQueryと<label for="input">実装を使用したToggleButtonの例/バリアント（詳細を説明）の1つを示します。

1つ目は、クラシックHTML <input>を使用してToggleButtonのコンテナを作成し、<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)
}

関数は再利用可能な方法で実装されます。作成した1つ、2つ、または3つ以上のトグルボタンに使用できます。

...そして最後に...期待どおりに機能させるために、トグル機能を即興<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>

これが誰かを助けることを願っています。

— ポール・T・ローキーン
ソース
+この実装は、モバイルデバイスでも正しく機能しているようです。上記でTDeBailleulによって提案されたCCS実装は、Android（Android 2.3.5のデフォルトブラウザー、同じシステム上のOpera Mobileは問題ありません）では適切に機能しませんでした。
— Paul T. Rawkeen、2012
また、.addClass()/の代わりにを.removeClass()使用することもできますが.toggleClass()、説明されているメソッドは、checked/ unchecked値のアクションを明示的に定義します。
— ポールT.ローキーン
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>

これをコーディングするときは、inputタグのみ somenameでsomeid変更できることに注意してください。変更しないと機能しません。

— ЯegDwight
ソース
0

私も答えを探していて、CSSでそれを達成したいと思っていました。私はCSS NINJAによる解決策を見つけました。これは、<input type="checkbox">CSS ライブデモの素晴らしい実装です。IE 8では機能しませんが、selectivizrを実装できます！そして、修正CSSの用途opacityにfilter、それはIEで動作させるために。

編集2014：

新しいトグルボタンの場合、Lea Verouブログにあるソリューションを使用します。視覚的にはiOSチェックボックスに似ています。

— アイバラス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.