jQuery自作：”jQuery SameHeight Plugin”を使いたいセレクタを指定して使えるようにした

2008/11/15

jQuery SameHeight Plugin

先日作った「jQuery SameHeight Plugin」
今まではclassにsameHeightをつけなければ使用できませんでしたが、
ブクマコメントに、「$('hoge')sameHeight();みたいに使いたい」
というのが書いてあったので、対応してみました。

今までどおり、class="sameHeight"に対応はもちろん、
ユーザー指定のセレクタにも対応するようにしました。

ダウンロードして使用してください。
リンク先を保存で保存できます。

ダウンロード：jquery.sameHeight-1.1.js

動作を確認したブラウザは
Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。
今回も、SafariとChromeはemなどの指定には対応できていません。
(高さがうまく確保できないですが、一応揃います。)

jQueryが無いと動かないので、ダウンロードしてきてください。
そして今回のプラグインもダウンロードしておく。

二つのjsを利用するために、head内に記述。

<script src="js/jquery.js" type="text/javascript"></script>  
<script src="js/jquery.sameHeight-1.1.js" type="text/javascript">
</script>

<div class="sameHeight">
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
</div>

padding:20px 10px;
ダミーテキスト

padding:20px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト

padding:20px 10px;
ダミーテキストダミーテキスト

<div class="hoge">
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
</div>

今回はclass="hoge"に適応してみる

$(function(){
	$('.hoge').sameHeight();
});

.hogeの部分を変更することで、
その指定部分に適応されます。

padding:20px 10px;
ダミーテキスト

padding:20px 10px;
ダミーテキストダミーテキストダミーテキストダミーテキスト

padding:20px 10px;
ダミーテキストダミーテキスト

なにかバグなどあればご報告ください。

プログラム考えるのに、時間がかかってしまった。
どうやれば、デフォルトのセレクタで動いて、
さらにユーザー指定のセレクタでも動くか・・・
最初は簡単だろうなんて思っていたけど、
方法を知っていないと作れないなーなんてことを思った。

いろいろ試した挙句、最終的には今回のものになった。

なんとなく、もう少し記述少なくできるのかなとも思ったり。
とりあえず動いてくれてよかったです。

ちょっとまだ動作が不安定かもしれないですが、
何か不具合があれば教えて貰えたらうれしいです。

今のところpxでの指定であれば問題なく動作します。