Nasıl geçiş düğmesi oluşturursunuz?

98

Html'de css kullanarak bir geçiş düğmesi oluşturmak istiyorum. Bunu, üzerine tıkladığınızda içeri itilmiş olarak kalmasını ve tekrar tıkladığınızda dışarı çıkmasını istiyorum.

Eğer css kullanarak yapmanın bir yolu yoksa. JQuery kullanarak yapmanın bir yolu var mı?

jquery  html  css 
— Donny V.
kaynak
Sadece CSS3 ile açma / kapama anahtarlarının nasıl oluşturulacağı hakkında bir eğitim yazdım , JS'ye gerek yok. Demoyu burada görebilirsiniz
— Felix Hagspiel
— Gopal Joshi

Yanıtlar:

87

İyi anlamsal yol, bir onay kutusu kullanmak ve ardından işaretli olsun ya da olmasın farklı şekillerde biçimlendirmektir. Ama bunu yapmanın iyi bir yolu yok. Fazladan span, extra div ve gerçekten güzel bir görünüm için biraz javascript eklemelisiniz.

Bu nedenle en iyi çözüm, düğmenin iki farklı durumunu şekillendirmek için küçük bir jQuery işlevi ve iki arka plan görüntüsü kullanmaktır. Kenarlıklar tarafından verilen yukarı / aşağı efektli örnek:

$(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>
Snippet'i genişlet

Açıktır ki, yukarı ve aşağı butonları temsil eden arka plan resimleri ekleyebilir ve arka plan rengini şeffaf hale getirebilirsiniz.

— Alexmeia
kaynak
17
İşte bu kodla bir JS kemanını canlı olarak deneyebilirsiniz ... jsfiddle.net/LmULE
— Evan
Bilginize: Bu gönderiyle aynı şeyi yalnızca Google Dart steelpinjata.com/2014/03/20/toggle-buttons-in-dart kullanarak yaptım . Not: Chromium'da çalışır, ancak JavaScript'e derlenebilir ve diğer modern tarayıcılarda da çalışabilir. IE tarayıcı olarak sayılmaz ;-)
— Serge Merzliakov
51

JQuery UI, geçiş düğmeleri oluşturmayı kolaylaştırır. Sadece bunu koy

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

sayfanızda ve sonra vücudunuzda onLoadveya sizin $.ready()(veya init()bir ajax sitesi oluşturuyorsanız bazı nesne değişmezleri çalışır ..) şöyle bir JQuery bırakın:

$("#myToggleButton").button()

bu kadar. ( < label for=...>JQueryUI bunu geçiş düğmesinin gövdesi için kullandığı için unutmayın ..)

Oradan, başka herhangi bir şey gibi onunla çalışırsınız input="checkbox"çünkü temeldeki kontrol hala budur, ancak JQuery UI, ekranda hoş bir geçiş düğmesi gibi görünmesi için onu kaplar.

— bkdraper
kaynak
OP'nin jquery etiketini eklediğini düşünürsek, bu harika bir cevap. Verilen jqueryUI, uyumlu stil sağlamak için kullanılabilir.
— Joe Johnston
28

işte bir örnek 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>
Snippet'i genişlet

— suhailvs
kaynak
19

İle birlikte bu cevap, aynı zamanda mobil ayarlar Toggler gibidir tarzı bu tür kullanabilirsiniz.

togglers

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

Çok daha güzel olabilirdi ama fikir veriyor.
Bir avantajı, jquery ve / veya CSS3 Fiddler ile canlandırılabilmesidir.

— Pierre de LESPINAY
kaynak
7

Uygun bir düğme istiyorsanız, biraz javascript'e ihtiyacınız olacak. Bunun gibi bir şey (stil üzerinde biraz çalışmaya ihtiyaç var ama özü anladınız). Dürüst olmak gerekirse bu kadar önemsiz bir şey için jquery kullanmakla uğraşmazdım.

<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>
— maymun yapmak
kaynak
4

Durumu toggleClass()izlemek için kullanabilirsiniz . Ardından, düğme öğesinin şu şekilde sınıfa sahip olup olmadığını kontrol edersiniz:

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

Ve kullandığım buttonsemantik nedenlerle düğmeleri için eleman.

<button class="toggler">Toggle me</button>
— tim
kaynak
3

Bir bağlantı öğesi ( <a></a>) kullanabilir ve a: active ve a: link kullanarak arka plan resmini açıp kapatacak şekilde değiştirebilirsiniz. Sadece bir düşünce.

