Mach3.laBlog

ブロック要素の高さを行毎にあわせるjQueryプラグインを習作する

この記事は賞味期限切れです。(更新から1年が経過しています)

既知の類似プラグインは多数あるこの課題ですが、ちょっと習作してみました。 横並びにレイアウトされたブロック要素の高さを揃えるライブラリです。

ブロック要素の高さを行毎にあわせるjQueryプラグインを習作する

なにをしたいのか

例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。

ブロック要素の高さを行毎にあわせる

こんな感じに。この処理をしてくれるライブラリを書いてみます。

書いてみた物

jQuery.lineUp

jQuery.lineUp

使い方

例えばこんな要素があるとして

<div class="items">
    <!-- 異なるコンテンツ量のブロック達 -->
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

こんなスタイルが当たっているとします。

.items {
    overflow: hidden;
}
.items .item {
    float: left;
    width: 200px;
    ...
}

この .item に対して整列の処理を行いたい場合は次のようにします。

$(".item").lineUp();

オプションを渡して設定ができます。

$(".item").lineUp({
    onResize : false,
    onFontResize : false
});

オプションの詳細や、その他の細かい機能等は README をご参照ください。

また、Ajax等で要素の高さが変わるような場合、 非同期処理のコールバックなどで再度同じセレクタに対してlineUpを実行するとリフレッシュされます。(追記:2013/3/4)

主な特徴

JavaScriptでこの処理を行うにあたって色んなアプローチがあるとは思いますが、 注意してみたのは次のような点です。

行毎に高さを設定する

行毎に最大の高さを求めて、その高さにあわせてheightを更新します。

他の類似ライブラリ等では、行のグループ分けをクラス名で行う物などがありましたが、 今回は自動で行を判定して一行ずつ処理しています。 判定材料には jQuery.fn.position().top を使いました。

ウィンドウサイズ・文字サイズ変更時に自動更新する

これは他のライブラリでも多く実装されていますね。 設定で無効にする事もできます。

script要素のdata-*属性でセレクタを設定する

jquery-lineup.js を読み込んでいるscript要素のdata-lineup-selector属性を設定する事で、 そのセレクタに対してdomreadyのタイミングでjQuery.fn.lineUpを実行します。

<script src="assets/js/jquery-lineup.js" data-lineup-selector=".item-a, .item-b"></script>

これは次の内容と同じ処理をします。

<script src="assets/js/jquery-lineup.js"></script>
<script>
$(function(){
    $(".item-a").lineUp();
    $(".item-b").lineUp();
});
</script>

JavaScriptファイルを連結してミニファイしたりする場合にはちょっとアレですが、 そうでない場合には便利かもしれないのでつけてみたオマケ機能です。

まとめ

車輪の再発明ですね。

私自身、そういうレイアウトを組む必要性にあまり出会ったことはないのですが、 必要になった時にまた実用してみたいと思います。


2013/3/4
バグを見つけたので修正。ついでに非同期処理に関して追記

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

mach32ac00a19d261ed2dfb9c3434899a1ce9
<p>jQueryが読まれていない可能性がありますが、その辺はいかがでしょう? bower等でjQueryをインストールするか、HTMLで指定されたパスにjQueryを設置すれば動作するかもしれません。</p>
R4cc7c1e2e97ab5d8865769cece48045b
<p>サンプルでRUNを押しても動作しないような気がするのですがこちらの気のせいでしょうか。
試したのはChromeとOpera12,15です。</p>
シマダf5d0d45e72dd5ea4a233d1225ab3e836
<blockquote>
<p>私もそのようなものです。特に何を参照したわけではないのですが、jQueryが使われるようになる以前から結構オーソドックスに使われている手法だと思っています。</p>
</blockquote>

<p>そうなのですね。これからは安心して使います。ありがとう。</p>
mach32ac00a19d261ed2dfb9c3434899a1ce9
<p>私もそのようなものです。特に何を参照したわけではないのですが、jQueryが使われるようになる以前から結構オーソドックスに使われている手法だと思っています。</p>
シマダf5d0d45e72dd5ea4a233d1225ab3e836
<p>$("script:last")でそのコードが書かれているscript要素を参照する方法は、どうやって知りましたか?
何かで紹介されていた、あるいは使われていたというのであれば、その出典を教えていただけると嬉しいです。
というのは、私もその方法をよく使っていますが、誰に教わったわけではなく、自分で考え出した結果であり、それがオーソドックスな方法なのかどうか分からず、いつも不安だったからです。</p>