Modification du curseur par défaut JQ UI

Avec JQ UI, j'ai créé un curseur standard. J'ai découvert comment changer certains de ses paramètres: size, min.size, le maximum, etc. mais jamais trouvé un endroit mis une image. C'est: changer le curseur.Modification du curseur par défaut JQ UI

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Slider - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<style> 
#slider-vertical { 
    height: 600px; 
    background-color: #0F3; 
} 
</style> 
<script> 
$(function() { 
    $("#slider-vertical").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 60, 
     slide: function (event, ui) { 
      $("#amount").val(ui.value); 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="slider-vertical"></div> 
</body> 
</html>

Source

2013-08-21 Donskov Andrey

Voulez-vous dire [** comme ça **] (http://jsfiddle.net/YYMaH/)? –

@Zeaklous écrire comme une réponse – apaul

Si vous voulez dire changer la zone verte à une image à la place, vous pouvez changer background-color à background-image ou tout simplement background puis mis lui donner l'URL ou l'emplacement de l'image que vous voulez. Demo here

#slider-vertical { 
    height: 600px; 
    background: url(backgroundImage.jpg); 
}

Si vous voulez être à la fois au-dessus et en dessous du curseur, vous pouvez le faire en donnant .ui-slider-range un fond transparent comme si

.ui-slider-range { 
    /* If you want the same image as the top part of the slider. */ 
    /* Otherwise you can change the bottom portion here */ 
    background:transparent; 
}

Demo here

Source

2013-08-21 15:36:07

Merci beaucoup. La réponse est trouvée. Sujet fermé –

merci encore :) –

Aucun problème du tout –

Modification du curseur par défaut JQ UI

Répondre

Questions connexes