jQuery UIのダウンロードの手順と使い方

.NET開発者のためのブログメディア

「jQuery UI」を利用すると、Webサイトの画面項目に動きを付けることや、画面の見た目がリッチなデザインを作成することができます。
主にカレンダー、アコーディオン、ダイアログ、エフェクトなど、多くの機能が用意されています。

SE: jQuery UIを使うと様々な機能が利用できるのですね！ダウンロードとインストール、使い方を教えてください。

PL: ダウンロードとインストールは簡単ですよ。ダウンロードしてから使い始めるところまでを一緒に確認しましょう。

jQuery UIのダウンロード方法

jQueryを導入する方法は必要なファイルをダウンロードする方法と、既に必要なファイルが置かれているサーバーを参照して利用する方法の2通りがあります。

簡単なのは、既に必要なファイルが置かれているサーバーを参照する方法です。
この方法はCDNと呼ばれるもので、jQuery以外でも様々なライブラリで利用することができます。

本記事ではGoogleを利用する方法を紹介します。まず、以下のURLにアクセスします。
https://developers.google.com/speed/libraries/#jquery

本記事執筆時点の2019年9月で最新バージョンである、3.4.1を利用する場合、「3.x snippet:」の見出し部分に記載されているコードをコピーします。
コピーしたコードはHTMLのheadタグ内にそのまま記載してください。

jQuery UIのダウンロード後の使い方

jQuery UIはタグ内に以下のタグをそのまま記載するだけで使用可能になります。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

上記の3文を記載すれば、jQuery UIの読み込みは完了です。

jQuery UIを使用して、カレンダーを表示させます。
以下に例を記載します。

<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    $(function(){
        $("#date").datepicker();
    });
</script>
</head>
<body>
    <input id="date" type="text">
</body>

<head>

$(function(){

$("#date").datepicker();

});

</script>

</head>

<body>

</body>

idがdateというテキストボックスを用意します。
これは普通のhtmlのテキストボックスです。

<input id="date" type="text">

12	<input id="date" type="text">

headタグ内のscriptタグでjQueryの初期処理を記載します。

$(function(){

6	$(function(){

の部分です。
カレンダーを表示しているのが、下記の部分です。

$("#date").datepicker();

7	$("#date").datepicker();

#dateという要素を指定して、datepickerというメソッドを呼び出します。
datepickerというメソッドがjQuery UIで用意されているメソッドです。

カレンダーを表示するために必要な実装はこれだけです。
実際の画面は以下の通りです。

カレンダー表示ボタン

テキストボックスにカーソルを合わせると、以下のようにカレンダーが表示されます。

カレンダー

カレンダーのような機能を自力で全部実装しようと思ったら、通常は多くのコードが必要です。しかし、以上のようにjQuery UIを使用することで、記載するコード量は格段に少なくなります。

SE: 簡単にカレンダーが表示できましたね！実装するコード量も少なく、ダウンロードしてから使うまでの手順は非常に簡単でした。

PL: jQuery UIにはカレンダー以外にもたくさんの機能があるので、ぜひ使ってみてください。

jQuery UIをダウンロードして使うことは簡単

jQuery UIのダウンロードと、カレンダーを表示する機能を作りました。
ダウンロードの場合も数行記載するだけでした。jQueryを使い始めることは非常に簡単で、実装も簡単にできます。
また、jQuery UIにはカレンダー以外にもたくさんの機能が用意されていますので、jQuery UIを使用してみてはいかがでしょうか。