Möglicherweise besserer Weg, diesen hacky Toggle-Button zu programmieren?

Ich habe eine Umschalttaste, die codiert wurde, aber ich denke nicht, dass es gut ist, in meiner Form zu verwenden, da es ein ziemlich schlechter Hacky-Code ist, um beide Optionen auszuwählen.Möglicherweise besserer Weg, diesen hacky Toggle-Button zu programmieren?

Gibt es eine bessere/effizientere Möglichkeit, diese Umschalttaste zu programmieren? Ich bin nicht gut mit jQuery, so dass jede Hilfe mit bereitgestellten Funktionen hilfreich wäre.

Wenn es auch eine Möglichkeit gibt, den Schieberegler nach links/rechts zu schieben, statt nach links/rechts zu klicken, wäre das auch großartig.

Ich habe beigefügt auch diese Bilder das Verhalten zu zeigen, wie es funktionieren sollte:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons

Haben Sie Fragen, wenden Sie sich bitte ...

<html> 
<head> 
    <style> 
    #toggle-slide { 
     border: 4px #303F9F solid; 
     border-radius: 5px; 
     display: flex; 
     width:300px; 
     color: white; 
     font-weight: 700; 
     text-align: center; 
     cursor: pointer; 
    } 
    #toggle-slide div { 
     flex:1; 
     padding: 10px 20px; 
    } 
    #toggle-option-0 { 
     background-color:#3F51B5; 
    } 
    #toggle-option-1 { 
     background-color:white; 
    } 
    </style> 

    <script> 
    function toggle() { 
     realToggle = document.getElementById('real-toggle'); 
     if (realToggle.value == 0) { 
     realToggle.value=1; 
     document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5'; 
     document.getElementById('toggle-option-1').style.backgroundColor='#FFF'; 
     } else { 
     realToggle.value=0; 
     document.getElementById('toggle-option-0').style.backgroundColor='#FFF'; 
     document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';   
     } 
    } 
    </script> 
</head> 

<body> 
    <div id='toggle-slide' onclick='toggle()'> 
    <div id='toggle-option-0' class='active'>Private</div> 
    <div id='toggle-option-1'>Public</div> 
    <input id='real-toggle' type=hidden name=private value=1 /> 
    </div> 
</body> 
</html>

Quelle

2016-03-27 Krys

mögliches Duplikat fragen wurden [Wie Erstellen Sie einen Ein/Aus-Schalter mit Javascript/CSS?] (http://stackoverflow.com/questions/1957466/how-to-create-an-on-off-swit ch-with-javascript-css) – GSerg

Mögliches Duplikat von [Wie erstelle ich eine Umschaltfläche?] (http://stackoverflow.com/q/309081/11683) – GSerg

Sie diese vollständig in reinem CSS tun können, aber da Sie für jQuery ...

$(document).ready(function() { 
 
    $('.input-button').click(function() { 
 
    if ($('.public').hasClass('selected')) { 
 
     $('.public').removeClass('selected'); 
 
     $('.private').addClass('selected'); 
 
     $('.slider').stop().animate({ 
 
     left: '48%' 
 
     }, 200); 
 
    } else { 
 
     $('.private').removeClass('selected'); 
 
     $('.public').addClass('selected'); 
 
     $('.slider').stop().animate({ 
 
     left: '2%' 
 
     }, 200); 
 
    } 
 
    }); 
 
});

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.input-button { 
 
    width: 200px; 
 
    height: 40px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -100px; 
 
    margin-top: -20px; 
 
    position: absolute; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    color: #FFF; 
 
    background-color: #2E86AB; 
 
    border-radius: 4px; 
 
    line-height: 40px; 
 
    font-family: sans-serif; 
 
    -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); 
 
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); 
 
    cursor: pointer; 
 
} 
 
span { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
} 
 
