11540 sujets

JavaScript, DOM et API Web HTML5

Jquery. Le Slider de UI !

Bonsoir,


Je souhaite utiliser le slider de UI.
Je rencontre apparemment un souci.
Mes 3 sliders (avec valeur min et valeur max) ne s'affichent pas !

Pouvez-vous m'aider ?

D'avance, un grand merci.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name = "reply-to" content = "c@s.fr"/>
<meta name = "author" content = "c"/>
<meta name = "description" content = "bdd"/>
<meta name = "keywords" content = ""/>

<title>c - bdd</title>
<style type="text/css">
<!--
body {
	background-color:#000000;	
}
#contenu {
	text-align: center;
}
.slider {
	width: 230px;
	height: 40px;
}
.choix {
	width: 230px;
	height: 60px;
	background-color: #FFFFFF;
	float: left;
	padding: 10px 10px 10px 10px;
}
.rubrique {
	font-size: 14px;
	line-height: 12px;
	color: #0033CC;
	height: 19px;
	font-weight: bold;
}
-->
</style>

<script type="text/javascript">
$(function() {
	$( ".slider" ).slider({
		disabled: false,
		min: 0,
		max: 100,
		orientation: "horizontal",
		range: true,
		step: 1,
		value: 1,
		values: [ 0, 100 ]
	});
});
</script>

<link rel="stylesheet" href="css/general.css" type="text/css">
<link rel="stylesheet" href="js/ui/jquery-ui-1.9.2.custom.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>

</head>

<body>

<div id="ombre">
<div id="site">
<div id="visuel">

    <div id="entete">
    </div>
    
    <div id="contenu">
        <div style="border-color:#000000; border-style:solid; border-width:2px; width:750px;">
        <div>
            <div class="choix">
            	<div class="rubrique">Rubrique 01</div>
                <div id="slider01" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                	<div class="ui-slider-range ui-widget-header" style="left: 17%; width: 50%;"></div>
                    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 17%;"></a>
                    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 67%;"></a>
                </div>
            </div>
            <div class="choix">
            	<div class="rubrique">Rubrique 02</div>
                <div id="slider02" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                	<div class="ui-slider-range ui-widget-header" style="left: 17%; width: 50%;"></div>
                    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 17%;"></a>
                    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 67%;"></a>
                </div>
            </div>
            <div class="choix">
            	<div class="rubrique">Rubrique 03</div>
                <div id="slider03" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                	<div class="ui-slider-range ui-widget-header" style="left: 17%; width: 50%;"></div>
                    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 17%;"></a>
                    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 67%;"></a>
                </div>
            </div>
            <div style="clear: left;"></div>
        </div>
        </div>
    </div>
    
    <div id="pied">
    </div>

</div>
</div>
</div>

</body>
</html>

Modifié par jytest (26 Dec 2012 - 18:45)
Salut

Alors toujours avec les sliders Smiley cligne

Ton souci provient du fait que tu as initié ton slider avant l'appel à jquery du coup la déclaration de ton slider ne peux pas se faire car il a besoin des specs de jquery.js.

Il faut mettre l'initiation après l'appel à jquery.

Bonne courage.
Voilà, j'ai changé cela, comme ceci :

<link rel="stylesheet" href="css/general.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="js/ui/jquery-ui-1.9.2.custom.css" type="text/css" media="all">


Rien n'y fait !
Avez-vous une idée pour me faire avancer, svp.

Un immense merci d'avance.
Bonjour,
passe ce block
<script type="text/javascript">
$(function() {
	$( ".slider" ).slider({
		disabled: false,
		min: 0,
		max: 100,
		orientation: "horizontal",
		range: true,
		step: 1,
		value: 1,
		values: [ 0, 100 ]
	});
});
</script>

après
<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>

et 
<link rel="stylesheet" href="js/ui/jquery-ui-1.9.2.custom.css" type="text/css" media="all">
en dessous de 
<link rel="stylesheet" href="css/general.css" type="text/css">


Après, il faudra voir si il n'y a pas d'autres soucis.
Ce qui veut dire que cela devient alors :

<link rel="stylesheet" href="css/general.css" type="text/css">
<link rel="stylesheet" href="js/ui/jquery-ui-1.9.2.custom.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>

<script type="text/javascript">
$(function() {
	$( ".slider" ).slider({
		disabled: false,
		min: 0,
		max: 100,
		orientation: "horizontal",
		range: true,
		step: 1,
		value: 1,
		values: [ 0, 100 ]
	});
});
</script>


Mais cela ne fonctionne pas !
Snif ! Il y a encore d'autres soucis, apparemment !
A l'aide, je déprime !!!
Modifié par jytest (26 Dec 2012 - 18:46)
Salut,

Ton problème provient du fait que des fichiers js pour le fonctionnement de ton slider manque, comme le jquery.ui.widget et jquery.ui.mouse, toi tu as mis seulement le core, tu pourrais travailler avec les fichier custom, si non tu dois faire attention à tous les fichiers requis pour que ça soient présents sur ton fichier html, la Jquery.ui a déjà mis un assistant pour simplifier la tache.

Edit: fait recours à fireBug, il débug ton code js, et à l'aide de sa console tu pourras voir tes erreurs et ce qui te manque.
Modifié par unami (12 Dec 2012 - 14:41)
Voilà, j'adapte comme suit :

<link rel="stylesheet" href="css/general.css" type="text/css">
<link rel="stylesheet" href="js/ui/jquery-ui-1.9.2.custom.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>

<script type="text/javascript" src="js/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/jquery-ui.custom.js"></script>


