Hey çocuklar, ben JS güzel üç-durumlu onay kutusu kontrolörü arıyorum? Bana tavsiye etmek şeyin var mı?
Ben arıyorum devletler vardır
- Kontrol
- kontrolsüz
- İlgisiz (asla kontrol oldu / kontrolsüz)
İyi Çapraz tarayıcı tri-devlet onay kutusu?
oy
0
6 cevaplar
oy 1
1
radyo düğmelerini kullanın.
<input type="radio" name="tristate" value="checked" />Checked
<input type="radio" name="tristate" value="unchecked" />Unchecked
hiçbiri radyolar açıksa, o zaman üçüncü "kayıtsız" veya boş devlet var.
oy 1
1
Sen extjs içine bakmak isteyebilirsiniz.
Genellikle bu gibi şeyler inşa büyük bir topluluk var ve ben bunu yukarı gelebileceğini biri için googled eğer eminim. Aslında burada istediğiniz nasıl çalışmak için bu birkaç değişiklik yapmak ve bunu elde etmek mümkün olabilir gidin:
http://extjs.net/forum/showthread.php?t=28096
Bu yardımcı olur umarım!
oy 0
0
İkiden fazla devletleri gerekiyorsa, o zaman 3 radyo düğmelerini kullanın.
Kullanıcıların, üçüncü hali ifade şey seçmediyseniz düşünmeyin. Kullanıcı hep birlikte soruyu cevapsız veya yanlışlıkla teslim vurmak ne olur?
Eğer 3 durumlarını isterseniz, o zaman 3 devletler var!
oy 0
0
Kullanım HTML5 belirsiz giriş öğeleri .
oy 1
1
Bir proje üzerinde çalışırken bu çözüm geliştirdi. Bu onay kutuları belirsiz durum (belirteç ayarlanabilir erişilemeyen bir özellik /) kullanır. Benim örnekte, yuvalama sadece bir seviyesine sahip ama tüm, un olmak grupları ve alt grupları için izin süresiz iç içe, ya da kısmen seçilebilir.
Temel yapısı böyle belirsiz niteliği manipüle etrafında döner:
<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>
Benim örnekte burada-tüm seçme için kullandı, ama sadece bireysel bir onay kutusunu kullanılabilir. Bu sunucuya bir post-arka devlet iletişim ETMEZ olduğunu bilmek önemlidir. yayınlanmadan bir onay kutusu yalnızca UI etkiler hala çok belirsiz doğru / yanlış olduğunu. Geri değerleri sonrası ihtiyaç varsa, değerini devam etmek bazı gizli alanına belirsiz durumunu kravat zorunda kalacaktır.
belirsiz durumuna daha fazla bilgi için aşağıdaki kaynaklara bakın:
- http://css-tricks.com/indeterminate-checkboxes/
- http://www.w3.org/TR/html-markup/input.checkbox.html
İşte çalışma örneği (dış keman) 'dir: http://jsfiddle.net/xDaevax/65wZt/
Çalışma Örneği (Stack Parçacığı):
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>
oy 0
0
Bir çözüm, doğal kutusunu ve belirsiz özelliğini kullanarak ve etkili bir üçlü durum onay elde etmek için, mevcut durumunu yakalamak için onay kutusunun özel bir özelliği saklama sahiptir.
Bu çözüm Windohs üzerinde Linux ve IE 11, Firefox ve Chrome üzerinde son Chrome ve Firefox ve krom (nw.js) üzerine iyi test etti.
Ben bu çözümü attılar JSFiddle .
İşte kullanılan yardımcı program tekil geçerli:
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"))
}
}
Kullanımı:
- tscb $ .setState () başlatmak veya bir onay kutusu için bir ayar geçersiz kılmak için kullanılır
- eleman tıklandığında tscb $ .toggleOnClick () sonraki duruma geçiş yapmak için kullanılır
- tscb $ .getState () mevcut durumunu almak için
- tscb $ .getNextState () sonraki durumunu almasına olduğunu
eşsiz filtreleme işlevi için izin verirken üçlü devlet onay kutusu, bir kullanıcı arayüzü kompakt tutmak ne kadar etkili olabileceğini Onun şaşırtıcı. Onun dinamik arama sonucu filtreleme için çok etkili bir filtre sadece bir kumanda ile Kapalı / Doğru / Yanlış olabilir nerede