FC2ブログ

jQueryを使って、9個のボックスを3×3に配置

以下のようなページを作ろうと考えた。
「複数のボックスがあり、ボックスが一つずつ点滅する。
ボックスが点滅した順番にクリックすると点数が入る」
昔こんな記憶力ゲームがあったなぁと思って。

とりあえず、ボックスを9個、3×3に配置することにした。
やりかたの候補は以下の3つ。

・テーブルを使って配置
display: table; display: table-row; display: table-cell;
border-collapse: separate; border-spacing: 3px;
あたりを使う。

・floatを使って配置
float: left; clear: left;
margin-left: 3px; margin-top: 3px;
あたりを使う。

・positionを使って配置
position: absolute;
top: なんたらpx; left なんたらpx;
あたりを使う。

jQueryを使わずに、手打ちでHTMLとCSSを組んでやってみたところ、
テーブルもfloatも、行が変わるごとに display: table-row; や clear: left; を入れるのが何か気に入らない。
あと、テーブルもfloatもレイアウトの自由度が低い。
というわけで、positionを採用。

例によってHTMLには
<div class="main"></div>
だけ記述して、jQueryでボックスを配置した。

CSSは以下のとおり。
/* 背景 */
.main {
  display: block;
  border-style: solid;
  border-width: 1px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

/* ボックス */
.box {
  display: block;
  border-style: solid;
  position: absolute;
}

JavaScriptのソースコードは以下のようになった。
当然と言えば当然なのだが、処理のほとんどがtopとleftの値を求める処理だ。
(function($) {
/* 定数 */
var aconst = {
  boxsidenum: 3,  // boxの一辺の個数 3x3
  boxwidth: 100,  // boxノードの width と height
  boxmargine: 3,  // boxノードの上左マージン
  boxbordwdh: 1  // boxノードの線の太さ
}
var boxcolord = new Array(略);  // boxの色

/* boxの行番号と列番号を求める
* boxnum boxの番号(1からの連番)
* return {raw: 行番号, col: 列番号}
*/
var getposition = function(boxnum){
  var rtnobj = {raw: 0, col: 0};
  if(isNaN(boxnum)){return rtnobj;}
  rtnobj.raw = Math.floor((boxnum -1) / aconst.boxsidenum) + 1;
  var remainder = boxnum % aconst.boxsidenum;
  if (remainder == 0){
    rtnobj.col = aconst.boxsidenum;
  }else{
    rtnobj.col = remainder;
  }
  return rtnobj;
};

$(document).ready(function() {
  // 親ノードを作成
  var $div = $("div.main:first");  // 親ノード
  var mainwidth;  // 親ノードの width と height
  mainwidth = aconst.boxsidenum * (aconst.boxwidth + aconst.boxmargine + aconst.boxbordwdh * 2) + aconst.boxmargine;
  $div.css({"width": mainwidth + "px", "height": mainwidth + "px"});
      
  // boxノードを作成
  var $box;  // boxノード
  var boxnum = aconst.boxsidenum * aconst.boxsidenum;  // boxの個数
  var boxposition;  // ボックスの行番号と列番号 {raw: 行番号, col: 列番号}
  var topval,leftval;  // boxノードのtopとleftの値
  for(var i = 0; i < boxnum; i++){
    $box = $("<div/>").addClass("box");
    boxposition = getposition(i+1);
    topval = (boxposition.raw -1) * (aconst.boxwidth + aconst.boxmargine + aconst.boxbordwdh * 2) + aconst.boxmargine;
    leftval = (boxposition.col -1) * (aconst.boxwidth + aconst.boxmargine + aconst.boxbordwdh * 2) + aconst.boxmargine;
    $box.css({"backgroundColor": boxcolord[i],
        "width": aconst.boxwidth + "px", "height": aconst.boxwidth + "px",
        "borderWidth": aconst.boxbordwdh + "px",
        "top": topval + "px", "left": leftval + "px"});
    $div.append($box);
  }
});

})(jQuery);
うわ、同名の変数boxnumを別の意味で使ってる。

これだけのことをやるのに1時間半かかりました。明日はどこまでできるかな。
スポンサーサイト



コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター