jQuery UI Tabs覚え書き

JavaScript jQuery UI jQueryUI tips

公式サイト
http://ui.jquery.com/
なお、以下の解説は1.5系前提です。

内部実装概略

tabsメソッドの対象は何か？

「$(someSelector).tabs();」を実行した時のjQueryオブジェクトはどんなDOM要素をラップしたjQueryオブジェクトか？
→タブにするli要素の祖先要素(普通はタブにするn個のli要素の親要素であるul要素)

タブUIのpanelはどのように指定されるか？
  • 前述のli要素の子孫要素であるa要素のhref属性
    • URLの場合は、そのURLが示す先のページを動的にロード
    • hashの場合は同一ページ内から「#」に続く文字列のidで要素を取得しpanelのコンテンツとする

動的に生成した要素をpanelのコンテンツとして使用する際の覚え書き

例えば「tabs( "add", url, label, index )」で第2匹数urlにhashを渡していくとする

  • 追加する段階でdocumentから探索可能でなければならない
    • オンザフライなDOM要素をpanelとして追加することはできない
  • idなので重複があってはならない
    • 動的に要素を生成し、panelとして追加する処理を抱えている関数なり何なりの中で一意なidを生成して付与する
  • tab変更時にstyle属性のdisplay,overflow,heightがごっそり削除される