2009年3月19日木曜日

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でタブのリンクを静的リンクにする方法


参考

0 件のコメント:

コメントを投稿