jQuery UI を利用したタブ切り替え機能

当ブログ2008年3月8日のアーティクル 外部jQueryテスト に続きAll Aboutは高橋登史朗氏による「Ajaxを使おう」にての記事は jQuery UI タブ を参考にさせていただきました。
近年はYahoo!やiGoogle、Livedoor、goo抔、 各ポータルにより挙って採用されているとなれば、 其のインターフェースの有効性抔、 実証済みとも云えるタブ切り替え機能です。

jQuery UI の概要については一つ前2007年12月18日の記事 jQuery UI アコーディオン より引用させていただけば
jQueryでは、誰もが作れるプラグインの他に、タブやカレンダー、ドラッグやドロップなどある程度まとまったwidgetsやツールがjQuery UIとしてまとめられています。プラグインとの大きな違いは、ネームスペースがプラグインのjQuery.fnではなくjQuery.uiで記述されていることですが、使い方はほぼ変わりません。
とあり、jQueryに於いてはデフォルトではありませんが、 プラグインよりは一段とデフォルトに近い形の実装であるようで、 他機能とのコンフリクトも多少安全性が高いのではないかと思われます。

jQuery UI タブ サンプル でもいくつかサンプルが実装されており、 .tabs({・・・}) に与えるパラメータによりタブの切り替えの視覚効果が変化するのですが、 今回当アーティクルでは .tabs({ fx: { height: 'toggle', opacity: 'toggle' } }) としてみました。
[続きを読む]をクリックするとサンプルをご覧いただけますが、 ブラウザによってはうまく動作しない場合もあるようです。
スポンサーリンク
<script src="jquery.js" type="text/javascript"></script>
<script src="ui.tabs.js" type="text/javascript"></script>
<link href="ui.tabs.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
$(function() {
 $('#main > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//-->
</script>
<div id="main">
<ul>
<li><a href="#article080507-1"><span>摘要ソース</span></a></li>
<li><a href="#article080507-2"><span>うさ犬「秋雨」</span></a></li>
<li><a href="#article080507-3"><span>iGoogle<br />キャラクター</span></a></li>
</ul>
<div id="article080507-1">It's Here!</div>
<div id="article080507-2">
<div style="overflow:hidden; width:350px;"><img style="display:block; margin:5px 0px;" src="url" alt="秋雨" height="343" width="400" /></div>
うさ犬ランド「秋雨」（2005年9月29日）
</div>
<div id="article080507-3">
<div style="overflow:hidden; width:350px">
<img style="display:block; margin:5px 0px;" alt="iGoogleキャラクター達の寝顔" src="url" width="330" height="260" /></div>
2008年4月3日アーティクル「iGoogleキャラクター達の寝顔」 </div>
</div>
秋雨
うさ犬ランド「 秋雨 」（2005年9月29日）
iGoogleキャラクター達の寝顔
2008年4月3日アーティクル「 iGoogleキャラクター達の寝顔 」

6件のコメント

  2. kurokiさん、ご教示ありがとうございます。
    確かに「ui.core.js」で検索すると様々必要である旨の記述が見付かりますし、記事中の高橋登史朗さんの頁では使用していない為に『・』が表示されてしまっているようですね。
    只今当記事でも「ui.core.js」を試してみたのですが、何か外に原因があるのか、Firefoxで上手く表示されませんでしたので、機会を改めて再度挑戦したいと思っています。

  3. 何が違うのでしょうか？こちらでは"jquery.js"、と"ui.tabs.js"、の間の行に、"ui.core.js"、を挿入することで、間に・が無く、正常に表示します。"jquery.js"、"ui.core.js"、"ui.tabs.js"、"ui.tabs.css"とも、本家サイトから、最新版をdownloadしました。　
    もし、ご希望なら、こちらのメールアドレスに連絡して頂ければ、このテストに使う全ファイルをmailで送信いたしますが。
    なお、FireFoxは３です。

  4. kurokiさん、お申し出ありがとうございます。
    最新の関連ファイルをDLして当方の環境Firefox2で本日様々試行してみた処、『・』の表示の発生は無く、タブの背景イメージが表示されないのが本アーティクルの問題の様に感じます。
    ブログの投稿ソースを其の儘、別スペースにHTMLファイルとしてアップしてみた処、問題無く表示され、機能した為、当利用ブログシステムではjsファイル等を同ドメイン内に上げることが出来ませんので、利用している他ドメインから背景イメージを引っ張って来ているのが、若しかしたら拙いのではないかと考えています。
    此れには確証が無く推測でしかないのが大変心苦しく思います。

  5. そのようですね。ここのページのソースを表示して確認しましたら、"ui.core.js"を追加してあり、それでも、表示が改善しておりませんので、そのようですね。

  6. jQuery UI タブ切り替え機能改訂版

    当ブログの2008年5月6日のアーティクルjQuery UI を利用したタブ切り替え機能のコメント欄にてkuroki氏よりご教示いただいたのは、ui.tabs.jsを使用する際の注意点としてクロスブラウザ用のライブラリui.core.jsを読み込まないと上記アーティクルに於いてFirefoxにて不具合の

コメントは受け付けていません。