如何使用chessboard.js，一個JavaScript棋盤？

-2

我試圖在這裏使用一個JavaScript棋盤：http://chessboardjs.com/。不幸的是，我不知道JavaScript或CSS，並且在HTML中生鏽，所以我不理解文檔，儘管這似乎是一個標準的JavaScript棋盤。如何使用chessboard.js，一個JavaScript棋盤？

究竟是如何安裝和使用此軟件包來呈現棋盤？這些「例子」都是HTML或JavaScript的片段，沒有嵌入到正常工作的網頁中對我毫無用處。當複製到我的主目錄時，網頁示例源不起作用。例如，這裏的網頁http://chessboardjs.com/examples/1000聲稱呈現和空板，並在他們的服務器上，但是當我將源複製到我的本地目錄時，只有空白頁呈現。無論如何，該頁面的來源對我來說毫無意義，例如，它指的是文件「js/chessboard.js」和「js/json3.min.js」，這兩個文件都不在發佈中。（當「chessboard.js」被分發中的JavaScript文件的名稱替換時，渲染也不起作用）。

我認爲這個問題與img文件的搜索位置以及文件存儲位置有關。大概這些對於JavaScript專家來說是如此明顯，以至於它都隱含在這個包中，並且在文檔中從未解釋過。

所以，我想要的是一個文件foo.html，當複製到我的本地機器時，將使用chessboard.js源渲染一個棋盤。

來源

2016-08-12 kdog

去那個例子頁面，並確保你選擇「完整的網頁」或類似的東西，當你保存它。 –

發行版中的文件「js/chessboard.js」在哪裏？網頁從哪裏獲取該文件？ – kdog

要清楚，我想使用任何JavaScript的本地副本，因爲最終我希望修改它。我不知道該網頁是否使用了自己的服務器上的「chessboard.js」，某個文件不在發行版中，或者如果我的發行版已損壞或發生了什麼。那麼，在下載的發行版中，你會在哪裏看到「chessboard.js」？ – kdog

創建一個新的文本文件，並粘貼這裏面：

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

然後將其與.html或.htm擴展名保存。

接下來，從their download page下載它們的可分發版本。並解壓縮文件夾。

接下來，將HTML文件與解壓縮後的可分發文件夾中的js,img和css文件夾放在同一文件夾中。

雙擊/運行HTML文件。該網址應該說file:///C:/path/to/the/file.html。

您應該看到

來源

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

非常感謝！我相信對於那些在javascript和CSS方面有專長的人來說，這看起來很明顯，但我花了至少一個小時來玩弄東西，並且無法實現它。這工作正是我想要的。 – kdog

@kdog樂於幫忙！我可以看到這個過程如何令人困惑。他們並不知道jQuery是一種未包含在其可分發內容中的依賴項。 – 4castle

如何使用chessboard.js，一個JavaScript棋盤？

回答

相關問題