jQueryその２

前回実験したところ

描画完了後に該当する要素の高さを配列に入れてから最大値を求めて、それぞれのBOXの差分を差し込むというやり方で対応してみた。
最初は最大値と自分の高さが等しくても差し込んでいたのだけれど、IEだとHeightが0でもBOXが表示されてずれが生じてしまった*1
仕方ないので最大値と自分を比較して等しい場合はBOXを差し込まないというやり方でIE7も正しく表示できたがIE6だけずれたままでうまくいかない。
まぁ来年のバレンタインデーにMSから強制的にIE7へアップデートするプレゼントがあるようなのでそれからでいいかな？と思っていたら、Windows2000は対象外らしい。
もうすこし泥臭いやり方も模索しようということで保留

今回実験しているところ

ちょっと気分転換をかねてタブの表示の辺りもjQueryで簡潔に書けるのではとjQuery UIを調べるとそのものズバリtabsというものがありました
クリックされたタブが何番目のタブなのかを調べる方法が判らず四苦八苦、戻り値にはそんなプロパティもないしどうしたものかと一日悩んで
クリックされた(選択した)タブのみに"ui-tabs-selected"というクラス名がつくことに着目して、クリックしたときに"ui-tabs-selected"のクラス名のaタグのhrefの値が取得出来るのではと思い実験してみたところ、一つ前の(前回クリックしたタブ)のhrefの値を持って来てしまう
ui.tabs.jsのソースを判らないながら眺めていると、clickではなくshowだとクラス名の付け替えが終わっているので大丈夫っぽいので試してみた

<script type="text/javascript">
    $(function() {
         $('#container-1 ul').tabs({
             show: function() {
                     console.log($('.ui-tabs-selected a').attr('href').slice(-1));
             }
         });
    });

 - 略 -

<div id="container-1">
    <ul>
        <li><a href="#0"><span>One</span></a></li>
        <li><a href="#1"><span>Two</span></a></li>
        <li><a href="#2"><span>Three</span></a></li>
    </ul>
    <div id="0">
    </div>
    <div id="1">
    </div>
    <div id="2">
    </div>
</div>

こんな感じで上手く出来ました

*1:当然Standardモードになっているし、jQuery.boxModelを表示させてもtrueにはなってるのに