DIV и JavaScript

qwertyuiop · 09 сен 2005, 11:58

Нужно сделать следующее :

-----------------------------------------
Написать на javascript object Box, который создает новый DIV на странице. DIV должен иметь:
1. absolute position
2. фон цвета #eeeeee;
3. padding 5px;

Box(bodyText, width, height, left, top)

bodyText - текст внутри DIV'а
width - ширина
height - высота
left - позиция от левого края
top - позиция от верхнего края

У Box'а должен быть один method: Box.moveBox(left, top)
left - новая позиция от левого края
top - новая позиция от правого края

Пример использования Box'а:
var myBox = new Box("some text", 200, 300, 100, 500);
создает новый DIV на странице с заданным текстом внутри, шириной в 200px, высотой 300px, 100px от левой границы окна и 500px от верхней.

Количество Box'ов не ограничено.

myBox.moveBox(100, 120);
перемещает DIV на новую позицию 100px от левого края и 120px от верхнего.
!!! Важно: нельзя использовать document.write и innerHTML
---------------------------------------------------

Я делаю так :
-------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Task test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">

</style>
</head>
<body>

</body>
</html>
<script type="text/javascript">

</script>
-------------------------------------

Что нужно ещё доделать или переделать,что б это всё заработало???
Помогите плиз!!!

09 сен 2005, 15:04

А зачем?
По идее, наверное можно добавить элемент в DOM, но по смыслу это то же самое, что и через innerHTML.

qwertyuiop · 13 сен 2005, 11:05

Если кому не лень помочь,буду очень благодарен.....!!!

Imhotep · 17 сен 2005, 23:17

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title>Task test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<style type="text/css"> 
<!-- 
#Box {position:absolute; color:#eeeeee; padding:5px;} 
--> 
</style>
<script language="JavaScript" type="text/javascript"> 
<!-- 
function Box(bodyText, width, height, left, top) 
{ 
this.bodyText = bodyText; 
this.width = width; 
this.height = height; 
this.left = left; 
this.top = top; 
this.moveBox = moveBox; 

var div = document.createElement("div");
var bod=document.getElementsByTagName('body')[0]
bod.appendChild(div) 

//div.insertAdjacentText("afterBegin", bodyText);
bodyText=document.createTextNode(bodyText)
div.appendChild(bodyText) 
div.style.width = width; 
div.style.height = height; 
div.style.left = left; 
div.style.top = top; 

} 

function moveBox(left, top) 
{ 
this.left = left; 
this.top = top; 
} 

function create_box(){
var myBox = new Box("some text", 200, 300, 100, 500);
} 

--> 
</script> 
</head> 
<body onLoad="create_box()"> 


</body> 
</html>

//DTD HTML 4.0 , а не DTD HTML 4.01! Это важно.

Imhotep · 19 сен 2005, 22:49

Прошу прощения за небрежность!

ops: Только сейчас заметил недоделки! Размещаю полностью отлаженный код:

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title>Task test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<style type="text/css"> 
<!-- 
#Box {position:absolute; color:#eeeeee; padding:5px;} 
--> 
</style>
<script language="JavaScript" type="text/javascript"> 
<!-- 
function Box(bodyText, width, height, left, top) 
{ 
var div = document.createElement("div");
var bod=document.getElementsByTagName('body')[0]
bod.appendChild(div) 

bodyText=document.createTextNode(bodyText)
div.appendChild(bodyText)
div.style.position='absolute' 
div.style.width = width; 
div.style.height = height; 
div.style.left = left; 
div.style.top = top;

this.bodyText = bodyText
this.pointer=div
this.moveBox=function(left, top){
 this.pointer.style.left = left 
 this.pointer.style.top = top
 }
} 

function create_box(){
var myBox = new Box("some text", 200, 300, 100, 500);
myBox.moveBox(1000,100)
}
--> 
</script> 
</head> 
<body onLoad="create_box()">

</body> 
</html>

qwertyuiop, если возникнут еще вопросы, пиши.

qwertyuiop · 21 сен 2005, 09:58

Спасибо, Imhotep, попробовал...всё заработало теперь на ура!!!
Вопросов нет...разобрался..Всё понятно!!!
Ещё разок спасибо!!!