Googleの CDNを使って jQuery UI Tabsを使う例

探してみたら、GoogleはCSSもホスティングしていた。
（jQuery UIのDemoがどこからCSS読み込んでるかを見てみてみたら、発見した。）


CSS＆JavaScript

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css" rel="stylesheet" />

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(function(){ $("#tabs").tabs() });
</script>

テーマはjQuery UI - ThemeRollerから選ぶ。（上記では"blitzer"。）
JavaScriptも静的読み込みにした方がレスポンスは良さそう。


HTML

<div id="tabs">

<ul>
<li><a href="#tab1">タブ1に表示する文字列</a></li>
<li><a href="#tab2">タブ2に表示する文字列</a></li>
<li><a href="#tab3">タブ3に表示する文字列</a></li>
</ul>

<div id="tab1">タブ1の内容</div>
<div id="tab2">タブ2の内容</div>
<div id="tab3">タブ3の内容</div>

</div>

関連記事：floatingdays: jQuery UI Tabsでタブのリンクを静的リンクにする方法


参考

• jQuery UI - Home
• jQuery UI - ThemeRoller
• Developer's Guide - Google AJAX Libraries API - Google Code
• 長～いページもスッキリ！jQueryでタブ表示
• jQuery UI Dialogを使う Google AJAX Libraries API編(jQuery UI 1.5.2) - 文殊堂
• Where do you include the jQuery library from? Google JSAPI? - Stack Overflow