jsDelivrから 最新の各種JavaScirpt / CSSフレームワークを読みこむ URL

jsDelivrから最新のJavaScirpt/CSSフレームワークを読みこむURLのメモ。

下記の「短縮形」は本来は複数ファイルをまとめる機能だが1ファイルでも使える。（URLが短くなり、キャッシュ期間が長くなる。）


■ jQuery

https://cdn.jsdelivr.net/jquery/latest/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery
↓
v3.0.0-alpha1

https://cdn.jsdelivr.net/jquery/2/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery@2
↓
v2.1.4

https://cdn.jsdelivr.net/jquery/1/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery@1
↓
v1.11.3


■ jQuery UI

CSS
https://cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.css

JS
https://cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery.ui

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,jquery.ui

CSSでテーマを指定する場合
https://cdn.jsdelivr.net/jquery.ui/latest/themes/flick/jquery-ui.min.css
テーマを指定しないと"UI lightness"になる（参考：http://jqueryui.com/themeroller/#themeGallery）


■ jQuery Mobile

CSS
https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.css

JS
https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery.mobile

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,jquery.mobile


■ Bootstrap

CSS
https://cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.min.css

JS
https://cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.min.js
短縮形 https://cdn.jsdelivr.net/g/bootstrap

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,bootstrap


■ Bootswatch

例
https://cdn.jsdelivr.net/bootswatch/latest/cerulean/bootstrap.min.css
テーマもたくさん → https://www.jsdelivr.com/?query=bootswatch


■ Pure.css

https://cdn.jsdelivr.net/pure/latest/pure-min.css
短縮形 https://cdn.jsdelivr.net/g/pure


■ Normalize.css

https://cdn.jsdelivr.net/normalize/latest/normalize.min.css
短縮形 https://cdn.jsdelivr.net/g/normalize


■ Font Awesome

https://cdn.jsdelivr.net/fontawesome/latest/css/font-awesome.min.css
短縮形 https://cdn.jsdelivr.net/fontawesome/latest/css/mainfile

https://cdn.jsdelivr.net/g/fontawesome だとうまく表示されなかった。（フォントファイルへの相対パスがおかしくなる？）



ブラウザキャッシュ期間は1週間。
ただし、複数ファイルをまとめると max-age=15724800（約6ヶ月）になった。


【HTTP Response Header（抜粋）】

Server: nginx
Content-Type: application/x-javascript; charset=utf-8
Vary: Accept-Encoding
X-Version: 3.0.0-alpha1
Cache-Control: public, max-age=604800
access-control-allow-origin: *
X-Cache: HIT
x-edge-location: jptk
Content-Encoding: gzip
X-Firefox-Spdy: h2

ファイル名は"mainfile"でも代替可。minのJSまたはCSSになる。



参考：パブリックなCDNはjsdelivrかcdnjsでいいじゃん。 | Sorry for Team KILLing

JavaScript, CSSライブラリの CDN

たくさんのライブラリをホスティングしているところ

RawGit
・（cdn.rawgit.comの方は）by MaxCDN
・Github上のライブラリが対象

jsDelivr
・by MaxCDN and CloudFlare

cdnjs
・by CloudFlare

OSSCDN
・by MaxCDN



特定のライブラリのみホスティングしているところ（と言ってもGoogleとMicrosoftはそこそこ揃ってる）

Google Developers Hosted Libraries
・by Google
・AngularJSあり

Microsoft Ajax Content Delivery Network
・by Microsoft
・Bootstrap、Knockoutあり

jQuery CDN
・by MaxCDN
・jQeuryファミリーのみ

Bootstrap CDN
・by MaxCDN
・Bootstrap、Font AwesomeとBootswatchのみ

Yahoo! Developer Network
・by Yahoo
・YUIとPure.cssのみ
・HTTPS不可


MaxCDNがんばってる


参考
floatingdays: JavaScriptフレームワーク/ライブラリの CDNいろいろ

CDNから 各種JavaScriptライブラリを読み込むサンプルコード

下記のJavaScript（/CSS）ライブラリをCDNから読み込むためのサンプルコード。

• jQuery
• jQuery Mobile
• jQuery UI
• Twitter Bootstrap

共通事項として、URLのスキーム（http等）を省略すればhttpでもhttpsでも使える。
が、CSSでスキームを省略するとIE8以下が2回サーバにアクセスするという問題があるので、下記ではCSSも使う場合はスキームをhttpにした。httpsで使いたい場合はhttpsにするか、上記の問題を無視していいならスキームを省略すればよい。

jQuery

cdnjs (by CloudFlare)

<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

