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。保存部分可以通过对将信息保存到数据库的页面的 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>

您可以在以下位置找到更多信息并下载 jQuery：http: //jquery.com/

在填充所有单元格时创建新工作表的 jQuery 代码可以通过在 click 函数中进行一点检查来完成。此检查必须计算所有具有 bg 颜色的单元格，这与总单元格相同吗？然后通过删除所有单元格的 bg 颜色并设置新的 id 来创建一个新工作表。但是你可以自己解决这个问题；）。

于 2012-05-05T09:00:04.740 回答