情報が無駄に縦長なってきたので、タブUIで整理してみるかー
↓
ググってjqueryUIにとーちゃく。
↓
テストサイトに組んでみると、googlemapsがずれる。
↓
心当たりあったので直してみる。
心当たりは、以前の記事jQuery mobileのcollapsibleにGooglemapsとかです。
ずれ方が一緒だったから・・・
簡単に書くと、地図を表示するはずの領域が存在しないと基準が無くって表示おかしくなるーみたいな。
ってんで、地図表示タブをクリック→地図生成するで解消・・・
・・・
するはずが、なかなか動いてくれん・・・(；´∀｀)
調べてみると、ネット上にはUIのバージョンが1.8以前のものが多く、
最近（1.10とか）のバージョンだと書き方とか変わっているらしく。
1.8だとshowとかselectを使い、1.10だとactivateとかみたい。
以下参考サイトサマサマ
で、ウチの場合は以下で落ち着きました。
$( "#tab" ).tabs({//idがtabの要素で囲んでますよ
activate: function( event, ui ) {
if(ui.newTab.index() == 3){//4番目のタブが地図なので（0スタート）
initialize();//ウチの地図生成関数
}
}
});
ちらっとずれた状態が見えちゃうけど、個人的には気にならんのでスルー。
タブの番号チェックするだけでなく、onでbindさせる書き方もどこかで見たような。
いずれ豊富なオプションが用意してあり、親切なライブラリーですねー(^q^)
[amazonjs asin=”4048913913″ locale=”JP” tmpl=”Small” title=”Web制作の現場で使うjQueryデザイン入門改訂新版 (WEB PROFESSIONAL)”]
[amazonjs asin=”4048865382″ locale=”JP” tmpl=”Small” title=”Google Maps APIプログラミング入門 改訂2版”]
