Hej chłopaki, szukam miłej tri-state kontrolera wyboru w JS? Masz coś do mnie polecić?
Stany szukam są
- Sprawdzone
- Niepowstrzymany
- Obojętny (nigdy nie był sprawdzany / niezaznaczone)
Dobry Cross-browser wyboru tri-state?
głosy
0
6 odpowiedzi
głosy 1
1
Użyj przycisków radiowych.
<input type="radio" name="tristate" value="checked" />Checked
<input type="radio" name="tristate" value="unchecked" />Unchecked
Jeśli żadna czy radiotelefony są włączone, wtedy masz swój trzeci „obojętny” lub stan zerowy.
głosy 1
1
Można zajrzeć do ExtJS.
Mają wielkie społeczności, które często buduje takie rzeczy i jestem pewien, że jeśli google dla jednego może to wymyślić. Właściwie tutaj idziesz może być w stanie dokonać kilku zmian w tym i zmusić go do pracy, jak chcesz:
http://extjs.net/forum/showthread.php?t=28096
Mam nadzieję że to pomoże!
głosy 0
0
Jeśli potrzebujesz więcej niż dwa stany, a następnie użyć 3 przyciski radiowe.
Nie należy zakładać, jeśli użytkownik nie wybierze nic znaczyć państwa trzeciego. Co zrobić, jeśli użytkownik nie wykorzystuje pytanie wszyscy razem, lub uderzyć przedstawienia przez pomyłkę?
Jeśli chcesz 3 stany, a następnie mieć 3 stany!
głosy 0
0
głosy 1
1
I to rozwiązanie opracowane podczas pracy nad projektem. Używa nieokreślony stan wyboru (atrybut, który nie może być dostępna / set od znaczników). W moim przykładzie, mam tylko jeden poziom zagnieżdżenia ale może być zagnieżdżona w nieskończoność, aby umożliwić grup i podgrup być un, wszystkie lub wybrane części.
Podstawowa struktura obraca się wokół manipulacji nieokreślony atrybut tak:
<input type="checkbox" value="HasFavoriteColor" name="FavoriteColor" id="myCheckBox" />
<input type="hidden" id="FavoriteColorState" name="FavoriteColorState" /><!-- potential values: 0, 1, -1 -->
<script type="text/javascript">
//using JQuery
$("#myCheckBox").prop("indeterminate", true);
//using pure javascript
document.getElementById("myCheckBox").setAttribute("indeterminate", true);
</script>
Używałem go przez select-wszystko tutaj, w moim przykładzie, ale może być stosowany tylko indywidualnego wyboru. Ważne jest, aby wiedzieć, że to nie stanie komunikować się w post-powrotem do serwera. Pole wyboru jest wysłana nadal jest prawda / fałsz tak nieokreślone tylko wpływa UI. Jeśli trzeba dodawać wartości z powrotem, trzeba będzie powiązać stan nieokreślony w jakimś ukrytym polu, aby utrzymywać wartość.
Więcej informacji na temat stanu nieokreślony, zobacz następujące zasoby:
- http://css-tricks.com/indeterminate-checkboxes/
- http://www.w3.org/TR/html-markup/input.checkbox.html
Oto przykład roboczych (zewnętrzny skrzypce): http://jsfiddle.net/xDaevax/65wZt/
Przykład roboczy (Stos Fragment)
var root = this;
root.selectedCount = 0;
root.totalCount = 0;
root.percentageSelected = 0.0;
root.holdTimer = 0;
jQuery.fn.customSelect = {
State: 0,
NextState: function () {
this.State += 1;
if (this.State > 2) {
this.State = 0;
} // end if
} // end object
};
function checkAllToggle(parent, toggle) {
if (parent != null && parent != undefined) {
parent.find("input[type='checkbox']").prop("checked", toggle);
for (var i = 0; i < parent.find("input[type='checkbox']").length; i++) {
$(document).trigger("item-selected", {
IsSelected: $(parent.find("input[type='checkbox']")[i]).prop("checked")
});
} // end for loop
} // end if
} // end function checkAll
var fadeTimer = setInterval(function () {
if (root.holdTimer > 0) {
root.holdTimer -= 1;
} else {
root.holdTimer = -2;
} // end if/else
if (root.holdTimer == -2) {
$(".options-status").fadeOut("easeOutBack");
root.holdTimer = -1;
} // end if/else
}, 50);
$(function () {
root.totalCount = $(document).find(".options-list input[type='checkbox']").length;
$(document).bind("select-state-change", function (e, data) {
switch (data.State) {
case 0:
data.Target.prop("checked", false);
data.Target.prop("indeterminate", false);
checkAllToggle($(".options-list"), false);
break;
case 1:
data.Target.prop("indeterminate", true);
e.preventDefault();
break;
case 2:
data.Target.prop("checked", true);
data.Target.prop("indeterminate", false);
checkAllToggle($(".options-list"), true);
break;
}
});
$(document).bind("item-selected", function (e, data) {
root.holdTimer = 50;
if (data != null && data != undefined) {
if (data.IsSelected) {
root.selectedCount += 1;
} else {
root.selectedCount -= 1;
} // end if/else
if (root.selectedCount > root.totalCount) {
root.selectedCount = root.totalCount;
} // end if
if (root.selectedCount < 0) {
root.selectedCount = 0;
} // end if
root.percentageSelected = (100 * (root.selectedCount / root.totalCount));
root.percentageSelected < 50 && root.percentageSelected >= 0 ? $(".options-status").removeClass("finally-there").removeClass("almost-there").addClass("not-there", 200) : false;
root.percentageSelected < 100 && root.percentageSelected >= 50 ? $(".options-status").removeClass("not-there").removeClass("finally-there").addClass("almost-there", 200) : false;
root.percentageSelected == 100 ? $(".options-status").removeClass("not-there").removeClass("almost-there").addClass("finally-there", 200) : false;
$(".options-status .output").text(root.percentageSelected + "%");
setTimeout(function () {
$(".options-status").fadeIn("easeInBack");
}, 100);
} // end if
});
$("#select-all").click(function (e) {
var checkbox = $(this);
if (checkbox.prop("checked") == true) {
checkbox.customSelect.State = 2;
} else {
checkbox.customSelect.State = 0;
} // end if/else
$(document).trigger("select-state-change", {
State: checkbox.customSelect.State,
Target: $("#select-all")
});
});
$("input[name='options']").each(function () {
$(this).click(function () {
if ($(this).prop("checked") == true) {
$(document).trigger("item-selected", {
IsSelected: true
});
if ($(this).parent().parent().find("input[type='checkbox']:checked").length == $(this).parent().parent().find("input[type='checkbox']").length) {
$(document).trigger("select-state-change", {
State: 2,
Target: $("#select-all")
});
} else {
$(document).trigger("select-state-change", {
State: 1,
Target: $("#select-all")
});
} // end if/else
} else {
$(document).trigger("item-selected", {
IsSelected: false
});
if ($(this).parent().parent().find("input[type='checkbox']:checked").length <= 0) {
$(document).trigger("select-state-change", {
State: 0,
Target: $("#select-all")
});
} else {
$(document).trigger("select-state-change", {
State: 1,
Target: $("#select-all")
});
} // end if/else
} // end if/else
});
});
});body {
font-family: Helvetica, Verdana, Sans-Serif;
font-size: small;
color: #232323;
background-color: #efefef;
padding: 0px;
margin: 0px;
}
H1 {
margin-top: 2px;
text-align: center;
}
LEGEND {
margin-bottom: 6px;
}
.content-wrapper {
padding: 2px;
margin: 3px auto;
width: 100%;
max-width: 500px;
min-width: 250px;
}
.wrapper {
padding: 3px;
margin: 2px;
}
.container {
border-right: solid 1px #788967;
border-bottom: solid 1px #677867;
border-top: solid 1px #89ab89;
border-left: solid 1px #89ab89;
}
.rounded {
border-radius: 2px;
}
.contents {
background: linear-gradient(rgba(255, 255, 255, 1), rgba(180, 180, 180, .2));
}
.header {
padding: 4px;
border: solid 1px #000000;
background-color: rgba(200, 200, 230, .8);
font-size: 123%;
background-image: linear-gradient(rgba(220, 220, 255, .8), rgba(200, 200, 230, .8));
}
#options-chooser {
margin-top: 30px;
display: block;
}
#options-chooser .options-list > LABEL {
display: table-row;
height: 26px;
}
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.black {
color: black;
}
.options-status {
float: right;
right: 3%;
clear: both;
display: none;
margin-top: -20px;
}
.output {
font-weight: bold;
}
.not-there {
border-color: rgba(190, 190, 190, .3);
background-color: rgba(190, 190, 190, .1);
}
.almost-there {
border-color: rgba(220, 220, 50, .6);
background-color: rgba(220, 220, 50, .3);
}
.finally-there {
border-color: rgba(50, 190, 50, .3);
background-color: rgba(50, 190, 50, .1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<div class="content-wrapper">
<div class="wrapper container rounded">
<div class="contents">
<h1 class="header rounded">Partial Select All Example</h1>
<p>This example demonstrates how to implement a tri-state checkbox with options.</p>
<form name="options-chooser" id="options-chooser" method="post">
<fieldset class="rounded options">
<legend class="rounded header">Options
<input type="checkbox" value="options-all" name="selectAll" id="select-all" title="Select All" />
</legend> <span class="options-status rounded container wrapper">Items Selected: <span class="output"></span></span>
<div class="options-list">
<label class="blue">
<input type="checkbox" name="options" value="1" />Blue</label>
<label class="green">
<input type="checkbox" name="options" value="2" />Green</label>
<label class="red">
<input type="checkbox" name="options" value="3" />Red</label>
<label class="black">
<input type="checkbox" name="options" value="4" />Black</label>
</div>
</fieldset>
</form>
</div>
</div>
</div>
głosy 0
0
Mam rozwiązanie, używając rodzimego wyboru i właściwość nieokreślony i przechowywania atrybut niestandardowy w polu wyboru, aby uchwycić aktualny stan osiągnąć skuteczną potrójne wyboru państwa.
Rozwiązanie to dobrze przetestowane na najnowszym Chrome i Firefox i chromu (nw.js) w środowisku Linux i IE 11, Firefox i Chrome na Windohs.
Pisałem to rozwiązanie JSFiddle .
Oto Singleton narzędzie użyłem:
tscb$ = {
STATE_UNCHECKED: 0
,STATE_CHECKED: 1
,STATE_INDETER: 2
,setState: function(o,iState){
var t=this;
if(iState==t.STATE_UNCHECKED){
o.indeterminate=false; o.checked=false;
} else if(iState==t.STATE_CHECKED){
o.indeterminate=false; o.checked=true;
} else if(iState==t.STATE_INDETER){
o.checked=false; o.indeterminate=true;
} else {
throw new Error("Invalid state passed: `"+iState+"`")
}
o.setAttribute("tscbState", iState);
}
// Event to call when the cb is clicked to toggle setting.
,toggleOnClick: function(o){
var t=this, iNextState=t.getNextState(o)
if(iNextState==t.STATE_UNCHECKED){
o.checked=false;
} else if(iNextState==t.STATE_CHECKED){
o.checked=true;
} else if(iNextState==t.STATE_INDETER){
o.indeterminate=true;
}
o.setAttribute("tscbState", iNextState);
}
// For retrieval of next state
,getNextState: function(o){
var t=this, iState=t.getState(o)
if(iState==t.STATE_UNCHECKED){
return t.STATE_INDETER;
} else if(iState==t.STATE_CHECKED){
return t.STATE_UNCHECKED;
} else if(iState==t.STATE_INDETER){
return t.STATE_CHECKED;
}
}
,getState: function(o){
return parseInt(o.getAttribute("tscbState"))
}
}
Stosowanie:
- tscb $ .setState () służy do zainicjowania lub nadpisać ustawienia dla wyboru
- tscb $ .toggleOnClick () jest używana, gdy element zostanie kliknięty, aby przełączyć się do następnego stanu
- tscb $ .getState () jest, aby pobrać aktualny stan
- tscb $ .getNextState () jest, aby pobrać następny stan
Jego niesamowite, jak skuteczne potrójne pole państwo może być na utrzymaniu Compact UI, pozwalając jednocześnie na unikalnej funkcji filtrowania. Jest bardzo skuteczny do dynamicznego filtrowania wyników wyszukiwania gdzie filtr może być Prawda / Fałsz / wyłączanie za pomocą jednego kontrolą