2009-05-18 8 views
7

Ich suche nach einer JavaScript-Kontrolle, ohne die ein Range-Slider (Dual-Regler) ist, dass:JavaScript Bereichsschieberegler/Dual-Slider existieren einen Rahmen

  • keine vorhandene JS Rahmen (zB Dojo nicht verwendet, jquery, etc) - , es sei denn, Sie können Ihr eigenes Subframe rollen/erstellen, in dem ich nur die Komponenten kompilieren kann, die ich brauche.
  • funktioniert in allen gängigen Browsern

Ein Beispiel ein Range Slider unten ist, aber natürlich diese verwendet JQuery - so ist dies keine Option, denn selbst wenn ich gebaut JQuery nur einschließlich der Komponenten ich brauche (JQuery UI Core + Slider) es 140kb minimierte:

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

+4

Warum die Anforderung, dass es kein Framework verwendet? "Works in allen gängigen Browsern" ist der Hauptgrund für die Existenz von Frameworks. –

+0

@Ben Blank - Ich bin von der Schule des Gedankens, dass Sie keinen Benutzer benötigen, um Code herunterzuladen, den sie nicht verwenden werden. Wenn ich ein JS-Framework verwendete, würden wahrscheinlich 90% des Frameworks ungenutzt bleiben. Wenn also das JS-Framework verwendet werden kann, um ein eigenes Sub-Framework zu "rollen/erstellen", in dem es nur die benötigten Komponenten enthält, würde –

+0

@ Hank892 das Problem mit dieser Logik lösen, mit der nichts falsch ist, aber in diesem Fall Fall, was Sie fragen, ist eine komplexe UI-Funktion in JS, die eine Menge Grundlagenarbeit erfordert, damit es richtig funktioniert. So erhalten Sie garantiert zusätzliche JS, wenn Sie nicht für diesen speziellen Fall selbst rollen. –

Antwort

5

jQuery UI hat eine nette Geschichte:

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

+0

Ja, mir ist JQuery aufgefallen aber: 1) es nutzt ein vorhandenes JS-Framework, das ich nicht will, 2) am wichtigsten - es ist ein einzelner Slider (nur 1 Griff) - Ich frage nach einem Dual-Slider (mit 2 Handgriffen) –

+4

Sie nicht graben sehr tief. :) Es ist auch ein Multi-Slider, http://jqueryui.com/demos/slider/#range. Diese sind sehr komplex, so dass es für Sie problematisch ist, einen zu finden, der kein aktuelles Framework nutzt. Yahoo hat eine, ExtJS hat eine, jQuery hat eine, aber sie sind alle aus dem Kern-UX-Framework in jedem JS-Framework aufgebaut. –

+1

http://jqueryui.com/demos/slider/#range mit jquery + dieses Slider-Plugin, es wird ~ 75kb von Skripten sein –

0

Verwenden Sie den Schieberegler von http://www.walterzorn.com/dragdrop/dragdrop_e.htm#addons. Es ist ein einzelner Griff, aber die zugrunde liegende Drag-Drop.js ist sehr flexibel. Sie müssen nur Ihren eigenen zweiten Schieberegler hinzufügen und programmatisch den Min-Max-Bereich jedes Balkens basierend auf der Position des anderen sperren. Sie betrachten 1 12kb (lgpl'ed) Skript enthalten und etwa 10-20 Zeilen Code, um dies zu implementieren.

2

YUI 3 (das sich derzeit in der Vorschau befindet) zieht nur die absolute Mindestmenge an Code ein, die erforderlich ist, um das zu tun, was Sie fragen. Ihr grundlegendes Slider-Beispiel (http://yuilibrary.com/yui/docs/slider/slider-basic.html) zieht nur 24k JavaScript und weniger als 1k CSS ein. Es ist ziemlich glatt.

Offenlegung: Ich arbeite für Yahoo !.

+0

@Potch Das ist ziemlich glatt, aber unterstützt YUI 3 einen Dual-Griff-Schieberegler? Ihr Link scheint nur für einen einzigen Griff Schieberegler zu sein. – TeddyR

Verwandte Themen