ウェブアプリケーションにサードパーティのコンポーネントを追加するにはどうすればよいですか？

私が理解したことは、最初に、cssファイルのリンクをヘッダに記述する必要があることです。次に、タグの前にjsファイルのリンクについて言及する必要があります。しかし、私はこのアプローチを使用してsemantic-ui.comのコンポーネントを使用することに失敗しました。私はこのようなものが欲しい。ウェブアプリケーションにサードパーティのコンポーネントを追加するにはどうすればよいですか？

semantic-ui.comでは「複数の検索選択」と呼ばれています。私がしたのは：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css"> 

    </head> 
    <body> 

     <select class="ui fluid search dropdown" multiple=""> 
    <option value="">State</option> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
    <option value="AZ">Arizona</option> 

</select> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script> 
</body> 
</html>

私はコンソールに何のエラーも起こっていません。コンソールを見ると

出典

2017-04-16 Preetom Saha Arko

次のエラーを見ることができます：

Uncaught ReferenceError: jQuery is not defined 
    at semantic.min.js:11

あなたはまた、jQueryを追加する必要があります。

編集：私はチュートリアルの解決策を見つけたFiddle

出典

2017-04-16 15:34:52 Janar

jQueryを圧縮する必要がありますか？ –

jQueryのリンクを追加しました。今でもコンポーネントを使用することはできません。 @Janar –

ああ、あなたもそれを初期化する必要があります！ – Janar

：はまた、あなたはここで、この

$('select').dropdown();

実施例のように.dropdown（）コマンドでそれを初期化する必要があります。 jQueryリンクは、headに含めるか、少なくともコールする前に$('select').dropdown();

出典

2017-04-17 13:51:14

ウェブアプリケーションにサードパーティのコンポーネントを追加するにはどうすればよいですか？

答えて

関連する問題