Google Libraries APIでjQuery UIとcssを読み込む

以前にGoogle Libraries APIを使ったjQueryの読み込み方について書きましたが、今回はjQuery UIの読み込み方。

基本的なことはjQueryをloadするのとあまり変わらないのだけど、jQuery UIの場合、カレンダーやカラーピッカーなど、複雑なスタイルを持った機能が多い。なのでcssが必須になる。ありがたいことに、スタイルシートの方もGoogle Libraries APIでホストされているので一緒に読み込むようにする。

直接URLを指定するなら以下。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'></script>

1.8という風に指定しておけば、自動的に1.8系の最新版が読み込まれる。今ならバージョン1.8.14が自動的に読み込まれる。スタイルシートも同じ。無圧縮のものを読み込みたいなら、jquery-ui.min.jsからminを取る。

load requestによるアクセス方法もある。その場合は以下。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jqueryui", "1.8");
</script>

こちらも1.8と指定しておけば1.8系の最新版が読み込まれる。無圧縮のものをリクエストしたいなら、第3引数に{uncompressed:true}を渡す。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jqueryui", "1.8",{uncompressed:true});
</script>