QA@IT

jQuery UI Tabs via Ajaxの使い方

1873 PV

jQuery UI の WebSite に載っている jQuery UI Tabs via Ajax の Sample を見習って、HTML ファイルを Ajax で読み込むページを作ってみました。
Preload される部分の HTML コードは問題ないのですが、その他の Tab をクリックして Ajax で読み込んでくる HTML ファイルの作り方が判りません。

考えられる作り方は;

  1. <doctype><html> から始まり、</html> で終わるフルセットのタグを用意する。
  2. <doctype><html> を省略し、<head><script> から始める。
  3. <doctype><html><head><script> 全てを省略し、読み込んでくる部分の HTML コードだけを含める。

1, 2, 3 のすべてのケースを試してみたのですが、全てのケースは何となく働くのですが、色々一寸した問題があって、どのケースが正しいのか判らないで困っています。

1 のケースは jQuery UI Plugin で規定している Style と Contention を起こす場合があって書式の乱れがあります。
2 のケースは最も問題がなさそうですが、CSS の Link を入れられません。
3 のケースは各タブに一々 Style="" の属性を入れなければならないので、簡単な構造のものならよいが、複雑な構造では面倒です。

小生の試みたSampleのURLは;
     http://longhat.fan-site.net/folder_hosomichi/tr_basho/tr_basho_book.html
です。

上の例では、一見すべてのケースで巧くいっているように見えますが、タブと読み込み領域のパネルの背景色を付けようとして、その部分のCSS propertyをOverrideしようと、CSSに

#tab_menu .ui-tabs-active, #tab_menu .ui-tabs-panel  {background : lightyellow;}

のような規定しても巧くいきませんので、何処か使い方が間違っているようです。

何方か、jQuery UI Tabs via Ajax の Plugin の使い方をご存知の方、ご示唆を戴ければ幸です。

chobe

ウォッチ

この質問への回答やコメントをメールでお知らせします。