Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как сделать окошко с возможностью изменения его содержимого? (https://javascript.ru/forum/dom-window/1385-kak-sdelat-okoshko-s-vozmozhnostyu-izmeneniya-ego-soderzhimogo.html)

nolka 07.07.2008 10:15

Как сделать окошко с возможностью изменения его содержимого?
 
приведу код своего класса окошка:
function MsgWnd(wndName,closeButtonEnabled)
{
	this.name=wndName;
    this.top=20;
    this.left=20;
    this.width;
    this.height;
    this.maxWidth=580;
    this.maxHeight;
    this.caption="";
    this.closeButtonEnabled=closeButtonEnabled;

    	this.main = create("div");
		this.main.className="container hiddenbox";
		this.main.setAttribute("id",this.name);
		this.main.setAttribute("name",this.name);

			this.closeh = create("div");
			this.closeh.className="title";
			this.closeh.style.textAlign="right";
			this.closeh.style.padding="1px";

			this.closeimg = create("img");
			this.closeimg.setAttribute("src","skin/loadbar.gif");
			if(this.closeButtonEnabled)
		{
			this.closeimg.setAttribute("src","skin/cn.png");
			this.closeimg.setAttribute("onMouseMove",'this.src="skin/ch.png"');
			this.closeimg.setAttribute("onMouseOut",'this.src="skin/cn.png"');
			this.closeimg.setAttribute("onClick","closeWnd('"+this.name+"');");
		}
			this.closeh.appendChild(this.closeimg);


		this.title = create("div");
		this.title.className="title fleft";
		this.title.setAttribute("onmousedown","dragStart(event, '"+this.name+"');");
		this.title.setAttribute("id","title");
		this.title.setAttribute("name","title");


		this.titlecontainer = create("div");
		this.titlecontainer.className="title";
		this.titlecontainer.appendChild(this.title);
		this.titlecontainer.appendChild(this.closeh);


		this.content = create("div");
		this.content.className="content";
		this.content.setAttribute("id","content");
		this.content.setAttribute("name","content");

    this.setTitle=function(text)
    {
    	this.caption=text;
    	this.title.innerHTML=this.caption;
    }

	this.show=function(text)
	{
		this.content.innerHTML=text;

		this.main.className="container";
		this.main.style.display="block";
		this.main.style.position="absolute";
		this.main.style.top=(document.body.clientHeight/2)-150;
		this.main.style.left=(document.body.clientWidth/2)-150;
		this.main.style.maxWidth=this.maxWidth;
		this.main.style.maxHeight=this.maxHeight;
		this.main.style.width=this.width;
		this.main.style.height=this.height;

		this.main.appendChild(this.titlecontainer);
		this.main.appendChild(this.content);


		document.getElementsByTagName("body")[0].appendChild(this.main);
	}

   	this.updateContent = function(content)
   	{
   		wnd=document.getElementById(this.name);
   		c=wnd.getElementById('content');
   		c.innerHTML='content';
   	}
}

как можно понять из всего этого кода, окошко выглядит очень просто.
создается див, в него вкладываются еще 2 дива:
1 - заголовок
2 - тело окошка, в котором отобрадаем какой либо контент.

с жабоскриптом знакомиться основательно начал совсем недавно, поэтому я заглох на методе this.updateContent. Помогите пожалуйста довести до ума, чтобы после создания окошка можно было менять его содержимое?

создаю окошко вот так:
function ShowMessage(title,text)
{
	wnd = new MsgWnd("messageWnd"+Math.random(999),true);
	wnd.setTitle(title);
	wnd.show(text);
	return wnd.name;
}

т.е. после создания окошка у меня есть ссылка, по которой можно выцепить главный див.

вот так вывожу какое либо сообщение в окошке:
imgUploaderWnd=ShowMessage('Информация','тестовое сообщение');


но при попытке выполнить такой код:
imgUploaderWnd.updateContent('yjdjt cjlth;bvjt');


вылазит ошибка: imgUploaderWnd.updateContent is not a function

помогите пожалуйста кто чем может.. может быть я с классом намудрил чего то?

Андрей Параничев 07.07.2008 13:11

У вас функция ShowMessage возвращает wnd.name, т.е imgUploaderWnd хранит в себе эту строковую переменную. А вы хотите из неё вызвать updateContent. Попробуйте возвращать просто wnd.

nolka 10.07.2008 08:22

как же я этого сам не заметил!? :)
спасибо, помогло.

теперь другая проблема.
вот так создаю окошко:
//windowsCounter - простая переменная-счетчик, чтобы нельзя было создать 2 окна с одинаковым именем.
function ShowMessage(title,text)
{
    wnd = new MsgWnd("Wnd_"+windowsCounter,true);
    wnd.setTitle(title);
    wnd.show(text);
    windowsCounter++;
    return wnd;
}


в классе MsgWnd определил новый метод:
this.close = function()
    {
        //алерт для проверки работоспособности метода
        alert(this.name);
        var olddiv = document.getElementById(this.name);
        // fatbody - это id тега <body>
        document.getElementById("fatbody").removeChild(olddiv);
    }

а событие кнопки закрытия окошка изменил вот на это:
this.closeimg.setAttribute("onClick",this.name+'.close()');


Если окошко создаю вот так:
message=ShowMessage('Загрузчик шрифтов',response);


то код
message.close();

срабатывает без проблем, но если в открывшемся окошке нажать на крестик - т.е. кнопку закрытия окошка, то вываливаются ошибки:
Код:

Элемент доступен по идентификатору/имени в глобальной области видимости. Используйте вместо этого соответствующий стандарту W3C метод document.getElementById().
Wnd_0.close is not a function

где я опять что то пропустил?
я так полагаю, что ошибка в коде кнопки, но что туда писать - я не знаю :(


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