Как программно создать фоновую ячейку размером 20x20 пикселей? - PullRequest
Новая
       15

Как программно создать фоновую ячейку размером 20x20 пикселей?

0 голосов
/ 25 декабря 2009

Я пытаюсь построить сетку размером с окно браузера с квадратами 20x20 пикселей. Моя первая идея состояла в том, чтобы просто создать таблицу со следующим кодом, но IE8 (в любом режиме) не будет отображать ячейки, если у них нет содержимого, не являющегося пробелами. Согласно this , это будет, если у него есть  , но из моего тестирования, это работает, только если таблица находится в исходном DOM - не из javascript. 


dojo.ready(function(){
    var grid = dojo.byId("grid");
    var tr;
    for(var i=0; i<20; i++) {
        tr = dojo.create("tr", null, grid);
        for(var j=0; j<20; j++) {
            var td =dojo.create("td", {innerHTML: "&nbsp;"}, tr);
            dojo.style(td, {border: "solid", height: "20px", width: "20px"});
        }
    }
});
...
<table id="grid" style="border-collapse: collapse;"></table>

После того как я отказался от этого подхода, я решил попробовать библиотеку векторной графики google-closure - в принципе более подходящим решением было бы думать векторное рисование, поскольку таблицы не предназначены для этого ... Я получил его кроссбраузерно, но для сетка приличного размера (скажем, 1000x1000), время загрузки и использование памяти возмутительно. Я полагаю, он не был предназначен для этого: 


var graphics = goog.graphics.createGraphics(800, 800);
var path, stroke = new goog.graphics.Stroke(1, "gray");

for(var x=0; x<65; x++) {
 for(var y=0; y<65; y++) {
     path = new goog.graphics.Path();
     path.moveTo(0, y*20);
     path.lineTo(800, y*20);
     graphics.drawPath(path, stroke);

     path = new goog.graphics.Path();
     path.moveTo(x*20, 0);
     path.lineTo(x*20, 800);
     graphics.drawPath(path, stroke);
 }
}

graphics.render(document.byId("grid"));
...

Может быть, прагматичным решением было бы создать изображение размером 20x20 пикселей и многократно вставлять его?

Ответы [ 3 ]

1 голос
/ 25 декабря 2009

Иногда я делаю вещи трудным путем ...

body {background-image: url(grid-cell.png); background-repeat: repeat;}

^^

1 голос
/ 25 декабря 2009

Должно ли это быть программно? Потому что в качестве фонового изображения с разрешением 20x20 пикселей в формате GIF и линией справа и снизу все будет сделано за пять минут. Это кросс-браузер, и он работает на огромных площадях.

Редактировать: у вас была эта идея уже в конце вашего вопроса. Да, я думаю, что это самый простой способ.

0 голосов
/ 25 декабря 2009

Я не уверен, что библиотека dojo исправляет определенные проблемы IE с таблицами, когда вы создаете их динамически, но если нет, вам нужно будет добавить тег TBODY перед добавлением строк, иначе IE не удастся правильно визуализировать таблицу.

...