Γεια σου ρε παιδιά, Ψάχνω για ένα ωραίο ελεγκτή τρι-κρατική πλαίσιο ελέγχου στο JS; Πήρε τίποτα να μου προτείνετε;
Τα κράτη Ψάχνω για είναι
- Τετραγωνισμένος
- Ανεξέλεγκτος
- Νικητής (ποτέ δεν ελέγχεται / επιλεγμένο)
Καλή Cross-browser tri-state πλαίσιο ελέγχου;
ψήφοι
0
6 απαντήσεις
ψήφοι 1
1
Χρησιμοποιήστε τα κουμπιά επιλογής.
<input type="radio" name="tristate" value="checked" />Checked
<input type="radio" name="tristate" value="unchecked" />Unchecked
Αν καμία περίπτωση τα ραδιόφωνα ενεργοποιημένη, τότε έχετε τρίτο «αδιάφορο» ή μηδενική κατάσταση σας.
ψήφοι 1
1
Μπορεί να θέλετε να εξετάσει EXTJS.
Έχουν μια μεγάλη κοινότητα που συχνά δημιουργεί τα πράγματα όπως αυτό και είμαι βέβαιος ότι αν στο google για ένα θα μπορούσε να καταλήξει. Στην πραγματικότητα εδώ μπορείτε να πάτε μπορείτε να είστε σε θέση να κάνετε μερικές αλλαγές σε αυτό και να πάμε στη δουλειά μας πώς θέλετε:
http://extjs.net/forum/showthread.php?t=28096
Η ελπίδα αυτό βοηθά!
ψήφοι 0
0
Αν χρειάζεστε περισσότερο από δύο κράτη, στη συνέχεια, χρησιμοποιήστε 3 κουμπιά επιλογής.
Μην υποθέσετε, αν ο χρήστης δεν επιλέξει τίποτα να σημαίνει το τρίτο κράτος. Τι θα συμβεί αν ο χρήστης χάσει το ερώτημα όλοι μαζί, ή χτύπησε υποβάλει κατά λάθος;
Αν θέλετε 3 καταστάσεις, τότε έχει 3 καταστάσεις!
ψήφοι 0
0
Χρησιμοποιήστε HTML5 στοιχεία απροσδιόριστο εισόδου .
ψήφοι 1
1
Έχω αναπτύξει αυτή τη λύση, ενώ εργαζόταν σε ένα έργο. Χρησιμοποιεί την απροσδιόριστη κατάσταση των πλαισίων ελέγχου (ένα χαρακτηριστικό που δεν μπορεί να προσεγγιστεί / οριστεί από σήμανση). Στο παράδειγμά μου, έχω μόνο ένα επίπεδο ένθεσης, αλλά μπορεί να είναι ένθετα επ 'αόριστον για να επιτρέψει για τις ομάδες και υπο-ομάδες να είναι un, όλα ή μερικά επιλεγμένα.
Η βασική δομή περιστρέφεται γύρω από το χειρισμό του απροσδιόριστο χαρακτηριστικό όπως αυτό:
<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>
Το χρησιμοποίησα για μια επίλεκτη-όλα εδώ στο παράδειγμά μου, αλλά θα μπορούσε να χρησιμοποιηθεί σε μόνο ένα άτομο πλαίσιο ελέγχου. Είναι σημαντικό να γνωρίζουμε ότι αυτό δεν επικοινωνούν κατάσταση σε μια μετα-πίσω στο διακομιστή. Ένα κουτάκι που δημοσιεύτηκε εξακολουθεί να είναι σωστό / λάθος, έτσι απροσδιόριστο επηρεάζει μόνο UI. Αν χρειαστεί να δημοσιεύσετε τιμές πίσω, θα πρέπει να συνδέσει την απροσδιόριστη κατάσταση σε κάποιο κρυφό πεδίο για να συνεχιστεί η τιμή.
Για περισσότερες πληροφορίες σχετικά με την απροσδιόριστη κατάσταση, δείτε τις ακόλουθες πηγές:
- http://css-tricks.com/indeterminate-checkboxes/
- http://www.w3.org/TR/html-markup/input.checkbox.html
Εδώ είναι ένα παράδειγμα εργασίας (εξωτερικά βιολί): http://jsfiddle.net/xDaevax/65wZt/
Παράδειγμα Εργασίας (Stack Απόσπασμα):
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>
ψήφοι 0
0
Έχω μια λύση, χρησιμοποιώντας ένα εγγενές πλαίσιο ελέγχου και το απροσδιόριστο ιδιοκτησίας και την αποθήκευση ένα προσαρμοσμένο χαρακτηριστικό στο πλαίσιο ελέγχου για να συλλάβει την τρέχουσα κατάσταση για να επιτευχθεί μια αποτελεσματική πλαίσιο ελέγχου τριπλή κατάσταση.
Η λύση αυτή έχει δοκιμαστεί και στις τελευταίες Chrome και Firefox και το χρώμιο (nw.js) για Linux και IE 11, Firefox και Chrome για Windohs.
Έχω δημοσιεύσει αυτή τη λύση για να JSFiddle .
Εδώ είναι η μονήρεις βοηθητικό πρόγραμμα που χρησιμοποίησα:
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"))
}
}
Χρήση:
- tscb $ .setState () χρησιμοποιείται για να προετοιμάσει ή να παρακάμψετε μια ρύθμιση για ένα κουτάκι
- tscb $ .toggleOnClick () χρησιμοποιείται όταν το στοιχείο κάνετε κλικ για να μεταβείτε στην επόμενη κατάσταση
- tscb $ .getState () είναι να ανακτήσετε την τρέχουσα κατάσταση
- tscb $ .getNextState () είναι να ανακτήσει η επόμενη κατάσταση
Η κατάπληξή του πόσο αποτελεσματική είναι ένα τριπλό πλαίσιο ελέγχου κατάσταση μπορεί να είναι στο να κρατήσει ένα μικρό UI, ενώ επιτρέπει την μοναδική λειτουργικότητα φιλτράρισμα. Του πολύ αποτελεσματικό για τη δυναμική φιλτράρισμα των αποτελεσμάτων αναζήτησης, όπου ένα φίλτρο μπορεί να είναι True / False / Off με ένα μόνο έλεγχο