[JS]グリッドなど四つのアルゴリズムでレイアウトできるスクリプト -jLayout
Post on:2010年5月31日
sponsors
HTMLの要素やHTML5のCanvasをコンポーネントとし、四つのアルゴリズムを利用してレイアウトがおこなえるスクリプトを紹介します。
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
