Quería personalizar el control deslizante JQueryUI, pero no puedo encontrar ninguna manera de cambiar las imágenes del control deslizante. El JQuery Themeroller tampoco parece permitir el cambio de imágenes de manipulador. ¿Alguien sabe cómo hacer esto?Cambio de la imagen del controlador deslizante
Desde el jQuery UI docs:
El plugin jQuery UI deslizante utiliza la interfaz de usuario jQuery marco CSS con el estilo de su aspecto y sentirse , incluidos los colores y texturas de fondo . Recomendamos usando la herramienta ThemeRoller para crear y descargar temas personalizados que son fáciles de construir y mantener.
Si un nivel más profundo de la personalización es necesario, hay widgets específicos clases referenciadas dentro de la hoja de estilo ui.slider.css que puede ser modificado . Estas clases están resaltadas en negrita a continuación.
En este caso en particular, que desea echar un vistazo al elemento con el nombre de clase ui-slider-handle.
El elemento de mango deslizante por defecto tiene los siguientes nombres de las clases que se le aplica:
Eche un vistazo al CSS correspondiente a estos nombres de clase y es probable que pueda editar todo lo que necesite.
Además, le sugiero que instale Firebug. Este plugin de Firefox hará que tareas como estas sean mucho más fáciles para ti.
#demo-frame > div.demo {
padding: 10px !important;
float: left;
}
.contentContainer {
float: left;
width: 400px;
height: 500px;
overflow: hidden;
}
.ui-slider-vertical .ui-state-default {
border: none;
width: 28px;
height: 82px;
background: transparent url(volume_bar/shattle.png) no-repeat 0 0;
}
.ui-slider-vertical .ui-slider-handle {
left: 0;
margin-bottom: -41px;
margin-left: 0;
}
.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
background: none;
}
#slider-vertical, .ui-slider {
border: none;
width: 50px;
height: 50px;
background: transparent url(volume_bar/track-bg.png) repeat-y 0 0;
}
alguien le preguntó en la sección de comentarios para el código CSS muestra de lo que aquí es la que utiliza para cambiar la imagen de fondo de barra de desplazamiento mango y en archivos de imagen PNG mi propia personalizados. Asegúrese de insertar el css DESPUÉS del jquery ui css en la sección del encabezado.
No puedo encontrar una referencia a una imagen para el control deslizante. Lo que es peor, ¡ni siquiera puedo encontrar la imagen del controlador en la carpeta/image! - ¡Actualmente no tengo absolutamente ninguna pista de dónde vienen los mangos! –
bien, finalmente encontré las propiedades de ancho/largo/esquina que componen los controladores actuales. También puedo cambiar la imagen de fondo. Creo que debería funcionar ahora. –
@ Crimson: si tienes tiempo, sería genial si pudieras poner el CSS que usaste para alterar la imagen del controlador en una respuesta a esta pregunta. Estoy teniendo el mismo problema pero no puedo hacer que CSS funcione. – Tom