Iroha.FlatHeights

Necomesi JavaScript Library (Iroha)

概要

指定したブロックレベル要素群の高さを、そのなかでもっとも高いものに揃えます。

ブラウザの表示文字サイズの変更にも追従させることが可能。

動作確認ブラウザ

(fixme)

実装ファイル配置

主ファイル

iroha.flatHeights.js

依存ファイル（主ファイルの動作に必要）

jQuery(jquery.js)
Iroha(iroha.js)
Iroha.FontSizeObserver(iroha.fontSizeObserver.js)(ブラウザの表示文字サイズの変更に追従させる場合に必要)

HTML への組み込み

<head>
    :
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="path/to/iroha.js"></script>
    <script type="text/javascript" src="path/to/iroha.fontSizeObserver.js"></script>
    <script type="text/javascript" src="path/to/iroha.flatHeights.js"></script>
    :
</head>

jquery.js, iroha.js は、これらに依存する各種スクリプトすべてより前に読み込ませておく必要があります。

AutoSetup

プリセットされた設定を利用して、ページ読み込み時に自動適用されるしくみを Iroha では AutoSetup と呼んでいますが、この JS ではそのしくみを提供していません。

動作例

例1：見つかった物をとにかく揃える

セレクタによりブロックは9つ見つかり、その中で一番高さの高いものに他の8個が揃う。

jQuery('#example1 p').Iroha_FlatHeights()

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとほった風。

夏でも底に冷たさをもつ青いそら。

うつくしい森で飾られたモーリオ市。

郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

夏でも底に冷たさをもつ青いそら。

うつくしい森で飾られたモーリオ市。

郊外のぎらぎらひかる草の波。

例2：見つかった物を3つずつ揃える

セレクタによりブロックは9つ見つかるが、それを3つずつのグループに分けて、それぞれで高さを揃える。

jQuery('#example2 p').Iroha_FlatHeights(3)

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとほった風。

夏でも底に冷たさをもつ青いそら。

うつくしい森で飾られたモーリオ市。

郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

夏でも底に冷たさをもつ青いそら。

うつくしい森で飾られたモーリオ市。

郊外のぎらぎらひかる草の波。

例3：見つかった物を3つずつ揃えるが対象が3の倍数ではなかった

特に問題なく3つずつで揃う。

jQuery('#example3 p').Iroha_FlatHeights(3)

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとほった風。

夏でも底に冷たさをもつ青いそら。

うつくしい森で飾られたモーリオ市。

郊外のぎらぎらひかる草の波。

あのイーハトーヴォのすきとほった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

夏でも底に冷たさをもつ青いそら。

うつくしい森で飾られたモーリオ市。

コンストラクタ・メソッド解説

(fixme)

written by Koji Kasugai (kojika@necomesi.jp) 2012-04-05