2016-08-12 4 views
-2

私はここでjavascriptチェス盤を使用しようとしています:http://chessboardjs.com/。残念ながら、私はjavascriptやCSSを知らないし、HTMLで錆びているので、これは標準的なJavaScriptのチェスボードと思われるが、私はドキュメントを理解していない。どのように私はchessboard.js、JavaScriptのチェス盤を使用しますか?

チェス盤をレンダリングするには、このパッケージをどのようにインストールして使用しますか? "例"はHTMLやjavascriptのすべてのスニペットであり、実際のWebページに埋め込まれることなく私には役に立たない。また、ホームディレクトリにコピーしたときに、Webページをサンプルするソースが機能しません。たとえば、Webページhttp://chessboardjs.com/examples/1000はレンダリングと空のボードを目的としており、サーバー上で実行しますが、ソースをローカルディレクトリにコピーすると、空のページだけがレンダリングされます。とにかくそのページのソースは私にとって意味がありません。たとえば、どちらも配布に含まれていないファイル "js/chessboard.js"と "js/json3.min.js"を参照しています。 ( "chessboard.js"が配布物のjavascriptファイルの名前に置き換えられても、レンダリングは動作しません)。

私は、imgファイルの検索場所とファイルの格納場所に問題があると想定しています。おそらくこれらはjavascriptのエキスパートには分かりやすいので、このパッケージには暗黙のうちに書かれており、ドキュメントではこれまで説明されていません。

ローカルマシンにコピーするとfhes.htmlというファイルがあり、chessboard.jsソースを使ってチェスボードをレンダリングします。

+0

ゴーを見て、あなたはそれを保存するときに、同様の「ウェブページ、完全」か何かを選択することを確認しなければなりません。 –

+0

ディストリビューションのファイル "js/chessboard.js"はどこにありますか?そこからファイルを取得しているウェブページはどこですか? – kdog

+0

最終的に私はそれを変更することを望んでいるので、明確にするために、私は任意のjavascriptのローカルコピーを使用したいと思います。私はそのWebページが何らかの形で自分のサーバからの "chessboard.js"、配布されていないファイル、または配布が壊れているかどうか、何かを知っているのかどうかわかりません。もう一度、ダウンロードしたディストリビューションのどこに "chessboard.js"が表示されますか? – kdog

答えて

6

新しいテキストファイルを作成し、この内部に貼り付けます。

<!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からダウンロードします。フォルダを解凍します。

次に、解凍​​された配布可能ファイルから、jsimg、およびcssというフォルダと同じフォルダにHTMLファイルを置きます。

HTMLファイルをダブルクリック/実行します。 URLはfile:///C:/path/to/the/file.htmlとなります。

あなたは例のページへ

enter image description here

+0

ありがとう!私はJavaScriptとCSSの専門知識を持つ人にはこのことがはっきりしていると確信していますが、少なくとも1時間はものを使って遊んでいました。これはうまくいきました。 – kdog

+0

@kdogお手伝いします!プロセスがどのように混乱しているかを見ることができます。彼らは、jQueryがその配布可能なものに含まれていない依存性であることをよく知らせていませんでした。 – 4castle

関連する問題