1

番号付きグリッドを作成したいのですが、ユーザーが番号を入力すると、グリッドが生成されます。CSS、HTML、または Jquery Mobile で実行したいと考えています。これはiPadプロジェクト用です。問題にアプローチする方法がわかりません。次の結果が欲しいです。 自動生成された番号付きグリッド

現在のところ、ページ全体にグリッド イメージを繰り返す div があります。背景ごとに画像を再生成する必要があります。つまり、ユーザーは 40X60 フィートの領域を望んでおり、40X60 の画像を生成する必要があります。(100px=グリッド上で 5 フィート) ユーザーに 2 つの数値を入力してもらい、グリッドと数値を自動生成させたいと思います。

<div style="background-image:url(/images/linegrid100.png);
width:980px;height:700px;
border:1px solid black;padding:10px;">

私はかなりの数のグリッドジェネレーターを見てきました。画像ではなく表を使用することを考えました。そのほうがいいでしょうか？数を生成するための数学にどのようにアプローチすればよいですか? これはすべてかなり簡単なようですが、多くの情報が見つかりません。(数日間ググってみました) この種のグリッドは、グラフィックス プログラムや CAD プログラムで常に行われています。

どんな助けでも大歓迎です。

TIA-レイチェル

わかった。これがコードの結果です。実行中です:-)が、期待どおりではありません。私は一日中コードを扱ってきました。今ではもっと理にかなっていますが、ループと数学でまだ迷っています。何か案は？助けてくれてとてもうれしいし、これは楽しい。もう一度ありがとう -R

物事に影響を与えると思われるコードは次のとおりです。

w = parseInt($square.css('width'), 10) + 2; //the width of each square + 2 pixels for the borders;

あなたが持っているのと同じように残しておくと： ここに画像の説明を入力

10 を 100 に変更すると、次のようになります。

ここに画像の説明を入力

4

1 に答える 1

3

ユーザーが 2 つの数字を入力する次のフォームがあるとします。

<form>
    <input type="text" id="x">
    <input type="text" id="y">
</form>

次に、次のように jQuery を使用してグリッドを生成できます。

var x = parseInt($('#x').val(), 10),
    y = parseInt($('#y').val(), 10);

grid(x, y);

function grid(x, y) {
   var i = -1,
       j = -1,
       step = 5, //assuming that each grid unit = 5
       $grid = $('<div>', {'id':'grid'}),
       $square = $('<div>', {'class':'square'}),
       $label,
       w = parseInt($square.css('width'), 10) + 2; //the width of each square + 2 pixels for the borders;

  $grid.width(w * x);

  while(++i < x) {
       while(++j < y) {
        if(j === 0) {
        $label = $('<span>', {'class':'label'});
        $label.css('top', j * w).css('left', i * w).html(i * step);
        }
        if(i === 0 && j > 0) {
            $label = $('<span>', {'class':'label'});
        $label.css('top', j * w).css('left', i * w).html(j * step);
            }
            $grid.append($square.clone(), $label);
       }
       j = -1;
  }
  $('body').append($grid);
}

CSS:

#grid { overflow: hidden; border-left: 1px solid #000; border-top: 1px solid #000; position: relative; }
div.square { width: 50px; height: 50px; float: left; border-bottom: 1px dotted #000; border-right: 1px dotted #000; }
span.label { position: absolute; background: #fff; font-weight: bold; z-index: 10; }

ここにオーバーレイ（ダイアログボックス）があるとしましょう：

<div>
    <input type="text" id="x">
    <input type="text" id="y">
    <button id="build-grid" type="button">Build grid</button>
</div>

次に、onclick イベントを build-grid ボタンにアタッチします。そのため、ボタンがクリックされると、x 値と y 値を読み取り、グリッドを構築します。

$('#build-grid').on('click', function(e){
   e.preventDefault();
   var x = parseInt($('#x').val(), 10), //get our values from the input fields
       y = parseInt($('#y').val(), 10);

   grid(x, y); // build the grid
});
于 2013-01-15T04:13:36.187 に答える