jQuery UIのCDNを利用するときのURLまとめ

| 2件の返信

jQuery UIをCDN経由で利用する場合のjs、cssファイルの指定方法のまとめです。
まずは結論です。以下のようにURLを記述することで、それぞれのjs、cssファイルを読み込むことができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/i18n/jquery-ui-i18n.min.js"></script>

ここから、ソースのサンプルを使いながら上記について説明します。

jQuery UIのCDNについて

今回はすべてGoogleのCDN(Libraries API)を使っています。
https://developers.google.com/speed/libraries/devguide?hl=ja#jquery

他にもjQueryとMicrosfoftから提供されています。
jQuery: http://code.jquery.com/
Microsoft: http://www.asp.net/ajaxlibrary/cdn.ashx

jQuery UIのDatepickerを使って日本語でカレンダーを表示する

jQuery UIをCDNから読み込んで、Datepickerを動かしてみます。
ソースは以下です。jQueryとjQuery UIのライブラリを読み込んでいます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery UI - Datepicker</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
    <script>
        $(function(){
            $("#datepicker").datepicker();
        });
    </script>
</head>
<body>
    <div>
        <label for="datepicker">Datepicker</label>
        <input id="datepicker" type="text">
    </div>
</body>
</html>

カレンダーを表示することができました。

カレンダーのテーマを変える

下記サイトの左側のThemeRoller内のGalleryタブで、テーマの一覧を確認することができます。
http://jqueryui.com/themeroller/

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css

URLの ui-lightness の部分を利用したいテーマに置き換えます。
置き換える際に、テーマの名前の大文字は小文字に、スペースはハイフンに変換してください。
例)Ui lightness → ui-lightness

8行目のURLを以下のように書き換えて、Ui darknessのテーマのカレンダーを表示することができました。
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-darkness/jquery-ui.css

カレンダーを日本語で表示する

下記のデモで、日本語のカレンダーを表示することができます。

jQuery UIのデモ
http://jqueryui.com/demos/datepicker/#localization

これを実現するためには、i18nのjsファイルの読み込みが必要でした。
下記のURLにi18nのjsファイルがあります。
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/i18n/jquery-ui-i18n.min.js

サンプルソースに9行目と12行目を追記しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery UI - Datepicker</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-darkness/jquery-ui.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>
    <script>
        $(function(){
            $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
            $("#datepicker").datepicker();
        });
    </script>
</head>
<body>
    <div>
        <label for="datepicker">Datepicker</label>
        <input id="datepicker" type="text">
    </div>
</body>
</html>

日本語でカレンダーを表示できました。

おまけ

Googleでは下記のようにURLを指定することで、バージョン1台の最新版のjsファイルを読み込むことができます。
これにより、ライブラリのバージョンが新しくなった場合でも自動的に、最新版を参照することができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>

jQuery UIのCDNを利用するときのURLまとめ」への2件のフィードバック

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>