1. jQueryUIとは
jQueryUIとは、jQueryによるユーザーインターフェース系プラグインの集まりのこと。jQueryjQueryとともに広く利用されている。
日付選択やドラッグ・アンド・ドロップ、オートコンプリートなど、自分で一から作成するとかなり大変なUIも、jQueryUIを使用すると簡単にサイトに導入できる。
jQueryUIでは、これらの各UIを「Widget(ウィジェット)」と呼んでいる。
2. jQueryUIの便利な点
2-1. アクセシビリティが素晴らしい
例えば、タブであれば「キーボードの左右キーでタブ選択して[tab]キーでパネル内にフォーカスする」といったキーボード操作や、スクリーンリーダー(音声読み上げブラウザ)への配慮などが備わっている。
2-2. 目的に応じて機能を選択して、ダウンロードすることができる
jQueryUIはとても大きなライブラリだが、必要な機能のみをダウンロードすることもできる。
3. [注意]jQueryファイルの読み込む順番
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TEST</title>
<!-- CSS読み込み -->
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/main.css">
<!-- スクリプト読み込み ※※※読み込む順番に注意する※※※ -->
<script src="./js/vendor/jquery-3.4.1.min.js"></script>
<script src="./js/vendor/jquery-ui.min.js"></script>
<script src="./js/main.js"></script>
</head>
先にjQueryのjsファイルを先に読み込んでから、main.js
を読み込む。
先にjQueryを読み込んでおかないと、main.js
のプログラムからjQueryを使用することができないから。