jQuery UI Dialogを使う Google AJAX Libraries API編(jQuery UI 1.5.2)

JavaScript jQuery jQueryUI

jQueryだけでなくjQueryUIもGoogle AJAX Libraries APIで取ってこれるようですので、その使い方をば。

Google AJAX Libraries APIで取ってくるjQueryUIは、
UI Core・Core Interaction・Widgets・Effects全部入りです。
なので、当然前回言及したDialog・Draggable・Resizableも全部入っています。

とりあえずファイルを直で指定してみる。

<html>
<head>
<link rel="stylesheet" href="./flora/flora.all.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#some-content').dialog({dialogClass:'flora',resizable:false,draggable:false});
});
</script>
</head>
<body>
<div id="some-content">
ほげほげ<br>
ふがふが<br>
ぴよぴよ
</div>
</body>
</html>

これでとりあえずDialogの表示は出来ます。

google.load関数を使う

<html>
<head>
<link rel="stylesheet" href="./flora/flora.all.css" type="text/css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.2');
google.load('jqueryui', '1.5.2');
google.setOnLoadCallback(function() {
	$(function(){
		$('#some-content').dialog({dialogClass:'flora',resizable:false,draggable:false});
	});
});
</script>
</head>
<body>
<div id="some-content">
ほげほげ<br>
ふがふが<br>
ぴよぴよ
</div>
</body>
</html>

http://www.google.com/jsapiを読み込んでおくとgoogle.load関数が使えます。
引数に欲しいライブラリとバージョンを指定すれば読み込んでくれます。

google.load('jquery', '1.2');
google.load('jqueryui', '1.5.2');

ライブラリが読み込まれた後に実行したい処理を
google.setOnLoadCallback関数の引数に関数で渡してやると、
読み込んだ後に実行してくれます。
今回の場合だと、jQueryとjQueryUIを読み込んだ後で、
ページ全体のロードを待って、id="some-content"のdivをDialog化する、
ということになります。

google.setOnLoadCallback(function() {
	$(function(){
		$('#some-content').dialog({dialogClass:'flora',resizable:false,draggable:false});
	});
});

おまけ

Google AJAX Libraries APIは関係ないけど、
cssの読込先を↓にしておけばとりあえず何もファイル落としてこなくても始められますね。
http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css