Hei baieti, caut un frumos controler casetă de selectare tri-stat în JS? Ai ceva să-mi recomande?
Stările pe care le caut sunt
- verificat
- necontenit
- Indiferent (nu a fost niciodată verificate / nebifată)
Bună cross-browser-tri caseta de selectare de stat?
voturi
0
Întrebat 29/07/2009 la 22:16 2009-07-29 22:16
sursa de către utilizator Yarin Miran
În alte limbi...
sursa de către utilizator Yarin Miran
În alte limbi...
6 răspunsuri
voturi 1
1
Utilizați butoane radio.
<input type="radio" name="tristate" value="checked" />Checked
<input type="radio" name="tristate" value="unchecked" />Unchecked
Dacă nici unul dacă radiourile sunt pornite, atunci ai treia sau starea ta nulă „indiferent“.
voturi 1
1
Este posibil să doriți să se uite în ExtJS.
Ei au o mare comunitate, care se bazează de multe ori lucruri de genul asta și eu sunt sigur dacă googled unul s-ar putea veni. De fapt, aici te duci s-ar putea fi capabil de a face câteva modificări și acest lucru face să funcționeze cum doriți:
http://extjs.net/forum/showthread.php?t=28096
Sper că acest lucru vă ajută!
voturi 0
0
Dacă aveți nevoie de mai mult de două stări, apoi utilizați 3 butoane radio.
Nu presupuneți dacă utilizatorul nu a selectat nimic înseamnă a treia stare. Ce se întâmplă dacă utilizatorul a ratat întrebarea toate împreună, sau lovit depune din greșeală?
Dacă doriți 3 state, apoi au 3 state!
voturi 0
0
Utilizați HTML5 elemente de intrare nedeterminată .
voturi 1
1
Am dezvoltat această soluție în timp ce lucrează la un proiect. Se folosește starea nedeterminat a checkbox (un atribut care nu pot fi accesate / set de marcare). În exemplul meu, am doar un singur nivel de imbricare, dar poate fi imbricate pe termen nelimitat pentru a permite grupurilor și subgrupurilor să fie ONU, toate, sau parțial selectate.
Structura de bază se învârte în jurul manipularea atributului nedeterminat ca aceasta:
<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>
Am folosit-o pentru un select tot aici, în exemplul meu, dar poate fi folosit doar pe o casetă de selectare individuală. Este important de știut că acest lucru nu comunică de stat într-un post-înapoi la server. O casetă de selectare fiind postat este încă adevărat / fals astfel încât nedeterminat afectează numai UI. Dacă aveți nevoie pentru a posta valori înapoi, va trebui să lega starea nedeterminată la unele câmp ascuns să persiste valoarea.
Pentru mai multe detalii cu privire la starea nedeterminat, consultați următoarele resurse:
- http://css-tricks.com/indeterminate-checkboxes/
- http://www.w3.org/TR/html-markup/input.checkbox.html
Aici este un exemplu de lucru (scripca extern): http://jsfiddle.net/xDaevax/65wZt/
Exemplu de lucru (stiva 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>
voturi 0
0
Am o soluție folosind o casetă de selectare nativ, iar proprietatea nedeterminată și stocarea unui atribut personalizat în caseta de selectare pentru a capta starea curentă pentru a realiza o casetă de selectare eficientă stare triplă.
Această soluție a testat bine pe cele mai recente Chrome și Firefox și crom (nw.js) pe Linux și IE 11, Firefox și Chrome pe Windohs.
Am postat această soluție la JSFiddle .
Aici este Singleton de utilitate am folosit:
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"))
}
}
utilizare:
- tscb $ .setState () este folosit pentru a inițializa sau suprascrie o setare pentru o casetă de selectare
- tscb $ .toggleOnClick () este utilizat atunci când elementul este apăsat pentru a comuta la starea următoare
- tscb $ .getState () este de a prelua starea actuală
- tscb $ .getNextState () este de a prelua starea următoare
Uimitor cât de eficient o casetă de selectare triplă de stat poate fi la menținerea unui compact UI permițând în același timp pentru funcționalitate unică de filtrare. Este foarte eficient pentru filtrarea dinamic rezultat de căutare în cazul în care un filtru poate fi adevărat / fals / Off doar cu un singur control al