Microsoft (Ajax Content Delivery Network)

<script src=”//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js”></script>

Google (Hosted Libraries)

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

常に1.x系の最新版にする場合（※なぜか”2”や”1.9”という指定だと404 Not Foundになる）

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

jQuery (CDN by Media Temple)

（https不可）

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

常に最新版にする場合（現時点の最新版の2.0.0ではなく1.9.1がロードされた）

<script src="http://code.jquery.com/jquery.min.js"></script>

jQuery Mobile

cdnjs (by CloudFlare)

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.1/jquery.mobile.min.css" />

<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.1/jquery.mobile.min.js"></script>

Microsoft (Ajax Content Delivery Network)

（現時点の最新版の1.3.1がまだ無い）

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" />

<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js”></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

jQuery (CDN by Media Temple)

（https不可）

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

常に最新版にする場合

（”1.4.0pre”になる。アルファ版未満のバージョン？）

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

jQuery UI

テーマが”start”の場合（※cdnjsを除く）。

cdnjs (by CloudFlare)

（テーマは”lightness”と”smoothness”しかない？CSSに”custom”が付いているのはなぜ？i18nが無い）

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/smoothness/jquery-ui-1.10.2.custom.min.css" />

<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

Microsoft (Ajax Content Delivery Network)

（Datepikcerの日本語化もする場合）

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/start/jquery-ui.min.css" />

<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js”></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/i18n/jquery.ui.datepicker-ja.min.js"></script>

Google (Hosted Libraries)

（Datepikcerの日本語化もする場合）

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/start/jquery-ui.min.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/i18n/jquery.ui.datepicker-ja.min.js"></script>

常に最新版にする場合

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

<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>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

jQuery (CDN by Media Temple)

（https不可。i18nが無い。常に最新版にすることもできないようだ）

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/start/jquery-ui.min.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>

Twitter Bootstrap

レスポンシブにして、Font Awesomeも併用した場合。

cdnjs (by CloudFlare)

（Bootswatchは無い）

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" />

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" />

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css" />

<!--[if IE 7]>

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome-ie7.css" />

<![endif]-->

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

BootstrapCDN (by NetDNA)

（Bootswatchも併用した場合。Font Awesomeを使わない場合は、no-iconsではなく通常のCSSを読み込むようにする。jQueryはBootstrapCDNからは供給されていないので例としてGoogleからにした）

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" />

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" />

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/united/bootstrap.min.css" />

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.min.css" />

<!--[if IE 7]>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css" />

<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

常に最新版にする場合

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.no-icons.min.css" />

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-responsive.min.css" />

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/latest/united/bootstrap.min.css" />

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

<!--[if IE 7]>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome-ie7.css" />

<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>

余談

URLがのきなみ長いのは、MicrosoftやcdnjsがGoogleに合わせてしまったからか。GoogleのURLが長いのは歴史的経緯の影響が大きいだろう。 （何回か名前が変わったが、URLのパス部分は変えなかった。今なら js.gapi.com/jqeury/1/jquery.min.js とかにできるだろうに。）

また、BootstrapCDNのPopular Files Overviewは興味深い。

参考

• JavaScriptフレームワーク/ライブラリの CDNいろいろ
• JSの CDNの速度比較 （2013年版）
• jQuery UIの Datepickerで日本語のカレンダーを表示する方法

JavaScriptフレームワーク/ライブラリの CDNいろいろ

prototype.jsとかは、もういいや。


プロダクト別CDN

• jQuery
• Google Libraries API
• Microsoft Ajax Content Delivery Network
• jQuery CDN
• cdnjs.com
• jQuery UI
• Google Libraries API
• Microsoft Ajax Content Delivery Network
• cdnjs.com
• jQuery Mobile
• Microsoft Ajax Content Delivery Network
• jQuery CDN （jQeury Mobile）
• YUI 3
• Google Libraries API
• YUI Configurator
• cdnjs.com
• YUI 2
• Google Libraries API
• YUI 2: Dependency Configurator
• Modernizr （yepnope.jsを含む）
• Microsoft Ajax Content Delivery Network
• cdnjs.com

（2013/3/19 追記）

• Twitter Bootstrap
• BootstrapCDN

（追記終わり）


CDNごとの特徴

