Javascript Girl
  1. Javascript Girl
  3. JQuery Slider ne fonctionne pas?
Intereting Posts
Quand utiliser Meteor.methods et utiliser des talons Comment comprendre ce code javascript composé d'un nombre de nombres Est-ce que je peux rattraper l'erreur "ne peut pas établir une connexion" pour une connexion Websocket défaillante? Comment éviter les actions par défaut en JavaScript? Problèmes avec le nouveau Google reCAPTCHA dans IE lorsqu'il est modal ou dialogue Comment montrer la fin de la lecture vidéo de la vidéo html5? Légende avancée avec bxslider Comment utiliser JSDOC3 pour documenter les constantes d'énumération Comment puis-je changer la langue du navigateur avec Javascript Chaîne divisée en fonction de la deuxième occurrence du délimiteur en utilisant javascript Comment utiliser la fonctionnalité xor dans l'expression js angulaire? JQuery: définissez la liste sélectionnée de la liste déroulante? Angularjs ng-repeat counter La méthode Javascript toSource () ne fonctionne pas Promesses de JavaScript et si / else déclaration

JQuery Slider ne fonctionne pas?

J'essaie de dupliquer le curseur trouvé ici .

J'ai un fichier index.php et le code est le suivant:

Tête: 

 <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> <style type="text/css"> .top { margin: 0px; padding: 0px; height: 500px; width: 500px; } .testing { margin-left: auto; margin-right: auto; margin-top: 200px; margin-bottom: 200px; padding: 0px; height: 100px; width: 100px; background: red; border: 1px solid #000; } </style> </head>

Corps: 

 <body> <div class="top"> <div class="testing"></div> </div> <p>a: <span id="a">0</span> <div id="a_slider"></div> </p> </body>

JavaScript: 

 <script> $("#a_slider").slider({ orientation: "horizontal", range: false, min: 0, max: 1, value: 0, step: .01, animate: true, slide: function (event, ui) { $("#a_field").val(ui.value); $("#a").text(ui.value); } }); </script>

Mais ça ne fonctionne pas! Je ne peux que deviner que le lien de jqueryui dans la tête est incorrect, mais je suis plutôt sûr que c'est le même que dans le violon ci-dessus.

Si vous fournissez un violon dans votre solution, utilisez des ressources externes afin que je puisse trouver les fichiers appropriés. Les noms simples de classe et ID sont uniquement à des fins de test.

HTML entier: 

 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> <style type="text/css"> .top { margin: 0px; padding: 0px; height: 500px; width: 500px; } .testing { margin-left: auto; margin-right: auto; margin-top: 200px; margin-bottom: 200px; padding: 0px; height: 100px; width: 100px; background: red; border: 1px solid #000; } </style> </head> <body> <div class="top"> <div class="testing"></div> </div> <p>a: <span id="a">0</span> <div id="a_slider"></div> </p> </body> <script> $("#a_slider").slider({ orientation: "horizontal", range: false, min: 0, max: 1, value: 0, step: .01, animate: true, slide: function (event, ui) { $("#a_field").val(ui.value); $("#a").text(ui.value); } }); </script> </html>

Je vous remercie.

MODIFIER

J'ai essayé d'utiliser http://code.jquery.com/ui/1.10.4/jquery-ui.min.js , mais pas aussi de dés. Voici un aperçu de ce qui se présente …

Pas de curseur

Notez dans l'image qu'aucun slider ne s'affiche.

Voici le violon de travail

Essayez de charger jQuery UI correctement: 

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> $("#a_slider").slider({ orientation: "horizontal", range: false, min: 0, max: 1, value: 0, step: .01, animate: true, slide: function (event, ui) { $("#a_field").val(ui.value); $("#a").text(ui.value); } });

Vous devez également inclure la feuille de style jQuery UI: 

 <link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">

Ensuite, cela fonctionnera.

Ajoutez simplement jQuery UI touch après jQuery ui: 

 <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>