私のページ上に小さな小さな箱（例えば、2ピクセルの高さと幅、または2x2）で構成されるグリッドを作成したいと思います。私の最良の選択肢をこれまで 私のページのグリッドルックを作成する最も効率的な方法
残念ながら、私の最高の選択肢でさえ非常に遅かったです。効率のよい方法で小さな四角形で構成されたグリッドを作成する方法について誰かがより良い計画を持っていますか？
これが私の作品（grid.gifが国境と3×3で、作業バージョンのためhttp://stuff.drnet.at/stackoverflow/grid/を参照してください）：FF &クローム（両方のUbuntuの明晰上）のみでテストされて
<html><head>
<script language="JavaScript">
function mm (e) {
if (!e) e=window.Event;
var o=document.getElementById('grid');
var x=e.clientX-o.offsetLeft;
var y=e.clientY-o.offsetTop;
document.getElementById('coords').innerHTML=''+x+'/'+y;
}
</script>
</head>
<body onload="document.getElementById('grid').onmousemove=mm;">
<div id="grid" style="position:absolute; left:10px; top:10px; width:800px; height:600px; background: url(grid.gif) repeat left top; border:1px solid black; padding:0px; margin:0px;"></div>
<div id="coords" style="position:absolute; left:10px; top:620px;"></div>
</body>
</html>
が、アイデアは動作するはずです。ここで
まず、きれいに書かれたコードに感謝します。残念ながら、私はそこにグリッドを選択してドラッグするなどの方法があることを望んでいます。この理由から、上記のゲームは、私の最高の賭けになるようです –
それは私を盲目にします。 – Indranil
2x2グリッドでは、データを表示しないことを確認しています。あなたがいても、私はそれが各グリッドボックスの内側にないと思う。
それで、あなたは2×2（または1つのピクセルの境界線と3×3）を作成する必要があり、画像イメージプログラムでは、あなたが「グリッドIFY」とdivのbackground
.gridify {
background: url(image/grid.jpg) repeat left top;
}
divを作成
ここで、gridifyはdiv/span /のクラスです。
今
さらに編集、あなたが地域を選択する]をクリックしてドラッグしますから、何を行うことができますすることは.gridifyのdivの上にdiv要素を作成し、新しい「clicked-を与えることtry thisですドラッグされた "divは暗くて透明な背景...それは選択されているボックスの錯覚を与えるでしょう。
は、グリッドをプリントアウトするために少しPHPです：
<?php
$size = 5;
$total = 100;
?>
<html>
<head>
<style>
.box {
width:<?php echo $size; ?>px;
height:<?php echo $size; ?>px;
float:left;
}
.black {
background-color:black;
}
.white {
background-color:white;
}
</style>
</head>
<body>
<?php
echo "<div style='width:{$total}px;height:{$total}px;'>\n";
$start_color = true;
for($i = 1; $i <= floor($total/$size); $i++) {
$start_color =! $start_color;
$current_color = $start_color;
for($j = 1; $j <= floor($total/$size); $j++) {
echo "<span class='box ".(($current_color) ? 'black' : 'white')."' id='box_{$i}_{$j}'></span>\n";
$current_color =! $current_color;
}
}
echo "</div>";
?>
</body>
</html>
これを実行すると、私の好みにあまりにも非効率的です –
これは問題です：PHPのループで作成するには "あまりにも効率が悪い" たとえば、2x2ピクセルの800x800グリッドの場合、400x400 = 163,840,000個の個々のHTML要素がありますが、これは実際の用途にはあまりにも多く、あまりにも単純なものそれぞれにmouseOverイベントがあり、どのブラウザもbarfになります。 – LAW
あなたは石工jQueryプラグインを見てみることができます。不幸なことに、グリッドレイアウトを再配置してアニメーション化し、2次元レイアウトを印刷しないことが目標ですが、おそらくそれが役に立ちます。また、ブリックやセルごとに関数を定義することもできます。アルゴリズムはビンパッキングと似ています。
このグリッドは何ですか？どのグリッドが使用されるべきかを知ることは多くの助けになるでしょう。 – cdeszaq
グリッドの目的は何ですか - データビュー、美学、...？私はその目的がソリューションにおいてかなりの役割を果たすように感じています。 –
美学だけのためのものであれば、私はPhotoshopまたは同様のイメージプログラムを強く提案します。 – Oranges13