Mootools Slider con due pomelli (doppio cursore Pinned) con indicatore di Gamma
Stai visualizzando i commenti. Se volete tornare alla storia completa, è possibile leggere il testo completo qui: " Slider Mootools con due manopole (doppio cursore Pinned) con indicatore di Campo ".
11 dicembre 2008 alle 10:59 am
Very cool! Sono stato alla ricerca di qualcosa di simile. E 'possibile avere una immagine di sfondo fissa clip grondaia che invece di spostarsi da sinistra a destra? Sto cercando di lavorare su questo ora e hanno finora avuto successo.
12 Dicembre 2008 alle 3:45 am
E 'bel pensiero! Grazie! Mai pensato. Io lo prova!
12 dicembre 2008 alle 05:12 am
Hey wanlee!
Penso che potrei ottenuto (o sono atleast vicino) la soluzione che stavate cercando. Ho cambiato il Look (fatto con un gradiente di spettro, piuttosto che singolo colore) del bkg_slider.gif, quindi assicuratevi solo che l'immagine è in realtà sempre ritagliato. Questa immagine, che è stato in precedenza l'immagine di sfondo per la divisione indicatore di scorrimento gamma, è ora inserito nel codice HTML, assolutamente posizionato con il contenitore cursore.
Ho inviato i miei file di lavoro di questa versione qui ...
Il codice / css della versione precedente è solo commentare, gli utenti siano in grado di fare la differenza.
Inoltre, ho lasciato un bordo rosso dell'immagine così ... che si può rimuovere!
Speranza che aiuta!
12 Dicembre 2008 alle 5:31 am
Solo un Pro e Contro della versione suggessted da wanlee ...
PRO: Ora è possibile variare immagine, che può indicare con la sua gamma di colori troppo ... Quello che voglio dire è per es. si potrebbe avere un'immagine con verde, arancione e rosso ares, quindi l'intervallo selezionato indiate la natura della gamma selezionata.
CON: L'immagine cursore è mostrato con tutta la sua larghezza, finché lo script completo viene caricato ed eseguito
12 dicembre 2008 alle 17:32
ah sì ... fantastico! molto fresco, Nikhil! Io in realtà ho una versione funzionante come pure, ma credo che il vostro potrebbe essere un po 'più efficiente.
Ecco un altro consiglio: E 'possibile avere le manopole testa a testa contro l'altra, invece di crossing over?
Ottimo lavoro, Nikhil! Kudos!
16 Dicembre 2008 alle 2:09 am
Siamo riusciti a fissare il cross-over delle due manopole ... aggiornato il file, segui il link nel mio commento di cui sopra.
18 dicembre 2008 alle 10:47
Nikhil hey! bello lavorare di nuovo! ho notato che il minKnob attraversa ancora finita, ma solo la prima boccata. dopo il trascinamento viene inizializzato siamo tutti buoni! ha lo stesso successo?
19 Dic 2008 alle 09:48
Hi wanlee!
C'è questo problema nella versione, come lei ha ricordato, sulla prima diapositiva della manopola min. Mi sembra di sapere dove sta il problema, ma Havn't stato fix in grado da ieri ... speriamo di rompere al più presto.
Tonnellate Grazie per aver ricordato il problema fuori!
Nik
19 Dic 2008 alle 11:37
Hey wanlee!
Lavorare nelle prime ore del mattino su tali questioni funziona davvero ... sono riusciti a risolvere il problema (della manopola Min attraversando la manopola di Max, la prima volta) questa mattina ... ho già caricato lo script fisso slider.js come versione 2.1
Anche in questo caso! Grazie per il vostro aiuto è spotting e modifiche e suggerimenti.
Nik
11 gen 2009 alle 20:27
Ciao Nik! State cercando il vostro cursore e funziona benissimo, ma check this out:
Ho provato a installare il parametro 'start' a 5 e param 'fine' a 15 e rende il traballante clipping. Inoltre, entrambi i cursori finiscono con lo stesso valore. Ecco qualcosa che sarebbe bello: invece dei cursori attestatura insieme, hanno la fermata cursore al massimo il prossimo numero maggiore del dispositivo di scorrimento min.
Inoltre, come posso attivare snapping?
14 gennaio 2009 alle 21:40
Hey wanlee!
Grazie come al solito. Si stanno svolgendo un lavoro di prova, che avrei dovuto. Davvero appretiate.
Conosci occupato e sarà per qualche giorno, con un progetto. Risponderemo il più presto possibile.
Grazie ancora
Nik
4 febbraio 2009 alle 01:42
Hi Nikhil, potreste dirmi quale linea si fissa il cross-over delle due manopole o magari quali linee stanno facendo.
6 febbraio 2009 alle 11:42 am
Disclaimer: Non sono un esperto di sviluppo MooTools ancora, in modo purtroppo sarò uno di quei ragazzi che sta per dare suggerimenti che non riesco a se stesso implementare. Si prega di tenere a mente questo non è nemmeno una "richiesta di funzionalità", perché non mi aspetto nessuno di fare questo per me. Voglio solo documentare che esiste un interesse in ulteriori aggiunte.
Voglio utilizzare questo doppio cursore per selezionare un intervallo di tempo.
La prima caratteristica in più mi piacerebbe avere è quello di urtare i cursori in 15 minuti "passi". Invece di essere in grado di scorrere attraverso 1, 2, 3, ..., 14, 15 voglio andare a 0, 15, 30, 45, 60, ..., ecc C'è un modo per ottenere il dispositivo di scorrimento per scattare a questi incrementi? (Mi rendo conto che potrei usare un moltiplicatore sul valore di uscita di manopole della bilancia, ma un singolo pixel per ogni "step" è troppo a grana fine. Voglio grandi e bei 10 pixel "salti" tra i vari passaggi della scala.)
In secondo luogo, mi piacerebbe essere in grado di trascinare la stessa gamma. Mantenere la distanza tra le manopole lo stesso, ma prendete la "parte centrale" e farlo scorrere avanti e indietro lungo la scala. Questo è probabilmente molto più complicato da realizzare, ma l'uomo sarei entusiasta di avere questa.
Comunque, grazie per l'attuazione impressionante che avete già fornito!
8 Febbraio 2009 alle 6:07 am
Hey Mauricio,
Im controllando la sovrapposizione maily nella funzione CheckStep della Classe Silder (che deve essere attorno alla riga 174)
Il limite minimo della manopola è impostato in "this.drag.options.limit" e allo stesso modo il limite per manopola Max in "this.maxdrag.options.limit" ....
Inoltre, ho avuto un problema con il overlaping ancora accadendo la prima volta (cioè fino a quando la funzione viene chiamata CheckStep atleast una volta.) Così ho dovuto fare aggiungere un controllo per vedere se il cursore viene initialied, e di fare la seguente funzione "SetMax" (arounf linea 138 nelle silder.js)
-------
se (this.options.isinit) {
var lim = {}; var mi, mx;
mi = - this.options.offset;
mx = parseInt (this.maxknob.getStyle ('left')) - this.options.offset-4;
lim [this.z] = [mi, mx];
this.drag.options.limit = lim;
this.options.isinit = false;
}
---------
12 Febbraio 2009 alle 5:13 am
Nikhil lavoro fantastico! Mi piace.
Per i problemi con l'ultima versione Mootools, è possibile modificare il javascript (nella pagina HTML del demo) come segue:
Avrete bisogno di scaricare entrambe le versioni MooTools (core & more).
/ / ON LOAD
window.addEvent ('domready', function () {
var = new mySlideA Slider ($ ('slider_minmax_gutter_m'), $ ('slider_minmax_minKnobA'), $ ('slider_bkg_img'), {
inizio: 1920, fine: 2020, offset: 10, knobheight: 20,
onChange: function (pos) {$ ('slider_minmax_min') set ('testo', 'min' + pos.minpos); $ ('slider_minmax_max') set ('testo', 'max' + pos.maxpos).. ;}
..}, $ ('Slider_minmax_maxKnobA')) setMin (1981) setMax (2002);
var = new mySlideB Slider ($ ('slider_gutter_1'), $ ('slider_knob_1'), $ ('slider_bkg_img_1'), {
start: 0,
fine: 120,
offset: 10,
onChange: function (pos) {
$ ('Slider_current_val') set ('text', pos + dei pollici ").;
}
.}, Null) setMin (100);
$ ('Slider_current_val') set ('text', 100 + dei pollici ").;
});
12 Febbraio 2009 alle 01:29
[...] Alla fine ho cambiato la mia parola chiave di ricerca per "slider con due manopole" e ho trovato "slider Mootools con due manopole", scritto da Nikhil D. Kunder chi possiede un blog dal nome "Esprimere IT". Questo [...]
14 febbraio 2009 alle 06:29 am
Brian,
, In modo che ha la priorità.
Sorry! avrebbe dovuto rispondere prima. Io sto già lavorando alla Extra Frist (la funzione di scatto) ... stato coinvolto con pane e burro progetto
Sarà lavorare su questo, non appena, ricevo ogni poco tempo ...
Inoltre, Im ancora non ben chiara la tua Extra secondo! ...
14 febbraio 2009 alle 23:03
Brian,
Devo dire che questo (il passaggio scorrevole sembra essere un pensiero dado, anche se ho visto altri cursori che hanno questa caratteristica). Mi sono seduto con questo ieri sera e ha finito per tirare i capelli sopra tutta la notte. La logica sembra abbastanza facile e sono riuscito a comprendere abbastanza facilmente. Ma visivamente, sembra sfidare e mi sembrava di non riuscire ancora male.
Bene! Ho pensato, mi potrebbe aiutare se posso pubblicare i miei file WIP, forse (e chiunque altro) può risolvere il problema ... mi sembra di sorta di lost ... io guardo di nuovo presto ... ma intanto, ecco la mia versione di lavoro,
Scarica Slider Mootools con cursore scorrevole Steps
oh! dimenticato di menzionare la questione ...
Il cursore non sembra muoversi fino alla fine del cursore .... provare a spostare al suo valore massimo ....
17 febbraio, 2009 alle 3:23 am
[...] La maggior parte degli scrittori CSS sarebbe d'accordo che la proprietà Clip CSS è probabilmente una delle più inutilizzato proprietà CSS. E 'stato così vero anche per me ed è stato più felice di trascurare, fino a quando ho iniziato a modificare il MooTools due pomelli (Pin) Component Slider (con indicatore Range). [...]
17 febbraio, 2009 alle 5:36 am
[...] Egli ha deciso di creare la sua propria Mootools Slider con due manopole (doppio cursore Pinned) con indicatore Range. Si può facilmente cambiare il look and feel della gamma dell'indicatore, manopola slider, la traccia di scorrimento da [...]
17 febbraio, 2009 alle 12:48 pm
[...] Egli ha deciso di creare la sua propria Mootools Slider con due manopole (doppio cursore Pinned) con indicatore Range. Si può facilmente cambiare il look and feel della gamma dell'indicatore, manopola slider, la traccia di scorrimento da [...]
17 febbraio, 2009 alle 21:40
Brian,
Sorry! Avrei detto .. che il cambiamento passi per diapositive sono inclusi nella versione 2.20 (purtroppo, ancora nel suo stato WIP, è stato molto difficile mantenere le versioni) ... in modo da poter scaricare il nuovo verywell (2.2) versione invece della versione WIP che ho indicato sopra ...
Thanx
Nik
22 febbraio 2009 alle 03:13
[...] RSS feed per gli aggiornamenti su questo topic.Powered da WP Greet BoxA molto maneggevole e il cursore bella Nikhil, mentre era alla ricerca di un doppio cursore bloccato. Anche se, ha fatto trovare un doppio alcune ben fatto [...]
8 marzo 2009 alle 15:01
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
8 marzo 2009 alle 11:31
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
9 Marzo 2009 alle 01:56 am
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
9 Marzo 2009 alle 1:57 am
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
9 Marzo 2009 alle 7:02 am
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
9 Marzo 2009 alle 10:57 am
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
9 Marzo 2009 alle 02:32
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
17 marzo 2009 alle 06:56 am
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
26 Marzo, 2009 alle 12:38
[...] MooTools Slider con due manopole [...]
28 Marzo 2009 alle 3:41 am
Ciao uomo,
luogo grande e ottimo lavoro ... penso che i ll usarlo per una personalizzazione della mia moogenda ( http://www.moonkiki.com/moongenda/moogenda.html ) ..
I ll aggiungerlo in una forma in cui si può impostare il tempo ellapsed in una riunione ... ma prima ho una domanda
che è possibile impostare l'oggetto per avere il numero decimale
qualcosa di simile
8
8,5
9
9,5
10
10,5
e così via?
thx
Nunzio
31 marzo 2009 alle 01:25
Ciao Nunzio,
Il componente cursore stesso non in grado di elaborare misure di diapositive decimali ... ma per le vostre esigenze, tutto ciò che serve è quello di visualizzare i valori decimali (ed elaborarli come richiesto in seguito) ... quindi cosa si può fare è il seguente ...
var = new mySlideC Slider ($ ('slider_gutter_C'), $ ('slider_knob_C'), $ ('slider_bkg_img_C'), {
inizio: 1,
fine: 100,
offset: 0,
scatto: true,
numsteps: 100,
onChange: function (pos) {
$ ('Slider_current_val_2') setHTML (pos / 2 + dei pollici. ');
}
.}, Null) setMin (5);
NOTA: se si voleva mostrare il dispositivo di scorrimento per una serie di 1-50 con valori come la metà (1,5, 2, 2.5, 3 e così via) è possibile impostare l'intervallo per 1-100, numsteps fissati a 100 e visualizzarli in frazione come $ ('slider_current_val_2') setHTML (pos / 2 + dei pollici. ');
Spero che questo aiuti!
31 marzo 2009 alle 01:32
Ciao Nik,
si ri grande .. questa sera proverò e vi farò vedere quello che farò
Grazie ancora
Nunzio
31 marzo 2009 alle 01:36
31 marzo 2009 alle 01:37
post precedente è stato un errore di taglia e incolla
questo è giusto
http://moonkiki.blogspot.com/2009/03/knob-in-moogenda.html
31 Marzo 2009 alle 3:30 pm
Ciao Nunzio,
Quello è un onore! Tons Grazie!
auguri, N
3 Aprile 2009 alle 4:00 am
Ciao,
Vorrei essere fatto qualcosa per piacere tutti i vostri lettori con questo post
http://moonkiki.blogspot.com/2009/04/gift-knob-zone-for-knob-on.html~~V
6 Apr 2009 alle 02:10
MoonKiki,
Questo è utile. Atleast ci sarà un esempio di vita reale di persone a guardare. Ho usato questo Range Slider Mootools in due dei miei lavori di progetto ... purtroppo sono ancora in fase di UAT!
Grazie ancora
N
10 aprile 2009 alle 19:36
hai ragione, solo una o due settimane per il video
12 aprile 2009 alle 13:04
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
13 Apr 2009 alle 13:56
Ciao,
Ho qualche dubbio con il doppio cursore bloccato. Voglio inviare le informazioni che ho selezionato il dispositivo di scorrimento al fine di inviare ad una pagina jsp e non so come fare. Mi piacerebbe avere un fuction per ottenere i valori min e max fuori del javascript, potreste aiutarmi?
Grazie!
14 aprile 2009 alle 23:39
Hi Nikhil,
Grazie per questo grande cursore. Sto usando il cursore primo dei tre e non riesco a capire come implementare che va in passi come il terzo. Potete per favore dirmi cosa devo modificare per aumentare lo scorrimento per 10.
Grazie
15 aprile 2009 alle 18:18
mi piace il vostro script.
grazie
7 Mag 2009 alle 01:24
Hi Nikhil,
Prima di tutto: l'attuazione grande della classe MooTools Slider! Questo è senza dubbio la migliore versione di fuori là. Penso anche che sia l'unico che offre la possiblity di due manopole invece di uno solo e addirittura ne impedisce il passaggio a vicenda!
Ho un problema, però, anche se nessuno degli esempi visualizzarla, ho visto nel file JS che la modalità 'verticale' della classe Slider originale è ancora lì e ho bisogno di uno slider verticale con due manopole ... così mi sono messo l'opzione 'mode' a 'verticale'. Alcuni aggiustamenti CSS doveva essere fatta, ma che non era un compito troppo arduo. Il problema è che le manopole non si comportano più correttamente - uno di loro 'salti' alla posizione -2 ogni volta che tenta di trascinare altrove, gli altri si scivola bene, ma non superare una certa posizione del cursore.
Siccome io non sono sicuro di cosa esattamente sta andando male, ho pensato che forse semplicemente non aveva incluso la vostra estensione della classe di funzionare per un dispositivo di scorrimento verticale? Ho provato a modificare la classe qua e là, ma senza alcun risultato. Oppure, se avete fatto fare questo, è possibile che si potrebbe includere un esempio di come fare la verticale a doppia manopola funzione di cursore correttamente? Sarei molto grato!
Quindi, se sareste disposti a guardare in questo, vi ringrazio in anticipo per i vostri sforzi!
Cheers,
Xurk
19 giugno 2009 alle 05:06
Ho due campi di input con i valori degli slider possiede, l'utente può cambiare i valori in ingresso e voglio aggiornare la posizione manopole. Ho scritto la funzione per questo.
Questa è la mia proposta:
moveToStep: function (step, max) {
if ((step> = this.options.start) && (this.step step) {
this.maxstep = passo;
this.maxknob.setStyle ("left", parseInt (this.toPosition (passo)));
}
Else {}
/ / MIN
if (passo this.maxstep <) {
this.step = passo;
this.knob.setStyle ("left", parseInt (this.toPosition (passo)));
}
}
this.checkStep (1);
this.end ();
}
},
L'ho Scritto di un minuto fa in modo che può avere bug
20 Giugno 2009 alle 11:18 am
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]
26 Giugno 2009 alle 14:12
Ciao
Fantastico lavoro! Roba veramente utile!
Volevo solo per citare un paio di problemi e soluzioni:
1. "Snap" funziona solo per il dispositivo di scorrimento min, non quella massima. Aggiunta:
if (maxknob! = null) {
this.maxdrag.options.grid = (this.full) / this.options.numsteps;
this.maxdrag.options.limit [this.z] [1] = this.full;
}
all'interno del "if (this.options.snap)" sembra risolvere questo problema.
Tuttavia, poi ci sono altri problemi:
2. Il cursore max si muove a passi, ma in alcuni casi si ferma un passo prima della fine, avendo a che fare con il limite mx per maxdrag è calcolata all'interno della funzione checkStep.
Ora, questo non è una soluzione molto sofisticata e potrebbero non funzionare in tutti i casi, ma ho scoperto che cambiando:
mx = this.max - this.options.offset;
a
mx = this.max - this.options.offset + 0,1;
rende il problema andare via in tutte le combinazioni diverse min / max e il passo che ho provato.
Forse, se non avete bisogno di cambiare i confini in modo dinamico, come nel mio caso non avrete questo problema, ma se lo fate, questo potrebbe fare per voi.
Ora posso andare avanti e fare il mio asos.com come doppio filtro prezzo cursore!
Grazie Nikhil!
9 luglio 2009 alle 06:06
[...] MooTools Slider con due manopole Questa è la MooTools Slider con due manopole (vale a dire un doppio cursore-appuntato), con indicatore di gamma. Guarda la demo qui. [...]