C'è un plugin o un esempio di un cursore jquery lavorare con valori non equamente divisibili?

Question

Ho trovato due ottimi plugin jQuery per la generazione di un cursore per un modulo web, che degrada bene nei browser che non supportano JavaScript avere stili spento, ecc.

La prima è la versione Jquery.UI: http://ui.jquery.com/ Demos / cursore / # passi

Il secondo è un elemento di selezione a scorrimento: http://www.filamentgroup.com/lab/ update_jquery_ui_16_slider_from_a_select_element /

Comunque ho bisogno di creare un cursore che non si limita a dividere il cursore verso l'alto in parti uguali.

Per esempio diciamo che ho la seguente serie di numeri:

800,1000,1100,1200,1300,1400,1500

Mi piacerebbe il cursore per avere una bella grande divario tra 800 e 1000 le lacune e quindi minore tra 1100-1500

Quindi il cursore apparirebbe un po 'come questo:

800 ---- 1000--1100--1200--1300--1400--1500

Preferibilmente mi piacerebbe che a degradare a un menu a discesa, quindi la domanda è: Qualcuno sa di un plugin che supporta questo o ha qualche suggerimento da dare il modo migliore per raggiungere tale obiettivo, a personalizzare il plugin filamentgroup rotolare il mio etc.

Aggiornamento: stato hacking in giro con dispositivo di scorrimento del gruppo filamento e implementa le maniglie tramite cursore di JQuery UI comunque. Quindi sembra che modding JQuery.UI la sua auto è l'unica opzione disponibile. Scaveranno circa nel codice per vedere se riesco a trovare il bit requisito che ha bisogno di cambiare. Se nel frattempo qualcuno ha qualche idea !!!

Answer 1

Si potrebbe farlo utilizzando cursore jQuery agganciando in caso di scorrimento (in modo efficace l'override di esso) ... Qualcosa di simile a questo:

$(function() {
    var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100];
    var slider = $("#slider").slider({
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value));
            return false;
        }
    });
    function findNearest(includeLeft, includeRight, value) {
        var nearest = null;
        var diff = null;
        for (var i = 0; i < values.length; i++) {
            if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
                var newDiff = Math.abs(value - values[i]);
                if (diff == null || newDiff < diff) {
                    nearest = values[i];
                    diff = newDiff;
                }
            }
        }
        return nearest;
    }
});

Dovrebbe funzionare per ciò che si descrive ... ho provato per il trascinamento con il mouse e tramite i tasti sinistra / destra / home / fine (ovviamente avresti bisogno di cambiare la sinistra / destra per su / giù, se si vuole un cursore verticale).

Alcune note:

• Ovviamente l'array valori è tutte le misure che si desidera per i vostri scopi.
• Inoltre, ovviamente, il codice precedente presuppone un div con un id di "slider" per lavorare.
• Sarà probabilmente funziona strano se i valori min / max, non sono gli stessi vostri valori min / max per il cursore (vorrei suggerire solo usando "min: valori [0], max: valori [values.length - 1 ]" come min / max opzioni sul cursore e poi si dovrebbe sempre essere sicuri).
• Ovviamente questa opzione attualmente non degrada ad un elenco a discesa, ma sarebbe molto facile da fare ... semplicemente rendere le vostre scelte come una goccia normale tendina (lo stato di default in caso di javascript) e quindi usare jquery per nascondere l'elenco a discesa e anche creare l'array valori in base alle opzioni. Poi si può solo aggiornare la (nascosto) discesa, allo stesso tempo, come si aggiorna il cursore nel codice di cui sopra, in modo che quando i tuoi messaggi forma, il valore corretto saranno selezionati in discesa.

La speranza che aiuta.

Answer 2

In ES6 è possibile trovare il numero più vicino seguendo ..

function findClosest(array, value) {
  return array.sort( (a, b) => Math.abs(value - a) - Math.abs(value - b) )[0];
}

let array = [1, 5, 10, 28, 21];
let v = 4;
let number = findClosest(array, v); // -> 5