Grafikart,
il y a 14 ans
oui celle là ne se déclenche que quand on bouge un slider
Bonjour à tous, j'ai essayé d'appliquer toutes les instructions du tutoriel JQueryUI Slider. Je n'ai aucune erreur de code (dixit Firebug) et pourtant je n'ai rien qui s'affiche. Dès le début du tutoriel, quand Grafikart annonce "et là on a notre slider", et bien je n'ai absolument rien. Après avoir fait quelques tests, il me parait pourtant évident que cela doit provenir des js ou des css de UI qui ne sont pas bien pris en compte. Pourtant les chemins sont les bons et Firebug ne m'indique pas que j'utilise une fonction non reconnue. Donc je ne comprends juste pas pourquoi je n'ai rien qui s'affiche. De plus, j'arrive à remplir la div uirange en faisant un .append("test"). Voici le code js : [code] jQuery(function($){ $('.range').each(function(){ var cls = $(this).attr('class'); var matches = cls.split(/([a-zA-Z]+)-([0-9]+)/g); var elem = $(this).parent(); var options = {}; var input = elem.find('input'); input.hide(); elem.append('
'); for(i in matches){ i = i*1; // pour obliger i à être un int if (matches* == 'min') { options.min = matches[i+1]*1; } if (matches* == 'max') { options.max = matches[i+1]*1; } } options.slide = function(event, ui){ elem.find('label span').empty().append(ui.value); input.val(ui.value); } options.value = input.val(); options.range = "min"; elem.find('.uirange').slider(options); elem.find('label span').empty().append(input.val()); }); }); [/code] Et l'HTML : [code] <title>Service Ecriture</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" media="screen" type="text/css" title="Css_enigmus" href="../css/style.css"><link rel="stylesheet" media="screen" type="text/css" title="jqueryui" href="../js/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css"><script type="text/javascript" src="../js/jquery.js"></script><script type="text/javascript" src="../js/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script><script type="text/javascript" src="../js/sliders.js"></script>
<label for="">Valeur : <span></span></label><input type="text" name="range" class="range" value="0">
[/code] Quelqu'un aurait-il une idée s'il vous plait ? Merci beaucoup par avance !
18 réponses
Grafikart,
il y a 14 ans
Et En mettant qques alert tu as localisé le bug ?
Word,
il y a 14 ans
Je ne sais pas tellement quoi tester dans mes alert. J'ai cependant une nouvelle information.
Quand je fais un alert dans la fonction suivante, elle n'apparaît pas. Donc je suppose qu'on ne rentre pas dans la fonction.
options.slide = function(event, ui){
elem.find('label span').empty().append(ui.value);
input.val(ui.value);
}
Word,
il y a 14 ans
Et donc ? Aurais-tu une idée de pourquoi ce slider n'apparaît pas ?
Grafikart,
il y a 14 ans
elem.find('.uirange').slider(options); <= tu vois le souci ?
Word,
il y a 14 ans
Si je réfléchis sur cette ligne. On a mis auparavant une div de class uirange dans elem. Donc là dans elem on cherche .uirange, et on y applique la fonction slider avec les options. Les options ont bien été définies mise à part options.slide mais a priori ça n'a rien à voir avec l'affichage du slider...
Il manquerait éventuellement un .append ou autre pour afficher quelque chose, mais dans le tutoriel on n'en fait pas mention...
Grafikart,
il y a 14 ans
oops j'avais pas vu le append ta div est transformé ? tu la vois dans le code HTML de ta page après passage du JS ?
Word,
il y a 14 ans
Voici le HTML que j'obtiens après passage du JS
<label for="">
Délai :
<span>0</span>
Jours
</label>
<input class="range" type="text" value="0" name="range" style="display: none;">
<div class="uirange ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
</div>
Word,
il y a 14 ans
Plus d'idées ? :(
Grafikart,
il y a 14 ans
Ok donc le js est bon tu as bien le code CSS importé ?
Word,
il y a 14 ans
J'ai essayé avec
<link rel="stylesheet" media="screen" type="text/css" title="jqueryui" href="../js/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css" />et :
<link rel="stylesheet" media="screen" type="text/css" title="jqueryui" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css" />Dans les deux cas il ne se passe rien. Et je n'ai aucune erreur en console. :s
Word,
il y a 14 ans
C'est vraiment étrange ce souci n'est-ce pas ? Je ne vois vraiment pas pourquoi absolument rien ne s'affiche...
Word,
il y a 14 ans
Pas de nouvelles idées ? :(
Word,
il y a 14 ans
Toujours pas de solution ? :(
Word,
il y a 14 ans
Je ne comprends vraiment pas... JQuery fonctionne bien pourtant car j'ai d'autres JS...
Word,
il y a 14 ans
Toujours le même souci... Personne pour tester chez soi ? Merci bien :)
Brory Gregunel,
il y a 14 ans
Salut Word j'ai une idée pour toi ajoute :
<!-- chargement jquery core-->
<script type="text/javascript" src="../js/jquery.ui.core.js"></script>
<!-- chargement jquery widget-->
<script type="text/javascript" src="../js/jquery.ui.widget.js"></script>
<!-- chargement jquery mouse-->
<script type="text/javascript" src="../js/jquery.ui.mouse.js"></script>Car Jquery Slider en est dépendant voila
Word,
il y a 14 ans
Merci beaucoup pour ta réponse bibi63000.
Malheureusement cela n'a rien changé... :s