JeuWeb - Crée ton jeu par navigateur
[Résolu][jQuery] Où est passé le slider ? - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][jQuery] Où est passé le slider ? (/showthread.php?tid=4304)



[Résolu][jQuery] Où est passé le slider ? - Yoda54 - 23-08-2009

Bonjour,

J'ai entrepris mes petits essais suite très bon lien que l'on m'a donné vers la librairie jquery mais je me heurte toujours au même problème: pas moyen d'afficher le slider. J'ai mis quelque temps avant de comprendre que la seule librairie jquery ne suffisait pas et qu'il fallait ajouter les librairies ui.core et ui.slider.
Une fois ceci fait, je pensais être au bout de mes peines... et bien non.

Mon but est de faire un curseur permettant de régler un temps de jeu entre 0 et 60 minutes, 0 étant un minimum fixe. J'ai donc le code suivant:
Code PHP :
<?php 
<html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<
title>Apprendre jQuery - Enfin essayer...</title>
<
script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<
script type="text/javascript" src="js/ui/ui.core.js"></script>
<
script type="text/javascript" src="js/ui/ui.slider.js"></script>
<
script type="text/javascript">
$(
document).ready(function()
{
$(
"#slider").slider({
range: "min",
value: 30,
min: 0,
max: 60,
slide: function(event, ui){
$(
"#time").val(ui.value + ' minutes');
}
});
$(
"#time").val( $("#slider").slider("value") + ' minutes');
});
</
script>
<
style type="text/css">
.
test { padding:10px; }
</
style>
</
head>
<
body
<div class="test">
<
p>
<
label for="time">Temps de jeu:</label>
<
input type="text" id="time" />
</
p>
<
div id="slider"></div>
</
div>
</
body>
</
html>

Mon label avec les 30 minutes par défaut s'affiche bien mais point de curseur en-dessous.
J'ai pensé à un problème de lien mais après vérifications, ceci sont bons et de toute façon, ma valeur par défaut étant affichée, cela semble bien confirmer que les librairies sont chargées.
J'en suis donc au point mort et ne comprends pas pourquoi le curseur refuse de s'afficher.


RE: Où est passé le slider? - Tagu - 23-08-2009

En fait, si tu utilise jQuery UI, tu dois aussi importer la feuille de style, ils appellent ça un thème.
Tu dois l'avoir dans l'archive que tu as téléchargé pour jQuery UI.


RE: Où est passé le slider? - Yoda54 - 23-08-2009

(23-08-2009, 02:11 PM)Tagu a écrit : En fait, si tu utilise jQuery UI, tu dois aussi importer la feuille de style, ils appellent ça un thème.
Tu dois l'avoir dans l'archive que tu as téléchargé pour jQuery UI.

C'est effectivement ce qui manquait. Merci beaucoup.

Si jamais d'autres que moi rencontrent ce problème, le fichier css "ui.all.css" qui est utilisé dans les exemples de jquery.com n'est pas suffisant. En effet, vous verrez en l'ouvrant qu'il ne fait qu'appeler d'autres fichiers css et l'idéal est d'insérer tous ces fichiers pour un fonctionnement optimum de toute la librairie.

Merci beaucoup Tagu.