jquery - 複数 - トグル html




どのようにトグルボタンを作成しますか? (10)

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

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


JQuery UIは、トグルボタンの作成から軽量化を実現します。 ちょうどこれを置く

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

あなたのページの上であなたの体のonLoadまたはあなたの$.ready() (またはいくつかのオブジェクトリテラルinit()関数をビルドする場合は、ajaxサイト..)いくつかのJQueryのようにドロップ:

$("#myToggleButton").button()

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

そこから、他のinput="checkbox "のように動作しinput="checkbox 。なぜなら、それは基本的なコントロールがまだありますが、JQueryのUIはスキンして画面上のきれいなトグルボタンのように見えるからです。


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

お役に立てれば


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>


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>

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

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

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

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

セマンティックな方法は、チェックボックスを使用し、それがチェックされているかどうかに応じてさまざまな方法でスタイルを設定することです。 しかし、良い方法はありません。 あなたは余分なスパン、余分な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>

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


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

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


私はあなたのCSSのクラスを使用して、ボタンが押されたときに境界線のスタイルや境界線の幅を変更して、トグルボタンを表示するようにしたいと考えています。


試してみる。

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

これをコーディングしているときには、 somenamesomeid だけが入力タグで変更できることを覚えておいてください。そうでないと、動作しません。





css