[JS]グリッドなど四つのアルゴリズムでレイアウトできるスクリプト -jLayout

HTMLの要素やHTML5のCanvasをコンポーネントとし、四つのアルゴリズムを利用してレイアウトがおこなえるスクリプトを紹介します。

デモのキャプチャ

jLayout
デモページ

jLayoutのレイアウトのアルゴリズム

レイアウトのアルゴリズムは四種類あります。

Border layout

デモのキャプチャ

North, West, Center, West, Southの5つの領域を使用したレイアウト。5つは全てオプション扱いで、一つ以上を含んでいれば使用可能。

Grid layout

デモのキャプチャ

縦と横の数を指定できるグリッドベースのレイアウト。各カラムは同サイズ。

Flex grid layout

デモのキャプチャ

各カラムのサイズをフレキシブルにしたグリッドベースのレイアウト。

Flow layout

デモのキャプチャ

コンポーネントを横列に流れるように’レイアウト。

jLayoutの使用

jLayoutでレイアウトする際、最初にコンポーネントの定義を行います。コンポーネントはHTMLの要素(divなど)でもHTML5のCanvasでも利用できます。
コンポーネントの最小サイズ、望ましいサイズ、最大のサイズなどを設定し、レイアウトのアルゴリズムを適用します。各アルゴリズムでは横列の数などを設定します。

jLayoutはjQueryのプラグインのため、実装にはjquery.jsが必要です。

sponsors

top of page

©2018 coliss