Düzenleme: Yukarıdaki yöntem geçiş için çok iyi çalışmıyor. Ancak jquery kullanmanıza gerek yok. Öğe için, düğmeye basılmış gibi görünmesi için arka plan görüntüsünü uygun şekilde değiştiren ve bir miktar bayrak ayarlayan basit bir onClick javascript işlevi yazın. Ardından bir sonraki tıklamada görüntü ve bayrak geri döndürülür. Öyle gibi

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

Ve html böyle <div id="toggleDiv" onclick="toggle()">Some thing</div>

— anand.trex
kaynak
3

Bir düğme oluşturmak için JS kullanmanın iyi bir uygulama olduğunu düşünmüyorum. Ya kullanıcının tarayıcısı JavaScript'i devre dışı bırakırsa?

Ayrıca, bunu yapmak için bir onay kutusu ve biraz CSS kullanabilirsiniz. Ve onay kutunuzun durumunu geri almak çok kolay.

Bu sadece bir örnek, ancak istediğiniz gibi şekillendirebilirsiniz.

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

Bu yardımcı olur umarım

— Titouan de Bailleul
kaynak
2

Css'nizde, düğmeye basıldığında kenarlık stilini veya kenarlık genişliğini değiştiren bir sınıf kullanmaya meyilli olurum, böylece bir geçiş düğmesi görünümü verir.

— Galve dili
kaynak
1

Şunu biraz dene:

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);
— Peter
kaynak
0

"Etkin" sözde sınıfı kullanabilirsiniz (bağlantı dışındaki öğeler için IE6'da çalışmaz)

a:active
{
    ...desired style here...
}
— Pilsetnieks
kaynak
0

İşte jQuery ile ToggleButton'ın örnek / varyantlarından biri (daha ayrıntılı olarak açıklanmıştır) <label for="input"> uygulama .

Birincisi, ToggleButton'umuz için klasik HTML kullanarak kapsayıcı oluşturacağız <input>ve<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>

Ardından düğmemizi değiştirmek için işlev tanımlayacağız. Aslında <label>düğmemiz, değer geçişini temsil etmek için şekillendireceğimiz olağan .

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

İşlev, yeniden kullanılabilir bir şekilde uygulanır. Oluşturduğunuz birden fazla, iki veya hatta üç ToggleButton için kullanabilirsiniz.

... ve son olarak ... beklendiği gibi çalışmasını sağlamak için, geçiş işlevini doğaçlama düğmemizin bir olayına ("değişiklik" olayı) bağlamalıyız <label>(bu click, checkboxdoğrudan değiştirmeyeceğimiz için changeolay olacaktır , yani olay yok kovulabilir <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 ile , değerdeki değişimi temsil etmek için backgorund-imageveya bazılarını tanımlayabiliriz.border<label> , bir onay kutusunun değerini değiştirirken bizim için işi , ;).

Umarım bu birine yardımcı olur.

— Paul T. Rawkeen
kaynak
+ bu uygulama mobil cihazlarda da doğru çalışıyor gibi görünüyor bec. Yukarıda TDeBailleul tarafından önerilen CCS uygulaması Android'de düzgün çalışmıyordu (Android 2.3.5 varsayılan tarayıcı; aynı sistemde Opera Mobile Tamam idi).
— Paul T. Rawkeen
Ayrıca, .addClass()/ .removeClass()you yerine kullanabilirsiniz .toggleClass(), ancak açıklanan yöntem checked/ uncheckeddeğerleri için eylemleri açıkça tanımlar .
— Paul T. Rawkeen
0

Deneyin;

<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>

Ve emin olun 

<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
      <link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>

Bu kodlama zaman hatırla, sadece somename ve someidgiriş etiketinde değiştirebilir, aksi takdirde iş yapmaz.

— ЯegDwight
kaynak
0

Ben de cevap arıyordum ve bunu CSS ile tamamlamak istiyordum. CSS NINJA ile çözüm buldum Güzel bir uygulama <input type="checkbox">ve bazı css Live demosu ! IE 8'de çalışmasa da selectivizr'i uygulayabilirsiniz ! ve düzeltme CSS kullanımları opacityiçinfilter IE'de çalışması için.

2014 DÜZENLEME:

yeni geçiş düğmeleri için Lea Verou blogunda bulunan çözümü iOS onay kutusuna görsel olarak benzer şekilde kullanıyorum

— Aivaras
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.