43 votes

Comment changer la poignée du curseur Jquery UI

Je veux modifier le stock de JQuery UI slider de sorte que la poignée a une flèche sur elle plutôt que d'être un carré. c'est à dire que je veux utiliser une image personnalisée comme la poignée.

Il y a quelques tutoriels que faire:

Mais je ne peux pas le faire fonctionner. Le code ci-dessous dans un arrêt de la poignée de l'image:

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
  #myhandle {position: absolute;z-index: 100;height: 25px;width: 35px;top: auto;background: url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat;}   
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider({handle: '#myhandle'});
  });
  </script>
</head>
<body>
<div id="slider"><div id="myhandle"></div></div>
</body>
</html>

C'est comme si JQuery n'est pas ramasser ce que je veux utiliser le myhandle id pour la poignée. Je me demande: ai-je besoin d'un plugin pour JQuery de reconnaître la poignée en option? (il n'est pas documentée dans http://docs.jquery.com/UI/Slider). Ou peut-être il n'a travaillé dans une ancienne version de JQuery?

Des idées?

48voto

Tom Points 3697

La classe CSS qui peut être modifiée pour ajouter une image au handle du curseur JQuery est appelée " .ui-slider-horizontal .ui-slider-handle ".

Le code suivant montre une démo:

 <!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
  .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider();
  });
  </script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
 

Je pense que l'enregistrement d'une option de gestion était l'ancienne méthode et qu'il n'était plus pris en charge dans JQuery-ui 1.7.2?

18voto

Andrew Betts Points 151
.ui-slider .ui-slider-handle{
    width:50px; 
    height:50px; 
    background:url(../images/slider_grabber.png) no-repeat; overflow: hidden; 
    position:absolute;
    top: -10px;
    border-style:none; 
}

15voto

apaul34208 Points 7818

Si vous avez besoin de remplacer la poignée avec quelque chose de complètement différent, plutôt que de simplement restyling il:

Vous pouvez personnaliser gérer les éléments en créant et en lui ajoutant les éléments et l'ajout de l'interface utilisateur-slider-poignée de classe avant l'initialisation.

Exemple De Travail

JS

$('.slider').append('<div class="my-handle ui-slider-handle"><svg height="18" width="14"><path d="M13,9 5,1 A 10,10 0, 0, 0, 5,17z"/></svg></div>');

$('.slider').slider({
    range: "min",
    value: 10
});

CSS

.slider .ui-state-default {
    background: none;
}
 .slider.ui-slider .ui-slider-handle {
    width: 14px;
    height: 18px;
    margin-left: -5px;
    top:-4px;
    border:none;
}
.slider {
    height: 10px;
}

3voto

Xhanch Studio Points 31

Vous devez également définir border:none sur cette classe css.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X