0

方眼紙の画像を保持するページを設定しようとしています。これらのグリッドは選択でき、ユーザーが選択したリンクのタイプに応じて、色が塗りつぶされて保存されます。すべてのブロックが満たされると、これはアーカイブされ、新しいシートが表示されます。バックエンドで PHP / MySQL を使いたいと思っていましたが、クライアント側で何が良いのか疑問に思っていました。

4

1 に答える 1

0

なぜグリッドの画像なのですか? より良い解決策は、テーブルまたは div で満たされたリストを使用してグリッドを作成することです。次に、jQuery を使用して、ユーザーがリンクをクリックしたときに背景を塗りつぶします。

グリッドの例:

<ul id="grid">
    <li>
        <div class="cell" id="cell_id"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </li>
    <li>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </li>
    ...
</ul>

CSS の例:

<style>
    #grid {
        list-style: none;
    }

    #grid li {
        height: 50px;
    }

    #grid .cell {
        float: left;
        width: 100px;
        height: 50px;
        border: 1px solid black;
    }
</style>

最後に、ユーザーがリンクをクリックしたときに jQuery を使用してセルを埋めます。行とセルを計算するか、セルにIDを与えるだけでセルを見つけることができます。保存部分は、情報を DB に保存するページへの AJAX 呼び出しによって実行できます。

簡単な jQuery の例 (残りは自分で考える必要があります):

<script>
    $('link').click(function() {
        //place check for new sheet here 

        var id = $(this).attr('id');

        //set the bg color
        $('cell_id').css('background-color', 'red'); //or color code #FF0000

        //save the info
        $.post('save_info.php', { cell_id: id, color: "red" }, function(data) {
             alert('saved!');
        });
    });
</script>

詳細については、http: //jquery.com/で jQuery をダウンロードしてください。

すべてのセルが入力されたときに新しいシートを作成する jQuery コードは、クリック機能を少しチェックするだけで実行できます。このチェックでは、背景色を持つすべてのセルをカウントする必要があります。これはセルの総数と同じですか? 次に、背景色のすべてのセルを削除し、新しい ID を設定して、新しいシートを作成します。しかし、これは自分で理解できます;)。

于 2012-05-05T09:00:04.740 に答える