• Google Libraries API
• HTTPS可
• マイナーバージョン（もしくはリビジョン番号）を省略すると、指定したメジャーバージョン（もしくはマイナーバージョン）内で最新のファイルをロードする
• 他にもprototype.jsやDojo、Ext core等メジャーなJavaScriptフレームワークがいくつかある
• Microsoft Ajax Content Delivery Network
• HTTPS可
• 他にもメジャーなjQuery Pluginがいくつかある
• jQuery CDN （jQuery CDN、jQuery CDN （jQeury Mobile））
• HTTPS不可
• YUI （YUI Configurator、YUI 2: Dependency Configurator）
• HTTPS不可
• 複数のファイルを結合して1ファイルとしてロードできる
• cdnjs.com
• HTTPS可
• 最新バージョンの適用タイミングは遅いかも？

結論

• Google Libraries APIが使えれば使う。
• jQuery MobileとModernizrはMicrosoft Ajax Content Delivery Networkを使う。

おまけ
以下のCDNは更新されていないようだ。

• Cached Commons
• JsLoad

関連

• フリーで使えるJavaScriptと CSSの CDNいろいろ
• jQuery UIの Datepickerで日本語のカレンダーを表示する方法
• Googleの CDNを使って jQuery UI Tabsを使う例
• Google App Engineと Google Codeからのファイル取得速度の比較

フリーで使えるJavaScriptと CSSの CDNいろいろ

httpsが使えるのはGoogleとMSのみ。
httpsに拘らないならCached Commonsがライブラリ豊富で便利そう。
でも使いたいライブラリがGoogle Libraries APIで間に合うならGoogle Libraries APIでいいんじゃないかな。レスポンス速度が速いし。
（レスポンス速度はminファイルのロード時間を4回計った2～4回目の平均値。状況によって変わってくるだろうから、参考程度に。）


Google Libraries API

• 主要なJavaScriptライブラリをホスティングしている
• バージョン指定でメジャーバージョンのみの指定や、マイナーバージョンまでの指定等が可能
• https可
• YUIはバージョン2しかない
• ブラウザキャッシュは1時間 or 1年間（参考：floatingdays: Google AJAX Libraries APIのブラウザキャッシュ期間）
• レスポンス速度
• jQuery：0.069秒 
• YUI 2 YUI Loader：0.066秒
  

Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library

• ASP.NET関連以外ではjQuery関連の3つをホスティングしている。Validationプラグインは便利かも？
• jQuery
• jQuery UI
• jQuery Validationプラグイン
• https可
  
• ブラウザキャッシュは1年間（max-ageとExpiresが違う気がする？）
  

• レスポンス速度
• jQuery：0.161秒
  

YUI

• YUI 2と3をホスティングしている
  
• YUI 2: Dependency Configurator

• The YUI Configurator（YUI 3）
• httpsは使えない
• JavaScript、CSSをそれぞれ1つずつにまとめられる（Combine Files）のは便利
  
• ブラウザキャッシュは10年間
• レスポンス速度
• YUI 2 YUI Loader：0.181秒

Cached Commons

• メジャーなものから細かいものまで様々なライブラリをホスティングしている
  
• 特にjQueryのプラグインがたくさんある
• jQuery以外で目についたライブラリ
• 960 Grid System
• Blueprint
• Modernizr
• DD_belatedPNG
• SWFUpload
• YUI 3
  
• GitHubのCDNを使っているらしい
  
• httpsは使えない。残念。
• ブラウザキャッシュは1日
  
• レスポンス速度
• jQuery：0.213秒
• 参考：MOONGIFT : 各種JavaScriptライブラリをCDNで提供する「Cached Commons」 オープンソース・ソフトウェア/フリーウェアを毎日紹介
  

JsLoad: Remote loading API of JavaScript library

• Google App Engineで作られている
  
• 2008年10月から更新されていないようだ

JavaScript Host（←※リンク切れ）

• 閉鎖しちゃったみたい

(2010/10/19 追加)
jQuery Code Server

• jQuery自身によるjQueryのホスティング
• ダウンロード用のファイルをそのままhotlinkしてよいことにしたようだ
• jQuery UIとかプラグインは提供しないのかな？
  

参考

• CDN Catalog
• floatingdays: Google App Engineと Google Codeからのファイル取得速度の比較
  

jQuery UIの Datepickerで日本語のカレンダーを表示する方法

（2010/07/05追記：年月選択のオプションと、その見た目の調整のCSSを追加した。）
（2013/05/01変更：CSSがmin対応したので変更した。）

必要なJavaScriptとCSSは、全てGoogleがホスティングしてくれてた。
（2010/10/12追記：日本の祝日を表示するGCalendar HolidaysだけはGoogleはホスティングしていない。）


サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Datepicker</title>

<!-- jQuery UIのCSSファイルの読み込み -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.min.css" />

