2009-05-18 12 views
7

szukam kontroli JavaScript, która jest Slider Range (dual pokrętło), że:zakres suwak JavaScript/podwójny suwak istnieje bez używania ramy

  • nie używa istniejące ramy JS (np dojo, jquery, itp.) - , chyba że możesz przetasować/stworzyć własny framework, w którym mogę skompilować tylko te komponenty, których potrzebuję.
  • działa we wszystkich najpopularniejszych przeglądarkach

Przykładem Range Slider jest poniżej, ale oczywiście używa JQuery - więc nie jest to opcja, ponieważ nawet gdybym zbudowany JQuery tym tylko składników muszę (jQuery UI rdzeń + suwak) to 140kb minified:

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

+4

Dlaczego wymóg, że nie używa ramy? "Działa we wszystkich głównych przeglądarkach" to główny powód istnienia frameworków. –

+0

@Ben Blank - Jestem przekonany, że nie powinieneś wymagać od użytkownika pobierania kodu, którego nie będą używać. Gdybym użył frameworku JS, prawdopodobnie 90% frameworka byłoby niewykorzystane. Jeśli więc szkielet JS może być użyty do "roll/create" własnego podstruktury, gdzie zawiera tylko dokładne składniki potrzebne - to działałoby –

+0

@ Hank892 problem z tą logiką, której nie ma nic złego, ale w tym Przypadek, o który pytasz, to złożona funkcja interfejsu użytkownika w JS, która będzie wymagała wielu prac fundamentowych, aby działała poprawnie. Masz więc gwarancję dodatkowego JS, chyba że rzucisz własną dla tej konkretnej sprawy. –

Odpowiedz

5

jQuery UI posiada ładny jeden:

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

+0

Tak, zauważyłem JQuery jeden ale: 1) wykorzystuje istniejące ramy JS, których nie chcę, 2) najważniejsze - jest to pojedynczy suwak (tylko 1 uchwyt) - Pytam o podwójny suwak (z 2 uchwytami) –

+4

Nie zrobiłeś tego kopać bardzo głęboko. :) Jest to także multi-suwak, http://jqueryui.com/demos/slider/#range. Są one bardzo złożone, więc znalezienie problemu, który nie będzie korzystał z aktualnych ram, będzie dla ciebie problematyczne. Yahoo ma jeden, ExtJS ma jeden, jQuery ma jeden, ale wszystkie są zbudowane z podstawowego szkieletu UX w każdym JS Framework. –

+1

http://jqueryui.com/demos/slider/#range z jquery + ta wtyczka suwaka, będzie to ~ 75kb skryptów –

0

Użyj kodu suwaka z http://www.walterzorn.com/dragdrop/dragdrop_e.htm#addons. Jest to pojedynczy uchwyt, ale podstawowy drag-drop.js jest bardzo elastyczny. Trzeba tylko dodać własny drugi suwak i programowo zablokować zakres min-max każdego pasma w zależności od położenia drugiego. Patrzysz na 1 skrypt 12kb (lgpl) i około 10-20 linii kodu, aby to zaimplementować.

2

YUI 3 (obecnie w wersji zapoznawczej) pobiera jedynie absolutną minimalną ilość kodu wymaganą do zrobienia tego, o co prosisz. Ich podstawowy przykład suwaka (http://yuilibrary.com/yui/docs/slider/slider-basic.html) pobiera tylko 24 k JavaScript i mniej niż 1k CSS. Jest całkiem sprytny.

ujawnienie: Pracuję dla Yahoo !.

+0

@Potch To całkiem sprytne, jednak czy YUI 3 obsługuje suwak z podwójnym uchwytem? Twój link wydaje się być tylko dla suwaka z jednym uchwytem. – TeddyR