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

当ブログの2008年5月6日のアーティクル jQuery UI を利用したタブ切り替え機能 のコメント欄にてkuroki氏よりご教示いただいたのは、 ui.tabs.jsを使用する際の注意点としてクロスブラウザ用のライブラリui.core.jsを読み込まないと 上記アーティクルに於いてFirefoxにて不具合の発生する旨、 当該ライブラリを読み込んでいないアーティクル内の高橋登史朗による参照記事 jQuery UI タブ でもFirefoxで閲覧するとタブ間にlist-styleと思われる『・』が表示されてしまっています。
早速 jQuery User Interface より最新版の jQuery UI 1.5.2 をDLして適用してみましたが、『・』が表示される類のものではなく、 Firefox3を利用し閲覧をされているkuroki氏のご指摘でもあると考えます、 上記アーティクルに於いてはタブの背景画像が表示されないと云う問題は 当方環境のFirefox2でも解決に至りませんでした。
此の問題に関してFirefoxの仕様であるのか、 ui.core.jsが未対応であるのか、 情けなく悲しい乍、確かめるスキルを有しておりませんので、折角入手した jQuery UI 1.5.2 を使用して対処療法を講じてみました。
スポンサーリンク
本問題で引っ掛かるのが、当ブログの利用システムに於いて、 javascriptファイル等を同ドメイン内にアップロード出来ない仕様により、 jsファイル始め、cssファイルからイメージファイルに至る迄、 関連ファイルは外部ドメインに置いてアクセスしていることです。 意図をシンプルに表現する為でしたが、此の仕様を閲覧者の方には見えない様に隠し、 摘要ソースにも同ドメインの同ディレクトリに存在する様な表示にしたことから、 ご覧になった方には却って混乱させてしまったとしたら大変申し訳無く思います。 扠、確認の為、同関連ファイルを纏めてブログのエントリーソースを HTML とし、 同ディレクトリ内に配置してアクセスしてみると、 Firefoxでもタブの背景画像が IE と同様、想定通りに表示されました。
其処で上記 DL ファイルの内、下記6種を利用し、
  1. jquery-1.2.6.js
  2. ui.core.js
  3. ui.tabs.js
  4. flora.css
  5. flora.tabs.css
  6. i/tabs.png
此れ等を外部ドメインに配置し、ブログからアクセスした処、 従来通り、Firefoxではタブの背景画像が表示されないのも想定通りです。 此処で当ブログの利用システムではイメージは流石に同ドメイン内にアップロード可能ですので、 6.のtabs.pngを転送した先の URL を3.のflora.tabs.css内該当部分37行目から41行目に
.ui-tabs-nav a, .ui-tabs-nav a span {
   float: left; /* fixes dir=ltr problem and other quirks IE */
   padding: 0 12px;
   background: url(http://www.foo.com/bar/i/tabs.png) no-repeat;
}
の様に適用しました。 此の CSS ファイルを用いて実装したタブ機能を下に記述します。

<link href="http://www.hoge.com/huga/flora.tabs.css" rel="stylesheet" type="text/css">
<script src="http://www.hoge.com/huga/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://www.hoge.com/huga/ui.core.js" type="text/javascript"></script>
<script src="http://www.hoge.com/huga/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(′.ui-tabs-nav′,′#main′).css(′margin′,′0px′);
$(function() {
$(′#main > ul′).tabs({ fx: { height: ′toggle′, opacity: ′toggle′ } });
});
//-->
</script>
<div id="main">
<div id="article080715-1">It′s Here!</div>
<div id="article080715-2"> (ry </div>
<div id="article080715-3"> (ry </div>
</div>
秋雨
うさ犬ランド「 秋雨 」（2005年9月29日）
iGoogleキャラクター達の寝顔
2008年4月3日アーティクル「 iGoogleキャラクター達の寝顔 」

上をFirefoxでご覧いただければ、 2008年5月6日のアーティクルでは想定通りに表示されなかったタブ部分が上手く表示されている様に思います。
以上、飽くまで対処療法に過ぎませんが、 同様なシステムを利用している上でお困りの方の一助にでもなればと思います。

1件のコメント

  1. ユーザービリティを考慮したAjaxの使い処

    ビービットのユーザビリティコンサルタント前田俊幸氏の文責なるは2008年11月5日の記事【海外事例に学ぶ】インタラクティブなUIでコンテンツを見せる際の注意点ではColleen Jones氏による記事Winning Considerations for Interactive Contentを元に近年隆盛を極むリッチなユ

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