2009-05-18 10 views
7

Sto cercando un controllo JavaScript che è una gamma Slider (doppio pomolo) che:JavaScript cursore gamma/doppio cursore esiste senza l'utilizzo di un quadro

  • non fa uso di un framework JS esistente (ad esempio dojo, jquery, ecc.) - a meno che non si riesca a creare/creare il proprio sub-framework in cui posso compilare solo i componenti di cui ho bisogno.
  • opere in tutti i principali browser

Un esempio di un intervallo Slider è al di sotto, ma naturalmente questo utilizza JQuery - quindi questo non è un'opzione perché anche se ho costruito JQuery solo compresi i componenti di cui ho bisogno (JQuery nucleo UI + Slider) è 140kb minified:

http://jqueryui.com/demos/slider/#range

+4

Perché il requisito che non utilizza un quadro? "Funziona in tutti i principali browser" è la struttura principale delle ragioni. –

+0

@Ben Blank - Vengo dalla scuola di pensiero che non dovresti richiedere a un utente di scaricare il codice che non useranno. Se avessi usato un framework JS, probabilmente il 90% del framework sarebbe rimasto inutilizzato. Quindi, se il framework JS può essere usato per "rollare/creare" il proprio sotto-quadro in cui include solo i componenti esatti necessari - questo funzionerebbe con il –

+0

@ Hank892 con quella logica, che non ha nulla di sbagliato, ma in questo caso che cosa stai chiedendo è una complessa funzione dell'interfaccia utente in JS, che richiederà un sacco di lavoro di base per farlo funzionare correttamente. In questo modo, hai la garanzia di JS in più a meno che tu non lo faccia per questo caso specifico. –

risposta

5

jQuery UI ha un bel uno:

http://jqueryui.com/demos/slider/

+0

Sì, ho notato JQuery uno ma: 1) sfrutta un framework JS esistente che non voglio, 2) il più importante - è un singolo cursore (solo 1 maniglia) - Sto chiedendo di un doppio cursore (con 2 maniglie) –

+4

Non hai fatto scavare molto in profondità. :) È un cursore multiplo, http://jqueryui.com/demos/slider/#range. Questi sono molto complessi, quindi troverai difficile trovare uno che non faccia leva su un framework corrente. Yahoo ne ha uno, ExtJS ne ha uno, jQuery ne ha uno, ma sono tutti costruiti fuori dal framework UX principale in ogni Framework JS. –

+1

http://jqueryui.com/demos/slider/#range con jquery + questo plug-in slider, sarà ~ 75kb di script –

0

Utilizzare il codice di scorrimento da http://www.walterzorn.com/dragdrop/dragdrop_e.htm#addons. È un singolo handle ma il drag-drop.js sottostante è molto flessibile. Devi solo aggiungere il tuo secondo slider e bloccare a livello di codice l'intervallo minimo-massimo di ciascuna misura in base alla posizione dell'altro. Stai considerando 1 script 12kb (lgpl'ed) e circa 10-20 righe di codice per implementarlo.

2

YUI 3 (che è attualmente in versione di anteprima) preleva solo la quantità minima di codice richiesta per fare ciò che chiedi. Il loro esempio di slider di base (http://yuilibrary.com/yui/docs/slider/slider-basic.html) richiama solo 24k di JavaScript e meno di 1k di CSS. È piuttosto lucido.

divulgazione: lavoro per Yahoo !.

+0

@Potch Questo è piuttosto fluido, tuttavia, YUI 3 supporta un dispositivo di scorrimento a doppia impugnatura? Il tuo collegamento sembra essere solo per un unico cursore a maniglia. – TeddyR