以前このブログでメモっておいたjQueryプラグインのQuickFlip 2と、タブ切り替えをセットにしたチュートリアルがありました。
チュートリアルページ
で、チュートリアルページにあるソースをコピーペースト。
html
<div id="flip-tabs"> <ul id="flip-navigation"> <li><a href="javascript:void(0)" id="tab-0">Recent</a></li> <li><a href="javascript:void(0)" id="tab-1">Popular</a></li> <li><a href="javascript:void(0)" id="tab-2">Comments</a></li> </ul> <div id="flip-container"> <div> PutPut Content for first tab </div> <div> Put Content for second tab here </div> <div> Put Content for third tab here </div> </div> </div>
css
@charset "utf-8";
#flip-tabs{
width:300px;
margin:20px auto; position:relative;
}
#flip-navigation{
margin:0 0 10px; padding:0;
list-style:none;
}
#flip-navigation li{
display:inline;
}
#flip-navigation li a{
text-decoration:none; padding:10px;
margin-right:0px;
background:#f9f9f9;
color:#333; outline:none;
font-family:Arial; font-size:12px; text-transform:uppercase;
}
#flip-navigation li a:hover{
background:#999;
color:#f0f0f0;
}
#flip-navigation li.selected a{
background:#999;
color:#f0f0f0;
}
#flip-container{
width:300px;
font-family:Arial; font-size:13px;
}
#flip-container div{
background:#f00;
}
JS
$(function(){
// initialize quickflip
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
// extract index of tab from id of the navigation item
var flipid=$(this).attr('id').substr(4);
// Flip to that content tab
$('#flip-container').quickFlipper({ }, flipid, 1);
return false;
});
});
cssの赤字の部分のwidthで、見出しのタブの文字のwidthと合わせよう。今回は、300px。
で、上記のファイルを全部読みこむと、一応は表示されました。
ただ、htmlのid flip-containerの中の文字数。（様は、タブで切り替わる、本文の文字数）によって、若干思わぬ弊害が起こった。
ちょっと解りずらい画像だけど…タブの下にあるコンテンツにかぶってしまった。
で、いろいろ原因を探っていると、このプラグインは、htmlにstyle属性を付けてくれるんだけど、その付加されたstyle属性をちょっと変えると、
こんな感じに、一つ下のコンテンツに重ならずに表示できた。
対応の仕方ですが、
まず、firebugで、ブラウザに表示した後のhtmlを見てみると、
<div id="flip-container" style="position: relative;"> <div style="margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 300px; height: 140px;"> タブの中の本文 </div> <div style="display: none;"> </div> <div style="display: none;"> </div> <div style="display: none;">
こんな感じになっている。（「タブの中の本文」の所は、複数ある）
問題なのは、青文字のposition:absoluteの部分。同じdivのstyleに、height: 140pxと書いてあるけど、absoluteしてしまっているので、下のコンテンツにかぶってしまう。
で、緑文字で書いてある、一つ上の要素（親要素）である、<div id=”flip-container”>のstyle属性を、
style="position: relative;"
から、
style="position: relative; height: 140px"
としたら、下のコンテンツにかぶらず表示出来ました。
このプラグインは、テキストの量によって、自動でheightを計算して、style属性を付加する感じになっているらしく（多分ね…）、htmlに直接heightをstyle属性で書く事も出来ると思うけど、出来れば動的に処理したい。
そこで考えたのが、このコード、
var cont_style=$("#flip-container").attr("style");//その1 var div_attr=$("#flip-container div").attr("style");//その2 var div_attr_arr = div_attr.split("height");//その3 var style_tuika = cont_style + " height " + div_attr_arr[1];//その4 $("#flip-container").attr("style",style_tuika);//その5
いや、めっちゃ素人がばればれのコードな気がするが…まあ、とりあえず動くので良しとしよう。
その1：まずは、変数cont_styleにdiv#flip-containerの、style属性の値を格納。この時点では、「position: relative;」が格納されているはず。
その2：次は、変数div_attrに、div#flip-container divの、style属性の値を格納。「margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 322px; height: 140px;」が格納されているはず。
その3:今取得したdiv_attrを、文字列「height」で切って、配列div_attr_arrに格納。
格納されたのは、「margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 322px;」と、「: 140px;」のはず。
その4：後は、変数cont_styleと、配列div_attr_arrを使って、新たなスタイル属性を作って、変数style_tuikaに格納。「position: relative; height: 140px;」こうなっているはず。
その5：それを、div#flip-containerのstyle属性に新たに書けば完成。
………………
ホントは、もっとスマートなやり方がありそうだけど、っていうか絶対あるけど、取り換えずこのやり方で、解決できました。
<追記>
このやり方だと、ie6でバグが出ました…修正版あり。
