Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   динамическое создание элементов (https://javascript.ru/forum/events/10664-dinamicheskoe-sozdanie-ehlementov.html)

Маэстро 30.07.2010 13:56

Цитата:

Сообщение от Kolyaj
О да, и какая разница! При создании объёмного HTML кода DOM методами у вас такая неподдерживаемая каша в коде будет, мама не горюй.

Не понял, почему каша? Все созданные объекты хранятся либо в нумерованном массиве, либо в одном общем объекте, либо снабжаются уникальными именами (переменных).

Цитата:

Сообщение от Kolyaj
И то, и другое -- разметка.

Не хотелось бы вдаваться в глубокую философию, но...
По-моему, написание функций создания (DOM) объектов и управления ими - это программирование.
Что есть по-Вашему программирование? Написание функций сложения 2+3?

Kolyaj 30.07.2010 13:56

Цитата:

Сообщение от Маэстро
Очевидно что каждую ячейку надо снабдить своим id, каждый из которых будет вида "cell_xxx_yyy", где xxx-номер строки, а yyy-номер столбца.

Очевидно надо подучить DOM. table.rows[4].cells[29]

И вообще, доказывать общий случай ну очень частным как-то неправильно.

Kolyaj 30.07.2010 14:06

Цитата:

Сообщение от Маэстро
Не понял, почему каша?

Ну это вы, наверно, про таблицу всё. А вы попробуйте произвольную разметку посоздавать с дивами, с инлайн-элементами, с картинками. И что у вас получится.

Маэстро 30.07.2010 14:08

Цитата:

Сообщение от Kolyaj (Сообщение 65642)
Очевидно надо подучить DOM. table.rows[4].cells[29]

я знаю, что такое table.... rows ... cells
а также t.insertRow() ... r.insertCell()...
Пример с таблицей я привёл очень упрощённый. В задаче, с которой приходилось сталкиваться мне, объекты находились не в строго структурированной таблице, к которой можно было бы обратиться по номеру строки и столбца. Точнее, они могли представлять сразу группы объектов, которые в свою очередь содержали другие группы...

Маэстро 30.07.2010 14:15

Цитата:

Сообщение от Kolyaj (Сообщение 65649)
Ну это вы, наверно, про таблицу всё. А вы попробуйте произвольную разметку посоздавать с дивами, с инлайн-элементами, с картинками. И что у вас получится.

Пробовал. Вот: http://gigalit.com.ua

Kolyaj 30.07.2010 14:22

// создание wincontainer выше
wincontainer.innerHTML='<div class="videowin"  onmousedown="return GigDrag(event,this,'+wh+');"</div>';  // вся соль - в строке return... ;)
winobj=wincontainer.firstChild;
wincontainer.removeChild(winobj);
G.videowin=winobj;


if (bg0)                                                                        // фон 0
{
obj=d.createElement('div'); obj.className='vw0'; winobj.appendChild(obj);
G['videowinbg0']=obj;
}

if (bg1)
{
obj=d.createElement('div'); obj.className='vw1';
winobj.appendChild(obj);
G.videowinver=obj;
}


if (bg2)
{
obj=d.createElement('div'); obj.className='vw2';
winobj.appendChild(obj);
G.videowinhor=obj;
}


obj=d.createElement('div');                                                     // Tttle Window
obj.className='vw4';
obj.innerHTML=title;
if (title != '') obj.style.display='block';
winobj.appendChild(obj);
G.videowintitle=obj;


obj=d.createElement('div');                                                     // внутренняя часть окна
obj.className='vw5';
winobj.appendChild(obj);
G.videowininside=obj;


obj=d.createElement('div');                                                     // кнопка закрытия окна (vw6 for IE!)
obj.className='vw6';
 objclose=d.createElement('img');
 objclose.className='vw7';
 objclose.onclick=function() {closevideowin(wh);}
 objclose.align='right';
 objclose.src = 'close7.jpg';
 if (IE) objclose.style.marginRight=4;
obj.appendChild(objclose);
if (Fclose) obj.style.display='block';
winobj.appendChild(obj);
G.videowinclose=obj;


obj=d.createElement('img');                                                     // картинка "loading"
obj.className='vw8';
obj.src = 'loading42.gif';
  obj.id='videowinloading'+wh;
if (Floading) obj.style.display='block';
winobj.appendChild(obj);
G.videowinloading=obj;


G.NoMoveIn = [];
G.videowin = winobj;
d.body.appendChild(winobj);


Для поддержки вёрстки нужно понимать её структуру. Грубо говоря, понимать, какой html-код строит картинку на экране. Кто по данному коду может восстановить html-код?

Маэстро 30.07.2010 14:33

Цитата:

Сообщение от Kolyaj
Для поддержки вёрстки нужно понимать её структуру. Грубо говоря, понимать, какой html-код строит картинку на экране. Кто по данному коду может восстановить html-код?

1. Вы выхватили кусочек кода с главной страницы, который уже устарел, не очень удачный и был взят из другого старого проекта. бОльшая же часть js-кода лежит отдельно и подгружается по мере запуска пользователем разных функций. В подгружаемых модулях панели "конструируются" из отдельных готовых блоков (юнитов).
Например, вот так:
var s='<b>Шаг 1.</b> Выберите картинку из предложенного списка';
m.s1 = settextbgpanelunit(0,v,360,h, 'mcellbg','mtext', 10,5, s);
m.s1.container.onclick = step1;
p.appendChild(m.s1.container);

s='<b>Шаг 2.</b> Введите поздравительный текст';
m.s2 = settextbgpanelunit(0,v*2,360,h, 'mcellbg','mtext', 10,5, s);
m.s2.container.onclick = step2;
p.appendChild(m.s2.container);

s='<b>Шаг 3.</b> или выберите текст из предложенного списка';
m.s3 = settextbgpanelunit(0,v*3,360,h, 'mcellbg','mtext', 10,5, s);
m.s3.container.onclick = step3;
p.appendChild(m.s3.container);

s='<b>Шаг 4.</b> Определите шрифт текста, размер и цвет';
m.s4 = settextbgpanelunit(0,v*4,360,h, 'mcellbg','mtext', 10,5, s);
m.s4.container.onclick = step4;
p.appendChild(m.s4.container);

s='<b>Шаг 5.</b> Выберите музыкальное сопровождение';
m.s5 = settextbgpanelunit(0,v*5,360,h, 'mcellbg','mtext', 10,5, s);
m.s5.container.onclick = step5;
p.appendChild(m.s5.container);

s='<b>Шаг 6.</b> Добавьте прикольный смайлик к открытке';
m.s6 = settextbgpanelunit(0,v*6,360,h, 'mcellbg','mtext', 10,5, s);
m.s6.container.onclick = step6;
p.appendChild(m.s6.container);

s='<b>Шаг 7.</b> Введите адрес получателя открытки';
m.s7 = settextbgpanelunit(0,v*7,360,h, 'mcellbg','mtext', 10,5, s);
m.s7.container.onclick = step7;
p.appendChild(m.s7.container);


2. Если оочень грубо говоря, ;) то "Кто по данному коду может восстановить html-код" - пусть это Вас не беспокоит. Для этого есть люди. Да и зачем его восстанавливать?

