Javascript学习第二季（实战4）
上章的例子虽然实现了功能,也做了相应的判断，也符合标准了。但还有一个问题就是： 
点击下载此文件
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
在html中只是为了图片切换 而做的，而没其他的用途。所以我们不必把他直接写在html中，而是可以用js--DOM方法动态去创建html，从来达到再次简化html。
思路:
1， 把html中的
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
删除。然后用dom方法 在js中创建。
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
var placeholder = document.createElement("img");//创建元素节点
placeholder.setAttribute("id","placeholder");//创建属性，设置属性
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");//创建文本节点
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
document.getElementsByTagName("body")[0].appendChild(placeholder);
// 这样添加 。默认是添加到文档的最后。
document.getElementsByTagName("body")[0].appendChild(description);
//如果想添加在其他地方， 可以 使用 insertBefore()
}
好了，我们来看看完整的代码..
Demo1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript">
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
/*
这个例子 相对 gallery2.html 有了重大变化。
我去掉了HTML中的预览图片和title。 而改用在 js中动态创建。
*/
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
var placeholder = document.createElement("img");//创建元素节点
placeholder.setAttribute("id","placeholder");//创建属性，设置属性
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");//创建文本节点
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
document.getElementsByTagName("body")[0].appendChild(placeholder);
// 这样添加 。默认是添加到文档的最后。
document.getElementsByTagName("body")[0].appendChild(description);
//如果想添加在其他地方， 可以使用insertBefore()
}
window.onload = function(){
preparePlaceholder(); //动态创建 html .
prepareGallery();
}
</script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >
<img src="images/thumbnail_coffee.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">
<img src="images/thumbnail_rose.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">
<img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
</a>
</li>
</ul>
</body>
</html>
好了，一个完美的javascript图片馆出炉了。
(注：实战4 - demo2 有点小变化，可以参考参考。)
兴奋吧。。。
做程序就是要的这种感觉。
图片馆做完了，我们也许需要总结下。加深印象。
不过这是明天的事情，今天我们去外面走走，透透气 ，运动运动。
毕竟身体是革命的本钱。。。^_^。
打篮球去了，今天写到这里，明天我们总结下，这几天写 这个图片馆 中一些要点。
关于本站 - 免责声明 - 友情链接 - 提点建议 - 联系我们 - 链接纠错 - 广告投放
Copyright © 2008 All rights reserved.