Comment utiliser chessboard.js, un échiquier javascript?

-2

J'essaie d'utiliser un échiquier javascript ici: http://chessboardjs.com/. Malheureusement, je ne sais pas javascript ou CSS, et je suis rouillé en HTML, donc je ne comprends pas la documentation, même si cela semble être un échiquier javascript standard.Comment utiliser chessboard.js, un échiquier javascript?

Comment exactement installer et utiliser ce paquet afin de rendre un échiquier? Les "exemples" sont tous des extraits de HTML ou de javascript, inutiles pour moi sans être intégrés dans une page web fonctionnelle. Et la source pour échantillonner les pages Web ne fonctionne pas lorsque copié dans mon répertoire personnel. Par exemple, la page Web http://chessboardjs.com/examples/1000 est censée afficher et décharger la carte, et fonctionne sur leur serveur, mais lorsque je copie la source dans mon répertoire local, seule une page vierge s'affiche. La source de cette page n'a pas de sens pour moi, par exemple, elle fait référence aux fichiers "js/chessboard.js" et "js/json3.min.js", qui ne sont pas dans la distribution. (Le rendu ne fonctionne pas non plus lorsque "chessboard.js" est remplacé par le nom du fichier javascript dans la distribution). Je suppose que le problème a quelque chose à voir avec l'endroit où les fichiers img sont recherchés, et où les fichiers sont stockés. Et ils sont probablement si évidents pour les experts javascript que tout cela est implicite dans ce paquet et n'est jamais expliqué dans la documentation. Donc, ce que je voudrais, c'est un fichier foo.html qui, une fois copié sur mon ordinateur local, rendra un échiquier en utilisant la source chessboard.js.

Source

2016-08-12 kdog

Aller à cette page par exemple et assurez-vous que vous sélectionnez « Page Web, complète » ou quelque chose de similaire lorsque vous enregistrez. –

Où se trouve le fichier "js/chessboard.js" dans la distribution? D'où provient la page Web? – kdog

Pour être clair, je veux utiliser une copie locale de tout javascript, car finalement j'espère pouvoir le modifier. Je ne sais pas si cette page Web est utilisée un "chessboard.js" de son propre serveur en quelque sorte, un fichier qui n'est pas dans la distribution, ou si ma distribution est corrompue ou quoi. Encore une fois, où voyez-vous "chessboard.js" dans la distribution téléchargée? – kdog

Créer un nouveau fichier texte et collez ceci à l'intérieur:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Chess</title> 
    <link rel="stylesheet" href="css/chessboard-0.3.0.min.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="js/chessboard-0.3.0.min.js"></script> 
    </head> 
    <body> 
    <div id="board1" style="width: 400px"></div> 
    <script> 
     var board1 = ChessBoard('board1', 'start'); 
    </script> 
    </body> 
</html>

puis enregistrez-le avec l'extension .html ou .htm.

Ensuite, téléchargez leur distributable de their download page. Et décompressez le dossier.

Ensuite, placez votre fichier HTML dans le même dossier que les dossiers js, img et css du fichier distribuable décompressé.

Double-cliquez sur/Exécutez le fichier HTML. L'URL doit indiquer file:///C:/path/to/the/file.html.

Vous devriez voir

Source

2016-08-12 22:56:45 4castle

Merci beaucoup! Je suis sûr que cela semble évident pour les personnes ayant une expertise en javascript et CSS, mais j'ai passé au moins une heure à jouer avec les choses et je ne pouvais pas le faire fonctionner. Cela fonctionne et c'est exactement ce que je voulais. – kdog

@kdog Heureux de vous aider! Je peux voir comment le processus était confus. Ils ne faisaient pas bien savoir que jQuery était une dépendance qui n'était pas incluse dans leur distribution. – 4castle

Comment utiliser chessboard.js, un échiquier javascript?

Répondre

Questions connexes