Kolyaj 30.07.2010 14:39

Цитата:

Сообщение от Маэстро
Вы выхватили кусочек кода с главной страницы, который уже устарел и не очень удачный

Уж какой нашёл, и его-то не так просто было найти.

Вы не привели примера создания элементов.

Цитата:

Сообщение от Маэстро
Для этого есть люди.

Это они пока есть, пока проект горяченький, через полгода вы сами в этом коде ничего не разберёте. И не надо забывать про эффект грузовика.

Цитата:

Сообщение от Маэстро
Да и зачем его восстанавливать?

Если вёрстка "поплывёт", или её нужно будет чуть-чуть поменять, то для этого нужно представлять текущий html. А это сделать затруднительно.

Цитата:

Сообщение от Маэстро
пусть это Вас не беспокоит

Меня это не беспокоит.

x-yuri 30.07.2010 14:43

Цитата:

Сообщение от Маэстро
-привычка писать быстроработающий и кроссбраузерный код позволит в дальнейшем программисту накопить опыт и написать фреймворк. А мало ли... может и прийдётся...?

привычка искать узкие места позволит программисту в дальнейшем писать быстроработающий код

Цитата:

Сообщение от Маэстро
-речь идёт не об ускорении в 1 мс, а (грубо говоря) замедлении в 1 мс НА КАЖДЫЙ добавленный элемент. И если элементов на странице 1000, то, замедление хорошо заметно.

Цитата:

Сообщение от Маэстро
-покажу на моём примере с таблицей 100х100.

в том то и дело, что пример синтетический. Давайте сравним на реальном примере, вы ставите задачу, мы ее реализовываем и сравниваем результаты ;)

Маэстро 30.07.2010 15:23

Цитата:

Сообщение от x-yuri (Сообщение 65657)
в том то и дело, что пример синтетический. Давайте сравним на реальном примере, вы ставите задачу, мы ее реализовываем и сравниваем результаты ;)

Реальный пример я показать не могу, т.к. это закрытый сайт для логистических операций по управлению транспортными грузопотоками.
Но в некотором будущем, возможно, частично это будет выставлено на всеобщее пользование и будет представлять что-то вроде web-excell-таблиц. Надеюсь, что реализовывать будете бесплатно :)

Хотя, думаю, что Google, или Мicrosoft сделают это быстрее...


Часовой пояс GMT +3, время: 01:41.