Comment utiliser plusieurs curseurs JQuery-UI en tant que filtres
-
12-12-2019 - |
Question
J'ai ce jsfiddle http://jsfiddle.net/danieltulp/gz5gn/
Ce que je veux faire est d'une liste non commandée sur les propriétés de données avec environ 6 curseurs.Mais pour mon développement, j'utilise juste deux
Première question: le curseur de qualité fonctionne très bien, mais lorsque je glisse le curseur de prix, il voit les variables Minp et Maxp en tant qu'objets, pourquoi?Comment puis-je résoudre ce problème?
Deuxième question: Mon code est maintenant PRIMTY Messy, je dois écrire du code spécifique à chaque filtre (c.-à-d .: Prix, qualité, etc.), comment puis-je simplifier / raccourcir mon code?
code de violon:
html
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>
<div class="demo">
price<br />
<div id="price"></div>
quality<br />
<div id="quality"></div>
<ul id="products">
<li data-price="10" data-quality="20"> product - £10 q20</li>
<li data-price="50" data-quality="40"> product - £50 q40</li>
<li data-price="100" data-quality="80"> product - £100 q80</li>
<li data-price="150" data-quality="30"> product - £150 q30</li>
<li data-price="200" data-quality="40"> product - £200 q40</li>
</ul>
</div>
JavaScript
function showProducts(minP, maxP, minQ, maxQ) {
$("#products li").filter(function() {
var price = parseInt($(this).data("price"), 10);
var quality = parseInt($(this).data("quality"), 10);
if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
$(this).show();
} else {
$(this).hide();
}
});
}
$(function() {
var options = {
range: true,
min: 0,
max: 250,
values: [0, 250],
slide: function(event, ui) {
if(event.target.id = "price"){
var minP = ui.values[0],
maxP = ui.values[1],
minQ = $("#quality").slider("values", 0),
maxQ = $("#quality").slider("values", 1);
}
if(event.target.id = "quality"){
var minP = $("#price").slider("values", 0),
maxP = $("#price").slider("values", 1),
minQ = ui.values[0],
maxQ = ui.values[1];
}
alert(minP +", "+ maxP +", "+ minQ +", "+ maxQ);
showProducts(minP, maxP, minQ, maxQ);
}
};
$("#price").slider(options);
$("#quality").slider(options);
});
EDIT: Le premier problème avec les variables MIN Max étant des objets est également sur le curseur de qualité si je déplace l'instruction IF de qualité supérieure à celle du prix.Les valeurs de prix sont alors correctes.Il semble donc s'agir d'un problème avec les instructions de si Slide Function.
La solution
Il apparaît qu'il y a un plug-in très pratique jquy appelé filter.js
Demo: http://jiren.github.com/filter.js/filterjs.HTML
Autres conseils
Il semble que la modification de l'événement de la diapositive au changement me permet d'utiliser
change: function(event, ui) {
var minP = $("#price").slider("values", 0);
var maxP = $("#price").slider("values", 1);
var minQ = $("#quality").slider("values", 0);
var maxQ = $("#quality").slider("values", 1);
showProducts(minP, maxP, minQ, maxQ);
}
Ce n'était pas possible avec l'événement diaporamique, car ces instructions ont ensuite pris les valeurs anciennes car l'événement de la diapositive est déclenché lors du glissement (testé sur iPad, je ne sais pas comment cela fonctionne avec la souris réelle) Voir http://jqueryui.com/demos/slider/#event-slide pour Plus d'infos
Travail Jsfiddle http://jsfiddle.net/danieltulp/gz5gn/42/
Maintenant, j'ai encore besoin de simplifier / raccourcir mon code
edit :
J'ai une idée de faire au moins de code plus clair
D'abord, je dois d'abord déterminer si le slidervalue a augmenté ou diminué, je peux alors filtrer uniquement pour afficher ou que des éléments de liste masqués à la masque ou montrent
Cela permet d'effectuer uniquement des éléments de liste déjà filtrés, donc je n'ai pas besoin de les cacher à nouveau comme je faisais dans mon code précédent
Mais mon jsfiddle rompt sur quelque chose dans mon code mais je ne peux pas l'étranger, aucune idée? http://jsfiddle.net/danieltulp/4uf3e/4/