<!-- 見た目の調整 -->
<style>
.ui-datepicker td span, .ui-datepicker td a {
    text-align: center;    /* 日付はセンタリングの方が好き */
}
/* 2011/4/25 削除 （土日の背景色はGClendar Holidaysが付けてくれる）
.ui-datepicker-week-end .ui-state-default {    / * 土日の背景を変える * /
    background-image: none;
    background-color: #b4ebfa;
}*/
.ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month {
    width: auto;    /* そのままだと改行してしまう */
}
.ui-datepicker select.ui-datepicker-month {
    margin-left: 1em;    /* ちょっと離すほうが好き */
}
</style>

</head>
<body>

<input id="test" type="text" />


<!-- JavaScriptファイルの読み込み -->
<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>

<!-- 日本語カレンダーを表示するにはこれも要る -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

<!-- こちらなら日本だけでなく全てのローカライズができるが、ファイルサイズが大きい
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>
-->

<!-- 2010/10/12追記：日本の祝日も表示 -->
<script src="gcalendar-holidays.js"></script>

<script>
$(function() {
    //テキストボックスにカレンダーをバインドする（パラメータは必要に応じて）
    $("#test").datepicker({
        //regional: "ja",    //日本語化 （2011/4/25 削除、要らなくなったみたい）
        showButtonPanel: true,    //「今日」「閉じる」ボタンを表示する
        firstDay: 1,    //週の先頭を月曜日にする（デフォルトは日曜日）
      
        //年月をドロップダウンリストから選択できるようにする場合
        changeYear: true,
        changeMonth: true,
      
        //選択可能な日付の範囲を限定する場合（月は0～11）
        minDate: new Date(2010, 6 - 1, 16),
        maxDate: new Date(2010, 8 - 1, 15)
    });
});
</script>

</body>
</html>

jQuery UIのテーマ（外観のデザイン）はjQuery UI - ThemeRollerで見られる。


Datepickerのローカライズ用ファイルは、Google AJAX Libraries APIがjQuery UI on Google Codeと同じディレクトリ構成だったので見つけられた。（余談だがi18nディレクトリには今のところDatepickerのローカライズ用ファイルしか無いようだ。）
Google Codeの方には最小化されたファイル（xxx.min.js）は無かったが、AJAX Libraries APIの方にはあった。（ローカライズ用JSファイルは最小化してもそれほどファイルサイズが小さくならないけど。）CSSはminは無いようだ。
ちなみにjQuery UI本家のDatepickerのデモでもGoogle AJAX Libraries API（きちんとmin.jsの方）のを使っていた。


Google AJAX Libraries APIを使う場合にバージョンアップで突如使えなくなるのを回避したいなら、jQueryとjQuery UIのバージョンはリビジョンまでしっかり指定しておいた方が無難。


（2010/08/19追記）
GCalendar Holidaysを使えば、Datepickerのカレンダー上に日本の祝日を表示できる。（2011/4/25 さらに追記：土日の背景色も表示してくれる。）
サンプル：GCalendar HolidaysでjQuery UI Datepickerに祝日を表示するのサンプル - ゼロと無限の間に
（追記終わり）


参考

• 徒然日記　Web programing side: jQuery:UI Datepicker の日本語化
• jQuery UI - Datepicker Demos & Documentation （jQuery UI本家のDatepickerのページ）
• floatingdays: Googleの CDNを使って jQuery UI Tabsを使う例
• Developer's Guide - Google AJAX Libraries API - Google Code （GoogleによるメジャーなJS/CSSフレームワークのCDN）
• jquery-ui - Project Hosting on Google Code （Google CodeでのjQuery UIのホスティング）

Googleの CDNを使って Dojoを使う例

google.load()を使った動的ロードだとロードされるまでの画面表示が辛いので、静的ロードにする。



CSS
@importではなく、link要素にしてみた。
@importを使う例が多いけど、違いは何だろう？

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/soria/soria.css" />
<!-- or
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/tundra/tundra.css" />
-->
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/resources/dojo.css" />

JavaScript

これでdjConfig属性が効いているのかは知らない

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button"); //必要なものを読み込む
</script>

HTML

<body class="soria">
<button dojoType="dijit.form.Button" id="helloButton">
Hello World!
<script type="dojo/method" event="onClick">
alert('You pressed the button');
</script>
</button>
</body>

html要素を拡張していくという発想が面白い。VBライク？


参考：
Hello World - Dojo for the Attention-Impaired | The Dojo Toolkit
Developer's Guide - AJAX Libraries API - Google Code
tnomuraのブログ : Dojo の基本的な使い方
【特集】詳解! Dojo Toolkit 1.0(Dijit編) - ウィジェットプログラミングのツボ (4) イベント処理もマークアップで!(1) （中略）マイコミジャーナル