我一直在尋找一個三態撥動開關，但運氣不佳。
基本上，我需要一個具有以下狀態的開關: |開|不適用|關
默認情況下，滑塊從中間開始，一旦用戶向左或向右滑動，他們就不能回到N/A(未回答)狀態。
有人知道如何處理這件事嗎？
試著這樣做:
.switch-toggle {
width: 10em;
}
.switch-toggle label:not(.disabled) {
cursor: pointer;
}<link rel="stylesheet" />
<div class="switch-toggle switch-3 switch-candy">
<input id="on" name="state-d" type="radio" checked="" />
<label for="on" onclick="">ON</label>
<input id="na" name="state-d" type="radio" disabled checked="checked" />
<label for="na" class="disabled" onclick=""> </label>
<input id="off" name="state-d" type="radio" />
<label for="off" onclick="">OFF</label>
<a></a>
</div>.switch-toggle {
float: left;
background: #242729;
}
.switch-toggle input {
position: absolute;
opacity: 0;
}
.switch-toggle input + label {
padding: 7px;
float:left;
color: #fff;
cursor: pointer;
}
.switch-toggle input:checked + label {
background: green;
}<div class="switch-toggle switch-3 switch-candy">
<input id="on" name="state-d" type="radio" checked="" />
<label for="on" onclick="">ON</label>
<input id="na" name="state-d" type="radio" checked="checked" />
<label for="na" class="disabled" onclick="">N/A</label>
<input id="off" name="state-d" type="radio" />
<label for="off" onclick="">OFF</label>
</div>作為jQuery插件
function filterme(value) {
value = parseInt(value, 10); // Convert to an integer
if (value === 1) {
$('#RangeFilter').removeClass('rangeAll', 'rangePassive').addClass('rangeActive');
$('span').text('Active');
} else if (value === 2) {
$('#RangeFilter').removeClass('rangeActive', 'rangePassive').addClass('rangeAll');
$('span').text('All');
} else if (value === 3) {
$('#RangeFilter').removeClass('rangeAll', 'rangeActive').addClass('rangePassive');
$('span').text('Passive');
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="range-field" style=" width:60px">
<input type="range" id="RangeFilter" name="points" onchange="filterme(this.value);" min="1" class="rangeAll" max="3" value="2">
</p>
<span>All</span>如果你想要一個帶有顏色的“否/未設置/是”開關，類似這樣:
然后使用上面DarkAjax的答案，但是添加下面的CSS:
.switch-toggle input:checked.toggle-no ~ a {
background-color: red;
}
.switch-toggle input:checked.toggle-yes ~ a {
background-color: green;
}
.switch-toggle input:checked.toggle-unset ~ a {
background-color: grey;
}并添加各自的類(class = & quot切換-否& quot等。)到相應的單選按鈕輸入。如果你愿意，你還可以添加圖標之類的東西。
希望這能幫助到一些人！
除了gat的回復，還可以通過Bootstrap將其建模為分組單選按鈕:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="On" />ON</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="NA" />N/A</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="Off" />OFF</label>
</div>http://jsfiddle.net/p7DGe/1/
我創建了一個JSFiddle，演示了一個全功能的三態開關。請注意，JSfiddle中的javascript窗口沒有正常工作，所以腳本被加載到html窗口中。
function togglebutton(range) {
var val = range.value;
if (val == 1) {
//change color of slider background
range.className = "rangeFalse";
//alter text
$('.toggle-false-msg').attr('id', 'textActive');
$('.toggle-neutral-msg').attr('id', '');
$('.toggle-true-msg').attr('id', '');
} else if (val == 2) {
//change color of slider background
range.className = "rangeNeutral";
//alter text
$('.toggle-false-msg').attr('id', '');
$('.toggle-neutral-msg').attr('id', 'textActive');
$('.toggle-true-msg').attr('id', '');
} else if (val == 3) {
//change color of slider background
range.className = "rangeTrue";
//alter text
$('.toggle-false-msg').attr('id', '');
$('.toggle-neutral-msg').attr('id', '');
$('.toggle-true-msg').attr('id', 'textActive');
}
}.test_div {
height: 50px;
width: 50px;
background: #204d75 !important;
top: 100px;
position: relative;
display: block;
}
.toggle-container {
position: relative;
width: 8em;
margin: 1em;
padding: 0.25em;
border: thin solid lightgrey;
text-align: center;
}
.range-field {
display: inline-block;
width: 100px;
margin: 0px;
border-radius: 2px;
}
input[type=range] {
-webkit-appearance: none;
margin: 0;
width: 100%;
padding: 0px;
outline: none;
border: none;
}
.toggle-false-msg {
display: none;
opacity: .2;
transition: .5s opacity;
display: inline-block;
position: relative;
top: -8px;
}
.toggle-true-msg {
display: none;
opacity: .2;
transition: .5s opacity;
display: inline-block;
position: relative;
top: -8px;
}
.toggle-neutral-msg {
display: none;
opacity: .2;
transition: .5s opacity;
display: none;
position: relative;
top: -8px;
}
#rangeActive {
background-color: blue;
}
#textActive {
opacity: 1;
color: black;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 30px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #3071A9;
border-radius: 0px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 30px;
width: 19px;
border-radius: 0px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: 0px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #3071A9;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 30px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #3071A9;
border-radius: 0px;
border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 30px;
width: 19px;
border-radius: 0px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 30px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #3071A9;
border: 0px solid #000000;
border-radius: 0px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
background: #3071A9;
border: 0px solid #000000;
border-radius: 0px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000;
border: 0px solid #000000;
height: 30px;
width: 19px;
border-radius: 0px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071A9;
}
input[type=range]:focus::-ms-fill-upper {
background: #3071A9;
}
.rangeFalse::-webkit-slider-runnable-track {
background: #5d0a0a !important;
}
.rangeFalse::-webkit-slider-thumb {
background: white !important;
}
.rangeNeutral::-webkit-slider-runnable-track {
background: #204d75 !important;
}
.rangeNeutral::-webkit-slider-thumb {
background: white !important;
}
.rangeTrue::-webkit-slider-runnable-track {
background: #0e4e1f !important;
}
.rangeTrue::-webkit-slider-thumb {
background: white !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-container">
<div class="toggle-false-msg">Off</div>
<div class="range-field" style=" width:60px">
<input type="range" name="points" min="1" class="" max="3" value="2"
onchange="togglebutton(this);">
</div>
<div class="toggle-neutral-msg">Neutral</div>
<div class="toggle-true-msg">On</div>
</div>這是一個三向反應開關，帶有前進、后退、解鎖軌道和鍵盤控制，你可以在CodePen這里看到它的運行。它從左邊的位置開始，稱為選項1，但是您可以修改它，從您喜歡的任何位置開始。
/*React Component*/
class ThreeWayToggleSwitchComponent extends React.Component {
constructor(props) {
super(props);
this.threeWayToggleSwitchComponentDivRef = React.createRef();
this.option1Ref = React.createRef();
this.option3Ref = React.createRef();
this.slidingButtonDivRef = React.createRef();
this.state = {
selectedOption: "Option 1"
};
this.handleOptionChange = this.handleOptionChange.bind(this);
this.keyboardPress = this.keyboardPress.bind(this);
}
handleOptionChange(event) {
if (event.target.value === "Option 1") {
if (this.state.selectedOption === "Option 2") {
this.setState({
selectedOption: event.target.value
});
this.slidingButtonDivRef.current.style.transform = "translate(0px)";
this.slidingButtonDivRef.current.style.background = "green";
}
else if (this.state.selectedOption === "Option 3") {
this.setState({
selectedOption: "Option 2"
});
this.slidingButtonDivRef.current.style.transform = "translate(40px)";
this.slidingButtonDivRef.current.style.background = "yellow";
}
}
else if (event.target.value === "Option 2") {
this.setState({
selectedOption: "Option 2"
});
this.slidingButtonDivRef.current.style.transform = "translate(40px)";
this.slidingButtonDivRef.current.style.background = "yellow";
}
else if (event.target.value === "Option 3") {
if (this.state.selectedOption === "Option 1") {
this.setState({
selectedOption: "Option 2"
});
this.slidingButtonDivRef.current.style.transform = "translate(40px)";
this.slidingButtonDivRef.current.style.background = "yellow";
}
else if (this.state.selectedOption === "Option 2") {
this.setState({
selectedOption: "Option 3"
});
this.slidingButtonDivRef.current.style.transform = "translate(80px)";
this.slidingButtonDivRef.current.style.background = "red";
}
}
}
keyboardPress(event) {
if (event.keyCode === 37) {
this.option1Ref.current.click();
}
else if (event.keyCode === 39) {
this.option3Ref.current.click();
}
}
componentDidMount() {
this.threeWayToggleSwitchComponentDivRef.current.focus();
}
render() {
return(
<div ref={this.threeWayToggleSwitchComponentDivRef} id="three-way-toggle-switch-component-div" tabIndex="0" onKeyDown={this.keyboardPress}>
<div id="radio-buttons-and-sliding-button-container-div">
<div id="radio-buttons-div">
<label id="option-1-label" className="single-option-label" for="option-1">Label 1
<input type="radio" ref={this.option1Ref} id="option-1" className="radio-input-class" name="radio-input" value="Option 1" checked={this.state.selectedOption === "Option 1"} onChange={this.handleOptionChange}/>
</label>
<label id="option-2-label" className="single-option-label" for="option-2">Label 2
<input type="radio" id="option-2" className="radio-input-class" name="radio-input" value="Option 2" checked={this.state.selectedOption === "Option 2"} onChange={this.handleOptionChange}/>
</label>
<label id="option-3-label" className="single-option-label" for="option-3">Label 3
<input type="radio" ref={this.option3Ref} id="option-3" className="radio-input-class" name="radio-input" value="Option 3" checked={this.state.selectedOption === "Option 3"} onChange={this.handleOptionChange}/>
</label>
</div>
<div ref={this.slidingButtonDivRef} id="sliding-button-div">
</div>
<div>
<div id="selected-option">Option Selected: {this.state.selectedOption}
</div>
<div id="keyboard-message">
You can control the sliding button via the left arrow key or the right arrow key on your keyboard.
</div>
</div>
);
}
};
ReactDOM.render(<ThreeWayToggleSwitchComponent/>, document.getElementById("react-component-div"));
/*CSS Styling*/
#three-way-toggle-switch-component-div:focus {
outline: none;
}
#radio-buttons-and-sliding-button-container-div {
position: relative;
display: inline-block;
height: 30px;
width: 120px;
border: 2px solid black;
border-radius: 5px;
}
#sliding-button-div {
position: absolute;
display: inline-block;
top: 0;
height: 30px;
width: 40px;
background: green;
transition: 0.8s;
border-radius: 3px;
}
#radio-buttons-div {
display: flex;
justify-content: space-between;
}
.single-option-label {
width: 100%;
color: transparent;
}
.radio-input-class {
display: none;
}您可以始終使用同心三元運算符。 這是個陷阱..
className = {title === 'One '？class . one:(title = = = ' Two:classes . Two:classes . three)
等等..對于n個類。
$(document).ready(function(){
$("#toggle-button1").addClass("active");
$(".tri-state-toggle-button").click(function(){
$(".tri-state-toggle-button").removeClass("active");
var id = $(this).attr('id');
$("#" + id).addClass("active");
});
});body {
margin-left: 100px;
margin-top: 100px;
}
.tri-state-toggle {
background: rgba(0,0,0,0.8);
box-shadow: inset 0 2px 8px 0 rgba(165,170,174,0.25);
border-radius: 24px;
display: inline-block;
overflow: hidden;
display: inline-flex;
flex-direction: row;
transition: all 500ms ease;
}
.tri-state-toggle-button {
border-radius: 22px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
background-color: transparent;
border: 0px solid transparent;
margin: 2px;
color: white;
cursor: pointer;
/* -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out; */
transition: all 0.5s ease;
}
.tri-state-toggle-button.active {
background-image: linear-gradient(
90deg,
rgba(229, 3, 87, 1) 0%,
rgba(229, 3, 56, 1) 35%,
rgba(219, 101, 17, 1) 100%
);
border: 0px solid rgba(207,207,207,0.6);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.1);
color: white;
font-weight: 500;
transition: all .5s ease-in;
}
.tri-state-toggle-button:focus {
outline: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Select any one option:</h3>
<div class="tri-state-toggle">
<button class="tri-state-toggle-button" id="toggle-button1">
Song
</button>
<button class="tri-state-toggle-button" id="toggle-button2">
Video
</button>
<button class="tri-state-toggle-button" id="toggle-button3">
Party
</button>
</div>使用Bootstrap 5和JQuery:
$(document).on('click', '.switch-3', function(event) {
/* get switch slider */
let slider = $(this).find('.switch-3-slider');
/* get switch height */
let height = $(this).height();
/* get coord of click */
let clickPos = event.pageY - $(this).offset().top;
/* get 1/3 of switch height */
let heightThird1 = height / 3;
let heightThird2 = heightThird1 + height / 3;
if (clickPos > heightThird2) {
$(this).removeClass('switch-state-top');
$(this).removeClass('switch-state-center');
$(this).addClass('switch-state-bottom');
$(this).find('.switch-3-label').eq(2).find('.switch-3-radio').prop('checked', true);
} else if (clickPos > heightThird1 && clickPos <= heightThird2) {
$(this).removeClass('switch-state-top');
$(this).removeClass('switch-state-bottom');
$(this).addClass('switch-state-center');
$(this).find('.switch-3-label').eq(1).find('.switch-3-radio').prop('checked', true);
} else {
$(this).removeClass('switch-state-bottom');
$(this).removeClass('switch-state-center');
$(this).addClass('switch-state-top');
$(this).find('.switch-3-label').eq(0).find('.switch-3-radio').prop('checked', true);
}
});.switch-3 {
width: 3rem;
height: 7.5rem;
overflow: hidden;
}
.switch-3 .switch-3-slider {
width: 3rem;
height: 7.5rem;
left: 0;
right: 0;
transition: ease .4s all;
}
.switch-3 .switch-3-cover {
width: 3rem;
height: 2.5rem;
}
.switch-3 .switch-3-key {
width: 3rem;
height: 2.5rem;
background-color: rgba(0, 0, 0, .25);
}
.switch-3-label {
flex: 0 1 2.5rem;
}
.switch-3.switch-state-top .switch-3-slider {
bottom: 5rem;
}
.switch-3.switch-state-center .switch-3-slider {
bottom: 2.5rem;
}
.switch-3.switch-state-bottom .switch-3-slider {
bottom: 0rem;
}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="position-relative d-inline-block switch-3 switch-state-bottom" role="button">
<div class="h-100 w-100 d-flex flex-column flex-nowrap text-light bg-primary">
<label class="d-flex justify-content-center align-items-center switch-3-label">
<small>ON</small>
<input class="switch-3-radio" type="radio" value="on" />
</label>
<label class="d-flex justify-content-center align-items-center switch-3-label">
<small>N/A</small>
<input class="switch-3-radio" type="radio" value="na" />
</label>
<label class="d-flex justify-content-center align-items-center switch-3-label">
<small>OFF</small>
<input class="switch-3-radio" type="radio" value="off" checked />
</label>
</div>
<div class="position-absolute d-block switch-3-slider">
<span class="d-block bg-primary switch-3-cover"></span>
<span class="d-block bg-primary switch-3-cover"></span>
<span class="d-block switch-3-key"></span>
<span class="d-block bg-primary switch-3-cover"></span>
<span class="d-block bg-primary switch-3-cover"></span>
</div>
</div>我修改了一點@mustafa bagwala的回答，所以這是一個有三個狀態按鈕的相同例子，可以在兩個狀態按鈕之間設置，但可以在三個不同的顏色之間設置。
輸出可能是這樣的:
下面是CSS代碼和HTML代碼:
.switch-toggle input {
opacity: 0;
height: 25px;
position: absolute;
border-radius: 15px;
}
.switch-toggle input + label {
float: left;
color: #fff;
height: 25px;
font-size: 12px;
cursor: pointer;
}
.switch-toggle input[value="na"] + label {
pointer-events: none;
opacity: 0.5;
}
.switch-toggle input[value="na"]:checked + label {
background: grey;
}
.switch-toggle input[value="on"]:checked + label {
background: green;
}
.switch-toggle input[value="off"]:checked + label {
background: red
}<link rel="stylesheet" />
<div class="switch-toggle switch-3 switch-candy">
<input id="on" name="state-d" type="radio" value="on" />
<label for="on">ON</label>
<input id="na" name="state-d" type="radio" value="na" checked="checked" />
<label for="na">N/A</label>
<input id="off" name="state-d" type="radio" value="off" />
<label for="off">OFF</label>
<a></a>
</div>