Je voulais personnaliser le curseur JQueryUI mais je n'arrive pas à trouver un moyen de changer les images de la poignée du curseur. Le JQuery Themeroller ne semble pas non plus permettre le changement des images de la poignée. Est-ce que quelqu'un sait comment faire cela?Changement de curseur gérer l'image
De l'jQuery UI docs:
Le plugin jQuery UI curseur utilise le framework CSS jQuery UI pour le style de son look and feel, y compris les couleurs et les textures de fond. Nous recommandons en utilisant l'outil ThemeRoller pour créer et télécharger des thèmes personnalisés qui sont facile à construire et à entretenir.
Si un niveau de personnalisation est nécessaire, il y a des classes widgets spécifiques référencés dans le ui.slider.css stylesheet plus profond qui peut être modifié . Ces classes sont surlignées en gras ci-dessous.
Dans ce cas particulier, vous voulez jeter un oeil à l'élément avec classname ui-slider-handle.
L'élément curseur par défaut de poignée a les classnames suivantes lui est appliquée:
Jetez un oeil à la CSS correspondant à ces noms de classe et vous serez probablement en mesure d'éditer tout ce dont vous avez besoin.
Aussi, je vous suggère d'installer Firebug. Ce plugin Firefox rendra les tâches comme celles-ci beaucoup plus faciles pour vous.
#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;
}
quelqu'un a demandé dans la section commentaire pour exemple de code css voici donc celui que je changeais la poignée et de l'image d'arrière-plan de barre de défilement pour mes propres fichiers d'image personnalisés. Assurez-vous d'insérer le css APRÈS le jquery ui css dans la section d'en-tête.
Je ne trouve pas de référence à une image pour la poignée du curseur. Pire encore, je n'arrive même pas à trouver l'image de la poignée dans le dossier/image! - Actuellement, je n'ai absolument aucune idée d'où proviennent les poignées! –
ok, enfin trouvé les propriétés largeur/longueur/coin constituant les poignées actuelles. Je suis également capable de changer l'image de fond. Je pense que cela devrait fonctionner maintenant. –
@Crimson - Si vous avez le temps, ce serait génial si vous pouviez mettre le CSS que vous avez utilisé pour modifier l'image du handle dans une réponse à cette question. J'ai le même problème, mais je n'arrive pas à faire fonctionner les CSS. – Tom