jQuery / jQuery UI の使用方法について jqGrid を試してみる(導入編) でふれましたが、最新の jQuery は少しファイル構成が変わっているので、jQuery 1.11.2 / jQuery UI 1.11.2 で再度わかりやすくまとめました。
1. jQuery 1.11.2 のダウンロード
https://jquery.com/download/ から ”Download the compressed, production jQuery 1.11.2” リンクを右クリックして「名前を付けてリンク先を保存」でローカルにダウンロードします。デフォルトで jquery-1.11.2.min.js という名前でダウンロードされます。
2. jQuery 1.11.2 のダウンロード
https://jqueryui.com/download/ から :
- “Version” のセクションより、1.11.2 (Stable, for jQuery1.6+)を選択
- “Components” のセクションより、Toggle All を選択
- “Theme” のセクションより、Redmond を選択(※お好きなものを選らんで下さい)
- Download ボタンをクリック
デフォルトで jquery-ui-1.11.2.custom.zip という名前でダウンロードされます。ダウンロードが完了したら展開します。
展開すると以下のフォルダおよびファイルがあります。
+ external + images index.html jquery-ui.css jquery-ui.js jquery-ui.min.css jquery-ui.min.js jquery-ui.structure.css jquery-ui.structure.min.css jquery-ui.theme.css jquery-ui.theme.min.css
3. サイトへ配置
以下のファイルおよびフォルダをサイトへ配置します。ここでは例として /var/www/html/jqdemo/lib へ配置します。
- jquery-1.11.2.min.js
- 展開した jquery-ui-1.11.2 から imagesフォルダ、jquery-ui.min.js、jquery-ui.min.css
4. テスト準備
jquery-ui-1.11.2.custom.zip 中にあった index.html に下記の変更を行い、/var/www/html/jqdemo へ配置します。
6 行目
<link href="lib/jquery-ui.min.css" rel="stylesheet">
394-395 行目
<script src="lib/jquery-1.11.2.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>
5. 動作確認
https://www.northwind.mydns.jp/dev/jqdemo/index.html