jquery 複数 トグルボタンを作成するにはどうすればよいですか?




トグル html (12)

私はcssを使用してhtmlでトグルボタンを作成したいと思います。 私はあなたがそれをクリックすると、押し込まれたままになり、それを再びクリックすると、それが飛び出すようにしたい。

場合は、CSSを使用してそれを行う方法はありません。 jQueryを使ってそれを行う方法はありますか?


このビットを試してください:

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

以下は、 <label for="input">実装でjQueryを使用したToggleButtonの例/変形(詳しく説明しています)の1つです。

まず、従来のHTML <input><label>を使用して、ToggleButtonのコンテナを作成します。

<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を1つ、2つ、または3つ以上使用することができます。

...そして最後に...期待どおりに動作させるために、私たちは、即座に変更された<label>ボタンのイベント( "change"イベント)にトグル機能をバインドする必要がありclick<label>に対してchangeイベントは発生できません)。

$(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>はチェックボックスの値を変更するために仕事をします。

これが誰かを助けることを望みます。


あなたは "アクティブ"疑似クラスを使うことができます(リンク以外の要素についてはIE6では動作しません)

a:active
{
    ...desired style here...
}

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

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


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

お役に立てれば


適切なボタンが必要な場合は、いくつかの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>

toggleClass()を使用して状態を追跡できます。 次に、button要素にクラスがあるかどうかをチェックします。

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

私はbutton要素を意味的な理由からボタンに使用しbutton

<button class="toggler">Toggle me</button>


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>


セマンティックな方法は、チェックボックスを使用し、それがチェックされているかどうかに応じてさまざまな方法でスタイルを設定することです。 しかし、良い方法はありません。 あなたは余分なスパン、余分なdivを追加する必要があります、そして、本当に素晴らしい外観のために、いくつかのjavascriptを追加してください。

したがって、ボタンの2つの異なるステータスをスタイリングするために、小さなjQuery関数と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>

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


私が答えを探している限り、CSSでそれを実現したいと思っていました。 私はCSS NINJAによって解決策を見つけました。 <input type="checkbox">といくつかのCSSのライブデモの素晴らしいインパネーションです! それはIE 8で動作していませんが、あなたはselectivizrを実装することができます! opacityを使用するCSSを修正してfilterし、IEで動作させるようにします。

EDIT 2014:

新しいトグルボタンのために、私はLea Verouブログの iOSチェックボックスに視覚的に類似したソリューションを使用します


アンカーエレメント( <a></a> )を使用して、:アクティブおよびa:リンクを使用して、背景イメージをオンまたはオフに切り替えることができます。 ちょっとした考え。

編集:上記の方法はトグルでうまく動作しません。 しかし、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>





css