Exemples de boutons radio JQueryUI ne fonctionnant pas

Question

J'essaie de remplacer certains boutons radio par le joli type JQueryUI. Cependant, quand je copie l'exemple de code à http://jqueryui.com/button/#radio (qui fonctionne très bien comme vu sur cette page) directement dans "test.htm" et ouvre que dans le même navigateur, je reçois des boutons radio simples, sans style.

Que diriez-vous de l'exemple de code à http://www.tutorialspoint.com/jqueryui/jqueryui_button.htm sous "Fonctionnalité par défaut"? Dans mon navigateur, le texte décrit la création d'un ensemble de boutons radio (un seul peut être sélectionné), mais leur exemple est un ensemble de cases à cocher (dont 0-tout peut être sélectionné). J'ai essayé de coller leur code dans un fichier et de l'ouvrir. J'obtiens le même résultat que sur leur page de démonstration: de jolies cases groupées. Transformer le type d'entrée en "radio" les empêche de fonctionner; cliquer ne fait rien.

Comment peut-il être que le code d'exemple JQueryUI officiel ne fonctionne pas sur cet ordinateur même si cela fonctionne dans la démo sur la page où ce code apparaît? Plus précisément, que dois-je faire pour créer un simple ensemble de boutons radio, de style quelque chose comme le style JQueryUI *, qui fonctionnent comme des boutons radio normaux?

* (je pourrais veux les recolorer plus tard, mais c'est moins important.)

navigateur est Firefox 42. PC est derrière un pare-feu de travail, mais apparemment peut utiliser le code jQueryUI assez bien pour me montrer les pages de démonstration. Les réponses seront plus faciles à lire si elles sont intégrées et non reliées par un autre site.

Answer 1

Essayez d'être plus précis avec vous de l'URL à l'aide pour les actifs jQuery, comme celui-ci (préfixer avec https: et en fournissant un chemin complet pour la démonstration stylesheet):

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> 

Si vous inspectez la page et voir votre console de développeur, vous devriez voir des erreurs pour les ressources qui ne sont pas en cours de chargement.

La raison pour laquelle cela ne fonctionnait pas auparavant, c'est parce que l'utilisation de //path_to_file.js utilise ce que l'on appelle des URL "protocol relatives". Plutôt que de spécifier HTTP ou HTTPS, vous pouvez utiliser l'URL relative au protocole et celle-ci utilisera tout ce que votre navigateur utilise. Le problème est que si vous chargez un fichier statique localement, il utilisera le protocole file:// et tentera de charger votre js et css inclut en utilisant le préfixe file:.