jqueryとjquery-uiの簡単導入

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