jQuery UI をCDNで利用する(注意点あり)

ユーザーインターフェースで使用できる部品がまとめられたjQueryライブラリ、
jQuery UIの読み込みと使い方についてメモ。

今回はファイルを直接ダウンロードをしないで
ネットワーク経由でライブラリを読み込むCDNでの利用方法で解説します。


公式サイトからCDNリンクを探す

jQuery本体の公式ドキュメントからはCDNのリンクが辿り着けなかったので、、

「jQuery UI cdn」と検索。

https://code.jquery.com/

jQuery本体を読み込む

他のプラグインの都合など、特に懸念がなければ最新バージョンで問題無し。

uncompressedminified,のいずれかを選択。

容量は軽い方が良いのでminifiedを選択すれば問題ないでしょう。
※slim,  slimminified を選択した場合は後述のjQuery uiが動作しません。
(既にjQueryを読み込んでいる場合は要確認)

scriptタグごとコピーしてheadタグ内に貼り付ける。

jQuery UIのソースを選択する

本体と同様に、読み込むライブラリのソースをクリックして選択する。
(こちらも圧縮版のminifiedでOK)

scriptをheadタグ内に貼り付ける。


ライブラリを読み込む順番に注意

必ず本体 (jQuery Core)を先に読み込むようにしてください。
(jQuery UIから本体を参照出来ません)

 

テーマを選択する

ライブラリで使用するUI部品のテーマを選択する事が出来ます。

テーマを選択してクリックするとCSSファイルが開きますが、
開いたウィンドウのアドレスバーからURLをコピーして
スタイルシートを読み込むlinkタグのhref属性に設定すればよいです。

 

テーマCSSのリンクもheadタグに貼り付けた。

これでjQuery UIを使用する準備が整いました。
(カレンダーUIのdatepickerを使用した例)

Follow me!

jQuery UI をCDNで利用する(注意点あり)” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください