正方形の要素を敷き詰めるjQueryライブラリ – jquery.square.js

  • 2010年12月23日、修正を行いました。

ブログではなくて、トップページに使ってみようと作ってみた正方形の要素を敷き詰めるjQueryライブラリを作ってみたので公開してみようかと思います。

オプションで、一つの正方形のサイズ、隣の要素との間隔等などの設定が可能です。

使い方はこんな感じ。

$("#hoge").square();

上の記述で、「hoge」というidの付いた要素に適用されます。

デモはこちら

ダウンロード(名前をつけて保存)

以下は詳細説明。

関数概要

{target}.alphaRo({option});

{target}
適用する対象
{option}
[target](string) = square
敷き詰める要素のクラス名
[inner](string) = inner
敷き詰める要素と同じ高さにしたいクラス名
[scaleSplit](string) = _
要素一つの大きさを決める間の文字列(_x_y) デフォルトでは「square _2」で2倍のサイズ、 「square _1_2」で縦長の長方形になります
[size](number) = 150
正方形一つの基本サイズ
[space](number) = 10
正方形と正方形の間隔
[speed](*) = 700
アニメーションの速度 (slow, normal, fastの三段階、もしくはミリ秒)
[ease](string) = easeOutQuad
イージングの種類 (jQuery Easing Pluginが必要です)

サンプルコード

スタンダード

$(“a.sample01”).square();

正方形のサイズ変更

$(“a.sample02”).square({size:200});

アニメーション速度変更

$(“a.sample03″).square({speed:”fast”});