Wie verwende ich schachbrett.js, ein Javascript-Schachbrett?

-2

Ich versuche hier ein Javascript Schachbrett zu verwenden: http://chessboardjs.com/. Leider kenne ich weder Javascript noch CSS und bin in HTML rostig, daher verstehe ich die Dokumentation nicht, obwohl es sich um ein Standard-Javascript-Schachbrett handelt.Wie verwende ich schachbrett.js, ein Javascript-Schachbrett?

Wie genau installiert und verwendet man dieses Paket, um ein Schachbrett zu rendern? Die "Beispiele" sind alle Schnipsel von HTML oder Javascript, nutzlos für mich, ohne in eine funktionierende Webseite eingebettet zu sein. Und die Quelle, um Webseiten zu samplen, funktioniert nicht, wenn sie in mein Heimatverzeichnis kopiert werden. Zum Beispiel, die Webseite http://chessboardjs.com/examples/1000 hier dient zum Rendern und leeren Board, und tut dies auf ihrem Server, aber wenn ich die Quelle in mein lokales Verzeichnis kopieren, wird nur eine leere Seite gerendert. Die Quelle dieser Seite macht für mich sowieso keinen Sinn, zum Beispiel bezieht sie sich auf die Dateien "js/schachboard.js" und "js/json3.min.js", von denen keine in der Distribution sind. (Der Render funktioniert auch nicht, wenn "chessboard.js" durch den Namen der JavaScript-Datei in der Distribution ersetzt wird).

Ich nehme an, das Problem hat etwas damit zu tun, wo img-Dateien gesucht werden, und wo Dateien gespeichert sind. Und vermutlich sind diese für JavaScript-Experten so offensichtlich, dass alles in diesem Paket enthalten ist und in der Dokumentation nicht erklärt wird.

Also, was ich möchte, ist eine Datei foo.html, die, wenn auf meinen lokalen Rechner kopiert, ein Schachbrett mit der Quelle chessboard.js rendern.

Quelle

2016-08-12 kdog

Zum Beispiel dieser Seite sehen und stellen Sie sicher, dass Sie „die Seite, Complete“ oder etwas ähnliches wählen, wenn Sie es speichern. –

Wo befindet sich die Datei "js/schachbrett.js" in der Distribution? Woher bezieht die Webseite diese Datei? – kdog

Um klar zu sein, möchte ich eine lokale Kopie von Javascript verwenden, da ich hoffe, es zu ändern. Ich weiß nicht, ob diese Webseite irgendwie von ihrem eigenen Server "schachbrett.js" benutzt wird, eine Datei, die nicht in der Distribution ist, oder wenn meine Distribution beschädigt ist oder was. Also wieder, wo siehst du "chessboard.js" in der heruntergeladenen Distribution? – kdog

Erstellen Sie eine neue Textdatei, und fügen Sie diese im Inneren:

<!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>

Dann ist es mit der Erweiterung .html oder .htm speichern.

Als nächstes laden Sie ihre verteilbar von their download page. Und entpacken Sie den Ordner.

Als nächstes, legen Sie Ihre HTML-Datei in den gleichen Ordner wie die js, img und css Ordner aus dem entpackten entpackt.

Doppelklick/Führen Sie die HTML-Datei aus. Die URL sollte file:///C:/path/to/the/file.html lauten.

Sie sollten

Quelle

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

Vielen Dank! Ich bin mir sicher, dass dies für Leute mit JavaScript- und CSS-Kenntnissen offensichtlich ist, aber ich verbrachte mindestens eine Stunde damit, mit den Dingen herumzuspielen und konnte es nicht zum Laufen bringen. Das funktioniert und ist genau das, was ich wollte. – kdog

@ kdog Glücklich zu helfen! Ich kann sehen, wie der Prozess verwirrend war. Sie haben es nicht gut bekannt gemacht, dass jQuery eine Abhängigkeit war, die nicht in ihren verteilbaren enthalten war. – 4castle

Wie verwende ich schachbrett.js, ein Javascript-Schachbrett?

Antwort

Verwandte Themen