Bien sûr, je mets ces fichiers sur le serveur...
Mais, cela ne fonctionne toujours pas !!!
Je désespère
Oui, la console firebug me signale des bugs...
dans les codes ui !!!
Le custom.css n'était pas sur le serveur !

J'ai corrigé l'oubli.
Mais cela ne fonctionne pas encore...
Mais cela avance sur la page !

Que faire maintenant ?
Je ne peux quand même pas modifier les codes de UI !
Modifié par jytest (12 Dec 2012 - 15:20)
Écoutes:

L'ordre dont tu dois mettre les choses est à respecté.

Pour te simplifier les choses, regardes dans le dossier que tu as télécharger du site de jqueryui, je suppose puisque tu as un fichier css nommé : jquery-ui-1.9.2.custom.css, tu auras aussi un fichier qui s'appelle jquery-ui-1.9.2.custom.js (Tu pourras mettre la version min jquery-ui-1.9.2.custom.min.js ) dans le dossier js. Tu'enlèves tous ces fichiers jquery ui, idem pour le core et tu mets ce custom après jquery.

D'ailleurs je ne crois pas que tu faits usage de tous ces fichiers là alors pas la peine de tout les mettre.

L'assistant de téléchargement de jquery ui te donne la possibilité de ne choisir que le plugin qui t est nécessaire et lui en fait détecte les autres fichiers nécessaire pour son fonctionnement. Et tu le télécharges.

Dans le fichier téléchargé tu trouveras deux chemin pour accéder au fichier/s js qu'il te faut, il y a le dossier js à la racine où tu trouveras le fichier custom qui contient les plugins que tu voulais faire marcher, tu n'as qu'à le mettre après le fichier jquery et hop ça ira; tu as aussi le dossier development-bundle/ui où tu trouveras tous les fichiers nécessaires pour le fonctionnement souhaité séparés, et ce sont ces fichiers là qui sont inclu dans le custom dans l'ordre qu'il faut.

Dans ton cas si tu veux faire usage de ces fichiers séparés, tu doit mettre après l'appel à jquery, le core ui, après le widget ui, et après le mouse ui et finalement tu mettras le slider ui, et après tu mets ton appel au slider $('').slider(...

Edit: ce n'est pas le UI qui mets les erreurs c'est le mauvais ordre dont tu mets les fichiers, tu le corriges, pour les fichiers UI puissent avoir toutes les specs qui leurs faut, et ça ira Smiley smile
Modifié par unami (12 Dec 2012 - 15:28)
Si tu utilises tout jquery ui, autant tout charger d'un coup, tu peux, pour tester remplacer ça:
<script type="text/javascript" src="js/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/jquery-ui.custom.js"></script>

par ça:
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Ensuite, je ne suis pas sûr que ton html soit correct, dans les démos de jQueryUI, le container déclaré comme slider est vide: http://jqueryui.com/slider/#range ... (tu cliques sur "view source pour voir le code utilisé").

Dans ton cas, ce serait
<div class="slider"></div>
avec rien dedans. Le javascript se charge de mettre ce qu'il faut dedans en fonction des options que tu passes lors de la déclaration du slider.
Merci à tous 2 pour votre aide !
Mais cela ne fonctionne toujours pas !

unami,
J'ai tout simplifié et
voici le début de code :

<link rel="stylesheet" href="css/general.css" type="text/css">
<link rel="stylesheet" href="js/ui/jquery-ui-1.9.2.custom.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
$(function() {
	$( ".slider" ).slider({
		disabled: false,
		min: 0,
		max: 100,
		orientation: "horizontal",
		range: true,
		step: 1,
		value: 1,
		values: [ 0, 100 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                }
	});
});
</script>


loicbcn,
J'ai essayé de ne pas mettre le moindre code dans le 01...
Cela ne fonctionne pas non plus !

            <div class="choix">
            	<div class="rubrique">Rubrique 01</div>
                <div id="slider01" class="slider">
                </div>
            </div>


Pouvez-vous encore m'aider ?
Modifié par jytest (26 Dec 2012 - 18:46)
Salut,

Ecoutes jytest, voilà la liste des plugins qui sont à l'intérieure de ton fichier custom:
jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js

Tu pourras remarquer que le slider n'y existe pas, ce que je te recommande vivement, c'est d'aller sur le site de jquery ui download http://jqueryui.com/download/ tu décoches la première checkbox nommée Toggle All, après tu parts sur la section widgets, et tu coches la case Slider, si tu veux télécharger d'autres plugins tu peux les cocher aussi. Après tu cliques sur le button download.

Il vont te fournir un fichier Zip, tu le décompresses, et après tu accède au dossier JS et tu récupères les fichier custom, tu le remplaces dans ton serveur, et tu mets le bon nom sur ton fichier html, et ça va fonctionner.

Regardes, ce problème est trop banale et ne mérite pas d'y passer tout ce temps, suits les instructions et ça ira, et de ma part je ne pourrais pas être plus clair.

Bonne courage
Ecoute unami !
J'ai refait cela depuis mon précédent post !
Et cela va maintenant !
J'avais pas eu le temps de passer plus tôt sur le forum !
Pardon !

Quelque chose m'a échappé dans l'envoi sur le serveur !
Ce n'était pas la dernière version !
Pardon !

Merci pour votre aide !
Modifié par jytest (12 Dec 2012 - 18:36)
Par contre, maintenant,
je souhaiterai que la plage utile du slide commence à droite du 1er curseur et se termine au début du 2e curseur, un peu à la façon d'un padding !
Comment faire ?
Hier, j'avais regardé en détail la doc du slider de UI,
mais j'y ai rien vu !

Pouvez-vous m'aider ?
Sujet clos
Aller à