Как вы можете добавлять элемент в DOM, который все еще знает, какой экземпляр объекта создал его, чтобы он мог ссылаться на класс позже?
В основном следующий код должен позволить вам добавить один или несколько фотоальбомов на страницу, где Javascript генерирует все необходимые элементы DOM.
т.е. в следующем примере кода потребуется всего пять строк кода (поверх включений) - HTML и три строки инициализации JS.
Если я добавлю кнопку с событием onclick pa.fwd(), она будет перенаправлена на правильный элемент, но, очевидно, я не знаю, какой будет переменная "pa". Я пробовал this - бесполезно, так как он предпочитает div, на который я нажимаю. Я пробовал parent, опять же бесполезно, так как он путешествует по DOM.
(т. Е. Что мне нужно поместить в строку next_btn.onclick, чтобы он выполнял pa.fwd() во время выполнения или pa2.fwd() или fotos.fwd() в зависимости от родительской переменной?)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photo Album Demo</title>
<style type="text/css">
/* CSS Style Declarations */
</style>
<script type="text/javascript">
// <![CDATA[
// Noddy Functions
function showDiv(divname)
{
document.getElementById(divname).style.display = "block";
document.getElementById(divname).style.visibility = "visible";
}
function hideDiv(divname)
{
document.getElementById(divname).style.display = "none";
document.getElementById(divname).style.visibility = "hidden";
}
/* -- [[ Photo Album Class ]] -- */
var kjsPhotoAlbum_prev_button = "/libs/prev.png";
var kjsPhotoAlbum_next_button = "/libs/next.png";
function kjsPhotoAlbum(_container_id,_width,_height)
{
var photos = new Array();
var width = _width;
var height = _height;
var parent_container = _container_id;
var imageCache = new Array();
var photo_index = 0;
var obj = function(id) { return document.getElementById(id); }
this.addPhoto = function(_filename,_caption)
{
photos[photos.length] = new Object({fn:_filename,c:_caption});
imageCache[photos.length-1] = new Image();
imageCache[photos.length-1].src = _filename;
}
this.initalise = function()
{
obj(parent_container).className = 'kjsPhotoAlbum';
obj(parent_container).style.width = width + "px";
obj(parent_container).style.height = height + "px";
var caption_bar = document.createElement("div");
caption_bar.id = parent_container + "_caption";
caption_bar.className = 'kjsPhotoAlbumCaption';
caption_bar.style.position = "absolute";
document.getElementById(parent_container).appendChild(caption_bar);
var image_box = document.createElement("img");
image_box.id = parent_container + "_image";
image_box.className = 'kjsPhotoAlbumImage';
image_box.style.position = "absolute";
image_box.src = '/libs/1px.gif';
document.getElementById(parent_container).appendChild(image_box);
var next_btn = document.createElement("div");
next_btn.id = parent_container + "_next";
next_btn.className = 'kjsPhotoAlbumNext';
next_btn.style.position = "absolute";
next_btn.onmousemove = function(e) { showDiv(parent_container + "_next_image"); }
next_btn.onmouseout = function(e) { hideDiv(parent_container + "_next_image"); }
next_btn.onclick = function(e) { this.fwd(); }
/* HOW DO I GET THIS TO KNOW THAT IT WAS GENERATED FROM THE PA */
document.getElementById(parent_container).appendChild(next_btn);
var next_btn_img = document.createElement("img");
next_btn_img.id = parent_container + "_next_image";
next_btn_img.className = 'kjsPhotoAlbumNextImage';
next_btn_img.style.position = "absolute";
next_btn_img.src = kjsPhotoAlbum_next_button;
document.getElementById(next_btn.id).appendChild(next_btn_img);
var prev_btn = document.createElement("div");
prev_btn.id = parent_container + "_prev";
prev_btn.className = 'kjsPhotoAlbumPrev';
prev_btn.style.position = "absolute";
document.getElementById(parent_container).appendChild(prev_btn);
var prev_btn_img = document.createElement("img");
prev_btn_img.id = parent_container + "_prev_image";
prev_btn_img.className = 'kjsPhotoAlbumPrevImage';
prev_btn_img.style.position = "absolute";
prev_btn_img.src = kjsPhotoAlbum_prev_button;
document.getElementById(prev_btn.id).appendChild(prev_btn_img);
}
this.play = function()
{
if (photos.length > 0)
{
this.show(0);
}
else
{
alert("Unable to play, no photos exist");
}
}
this.resizeImage =function(idx)
{
var ratio = 1;
var new_w = width;
var new_h = height;
var src_w = imageCache[idx].width;
var src_h = imageCache[idx].height;
ratio = Math.min( new_w / src_w, new_h / src_h );
new_w = ratio * src_w;
new_h = ratio * src_h;
obj(parent_container + "_image").style.width = new_w + "px";
obj(parent_container + "_image").style.height = new_h + "px";
obj(parent_container + "_image").style.marginLeft = (0-(new_w/2)) + "px";
obj(parent_container + "_image").style.marginTop = (0-(new_h/2)) + "px";
}
this.show = function()
{
obj(parent_container + "_image").src = photos[photo_index].fn;
obj(parent_container + "_caption").innerHTML = "<span>" + photos[photo_index].c + "</span>";
this.resizeImage(photo_index);
}
this.fwd = function()
{
if (photo_index < photos.length)
{
photo_index++;
this.show(photo_index);
}
}
this.initalise();
}
/* -- [[ End Class ]] ---------------------------------------------------- */
var pa;
function init()
{
pa = new kjsPhotoAlbum('PhotoAlbum',800,500);
pa.addPhoto("/libs/1.jpg","Caption 1");
pa.addPhoto("/libs/2.jpg","Caption 2");
pa.addPhoto("/libs/3.jpg","Caption 3");
pa.addPhoto("/libs/4.jpg","Caption 4");
pa.addPhoto("/libs/5.jpg","Caption 5");
}
// ]]>
</script>
</head>
<body onload="init()">
<div id="PhotoAlbum"></div>
</body>
</html>