.input-button div { 
 
    width: 100px; 
 
    height: 85%; 
 
    top: 50%; 
 
    left: 2%; 
 
    transform: translateY(-50%); 
 
    position: absolute; 
 
    background-color: #FFF; 
 
    border-radius: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='input-button'> 
 
    <div class='slider'></div> 
 
    <span class='private'>Private</span> 
 
    <span class='public selected'>Public</span> 
 
</div>

Quelle

2016-03-27 09:14:49 Devplex

Das sieht gut aus Devlex, was wäre dein Vorschlag für reines CSS? Ich suche immer nach einer Lösung in reinem CSS – Krys

Dies sollte auch in allen Browsern funktionieren, wenn möglich – Krys

@freestock.tk lieferte eine gute reine CSS-Antwort. Ich dachte nur, du könntest einen in jQuery verwenden, da du es erwähnt hast. Ich änderte es ein wenig, indem ich Pseudo-Elemente für andere Browser hinzufügte, sollte Cross-Browser-kompatibel sein. Sie können die Positionierung entfernen und die Farben ändern, wie Sie wollen. Die waren einfach da für ein paar Augenschmaus :) – Devplex

Hier ist ein gutes Beispiel von dem, was Sie versuchten zu erstellen

jQuery on-off-switch.js Plugin

Es wurde auch mit jQuery implementiert und unterstützt die Drag-Funktion.

How to use the plugin

Quelle

2016-03-27 08:31:28 dimshik

nicht das gleiche Dimshik. – Krys

Eine reine CSS-Version:

Im folgenden Ausschnitt ein verstecktes Checkbox gibt es das wird aktiviert/deaktiviert, wenn der Inhalt in label geklickt wird. Mit dem CSS-Selektor :checked wird die Position #background von 0% in 50% geändert und die Farbe wechselt von rot zu blau.

Der Hintergrund wird vom Text getrennt und mit position:absolute (um leicht verschoben werden) plus z-index:-1 (die es hinter den Untertiteln bringt) festgelegt. Ein CSS transition hinzugefügt auf der #background animiert die Änderungen an seiner Position/Farbe.

.toggle-slide { 
 
     border: 4px #555 solid; 
 
     border-radius: 5px; 
 
     display: flex; 
 
     width: 300px; 
 
     color: white; 
 
     font-weight: 700; 
 
     text-align: center; 
 
     cursor: pointer; 
 
     position: relative; 
 
     -webkit-touch-callout: none; /* iOS Safari */ 
 
     -webkit-user-select: none; /* Chrome/Safari/Opera */ 
 
     -khtml-user-select: none; /* Konqueror */ 
 
     -moz-user-select: none;  /* Firefox */ 
 
     -ms-user-select: none;  /* IE/Edge */ 
 
     user-select: none; 
 
} 
 

 
.toggle-slide .subtitle { 
 
     flex: 1; 
 
     padding: 10px 20px; 
 
} 
 

 
#background { 
 
     width: 50%; 
 
     height: 100%; 
 
     top: 0; 
 
     left: 0; 
 
     position: absolute; 
 
     z-index: -1; 
 
     background-color: tomato; 
 
     -webkit-transition: all 0.6s; /* Safari */ 
 
     transition: all 0.6s; 
 
     -webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1); 
 
     transition-timing-function: cubic-bezier(0.2,1,0.2,1); 
 
    } 
 

 
input[type=checkbox] { 
 
     display: none; 
 
} 
 

 
#real:checked ~ label #background { 
 
     background-color: skyblue; 
 
     left: 50%; 
 
}

<input id=real type=checkbox name=real /> 
 
<label class=toggle-slide for=real> 
 
    <div id=background></div> 
 
    <div class=subtitle>Private</div> 
 
    <div class=subtitle>Public</div> 
 
</label>

Quelle

2016-03-27 08:36:56

abgestimmt, aber es wäre toll, wenn Sie einen Text hinzufügen könnten, der erklärt, wie es funktioniert, z. B. Browseranforderungen usw. – Roberto

die Frage ist jetzt aktualisiert; Danke für das Interesse; –

Möglicherweise besserer Weg, diesen hacky Toggle-Button zu programmieren?

Antwort

Verwandte Themen