2009-05-18 9 views
7

Busco un control JavaScript que es un regulador de rango (mando dual) que:JavaScript gama deslizador/control deslizante de doble existir sin el uso de un marco

  • no utiliza un marco JS existente (por ejemplo, ir de discotecas, jquery, etc.) - a menos que pueda hacer/crear su propio marco secundario donde pueda compilar solo los componentes que necesito.
  • obras en todos los principales navegadores

Un ejemplo de un regulador de rango está por debajo, pero por supuesto esto utiliza jQuery - así que esto no es una opción, porque incluso si he construido jQuery incluyendo sólo los componentes que necesito (JQuery IU + núcleo deslizante) se 140kb minified:

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

+4

¿Por qué el requisito de que no use un marco? "Funciona en todos los principales navegadores" es la razón principal por la que existen los frameworks. –

+0

@Ben Blank - Soy de la escuela de pensamiento de que no deberías requerir que un usuario descargue código que no usará. Si utilizo un marco de JS, probablemente el 90% del marco no se utilizará. Entonces, si el marco JS se puede usar para "rodar/crear" su propio sub-framework donde solo incluye los componentes exactos necesarios - eso funcionaría –

+0

@ Hank892 el problema con esa lógica, con lo cual no hay nada de malo, pero en este caso de lo que está preguntando es una función de IU compleja en JS, que requerirá mucho trabajo de base para que funcione correctamente. Por lo tanto, se le garantiza un JS adicional a menos que imprima el suyo para este caso específico. –

Respuesta

5

jQuery UI tiene una agradable:

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

+0

Sí, noté que JQuery uno pero: 1) aprovecha un marco JS existente que no quiero, 2) lo más importante: es un control deslizante único (solo 1 manejador) - estoy preguntando por un control deslizante doble (con 2 controles) –

+4

No lo hizo cavar muy profundo. :) Es un control deslizante múltiple, http://jqueryui.com/demos/slider/#range, también. Estos son muy complejos, por lo que le resultará problemático encontrar uno que no aproveche un marco actual. Yahoo tiene uno, ExtJS tiene uno, jQuery tiene uno, pero todos están basados ​​en el marco UX central en cada Marco JS. –

+1

http://jqueryui.com/demos/slider/#range con jquery + este complemento deslizante, será ~ 75kb de scripts –

0

Utilice el código del control deslizante desde http://www.walterzorn.com/dragdrop/dragdrop_e.htm#addons. Es un identificador único pero el subyacente drag-drop.js es muy flexible. Solo tiene que agregar su segundo control deslizante y bloquear programáticamente el rango min-max de cada barra según la posición del otro. Está buscando incluir 1 script de 12kb (lgpl'ed) y aproximadamente 10-20 líneas de código para implementar esto.

2

YUI 3 (que se encuentra actualmente en versión de vista previa) solo extrae la cantidad mínima absoluta de código necesaria para hacer lo que pide. Su ejemplo básico de control deslizante (http://yuilibrary.com/yui/docs/slider/slider-basic.html) solo extrae 24k de JavaScript y menos de 1k de CSS. Es bastante resbaladizo.

divulgación: ¡Yo trabajo para Yahoo !.

+0

@Potch Eso es muy elegante. Sin embargo, ¿YUI 3 es compatible con un control deslizante de doble asa? Su enlace parece ser solo para un control deslizante de un solo control. – TeddyR

Cuestiones relacionadas