tilamic.jsの使い方その２・コンストラクタのオプション

tilamicjs Javascript

先日のtilamic.jsの使い方その１・オブジェクトの作成と基本の回転に続き、tilamic.jsの使い方解説です。

この記事ではインスタンス作成時のコンストラクタのオプションについて紹介します。
この記事の内容はtilamic.js Constructor Optionsとほぼ同じです。

rows

'rows'はタイルを縦方向に何行設置するかを指定するオプションです。

デフォルト: 3
型: 整数
cols

'cols'はタイルを横方向に何列設置するかを指定するオプションです。

デフォルト: 3
型: 整数

つまりタイルの合計が何枚になるかは'rows'と'cols'の積で決まります。(デフォルトならば3*3=9枚)
タイルの枚数は処理の負荷に直結しますので多くしすぎないようにしてください。

attrPrefix

'attrPrefix'はtilamic.jsが使用するHTMLのクラス属性に付与するプリフィクスを指定します。tilami.jsが使用するクラス名は通常でも'tilamic'の文字列を含むので名前が衝突することはないと思いますが、コーディングルール等でプリフィクスを指定する必要がある場合に使います。

デフォルト:'' (空文字列)
型: 文字列
aspectRatio

'aspectRatio'はコンテンツの横幅に対する縦の長さの比率です。縦横両方をCSSで指定することもできますが、ウィンドウサイズが変化した際に自動で縦横比を維持したままコンテンツの大きさを変えるタイプのレスポンシブデザインを採用する場合にはCSSで縦の長さを指定するのではなくこのオプションを使用します。

デフォルト: null
型: 小数点型
isCSS3Supported

'isCSS3Supported'はブラウザのCSS3サポート状況に応じた動作を強制指定するオプションです。この値がtrueであればCSS3を用いたタイルの回転の動作が行われ、falseであればCSS3未対応ブラウザ向けの代替動作を行います。通常このオプションは自動でブラウザに応じた適切な値に設定されますので手動で設定する必要はありません。
コンテンツの開発中などCSS3対応のブラウザで未対応ブラウザの動作を確認したい場合にfalseに設定してシミュレートするといった使い方ができます。

デフォルト: CSS3の必要な機能をサポートするブラウザであればtrue、そうでなければfalse
型: ブーリアン

以上がコンストラクタで指定できるオプションです。'attrPrefix'と'isCSS3Supported'以外のオプションを指定した様子はtilamic.jsのトップのデモで確認いただけます。
次回の記事ではメソッドをご紹介したいと思います。