//com
function addLoadEvent (func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function(){
oldonload();
func();
}
}
}
function insertAfter (newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
}else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function addClass (element,value) {
if(!element.className){
element.className = value;
} else{
newClassName = element.className;
newClassName += "";
newClassName +=value;
element.className = newClassName;
}
}
function highlightPage () {
if (!document.getElementsByTagName) { return false; }
if (!document.getElementById) return false;
var headers = document.getElementsByTagName('header');
var navs = headers[0].getElementsByTagName('nav');
var links = navs[0].getElementsByTagName('a');
var linkurl;
for (var i = 0; i < links.length; i++) {
linkurl = links[i].getAttribute("href");
if (window.location.href.indexOf(linkurl) != -1) {
addClass(links[i],"here");
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id", linktext);
}
}
}
//home
function moveElement (elementID,final_x,final_y,interval) {
if (!document.getElementById) { return false; }
if (!document.getElementById(elementID)) { return false; }
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left, 10);
var ypos = parseInt(elem.style.top, 10);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x-xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos-final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y-ypos)/10);
ypos = ypos+dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos-final_y)/10);
ypos = ypos-dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function prepareSlideshow () {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("intro")) return false;
var intro = document.getElementById('intro');
var slideshow = document.createElement("div");
slideshow.setAttribute("id", "slideshow");
var frame = document.createElement("img");
frame.setAttribute("src", "images/frame.gif");
frame.setAttribute("id", "frame");
slideshow.appendChild(frame);
var preview = document.createElement("img");
preview.setAttribute("src", "images/slideshow.gif");
preview.setAttribute("alt", 'which you');
preview.setAttribute("id", "preview");
slideshow.appendChild(preview);
insertAfter(slideshow,intro);
var links = document.getElementsByTagName("a");
var destination;
for (var i = 0; i < links.length; i++) {
links[i].onmouseover = function () {
destination = this.getAttribute("href");
if (destination.indexOf("index.html") != -1) {
moveElement("preview",0,0,5);
}
if (destination.indexOf("about.html") != -1) {
moveElement("preview",-150,0,5);
}
if (destination.indexOf("photos.html") != -1) {
moveElement("preview",-300,0,5);
}
if (destination.indexOf("live.html") != -1) {
moveElement("preview",-450,0,5);
}
if (destination.indexOf("contact.html") != -1) {
moveElement("preview",-600,0,5);
}
}
}
}
// About
function showSection (id) {
var sections = document.getElementsByTagName("section");
for (var i = 0; i < sections.length; i++) {
if (sections[i].getAttribute('id') != id) {
sections[i].style.display = "none";
} else {
sections[i].style.display = "block";
}
}
}
function prepareInternalnav () {
if(!document.getElementById) {
return false;
}
if(!document.getElementsByTagName){
return false;
}
var articles = document.getElementsByTagName("article");
if (articles.length === 0) { return false;}
var navs = articles[0].getElementsByTagName("nav");
if (navs.length === 0) { return false;}
var links = navs[0].getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var sectionId = links[i].getAttribute("href").split("#")[1];
if (!document.getElementById(sectionId)) { continue;}
document.getElementById(sectionId).style.display = "none";
links[i].destination = sectionId;
links[i].onclick = function () {
showSection(this.destination);
return false;
}
}
}
//photos
function showPic (whichpic) {
if (!document.getElementById('placeholder')) { return false; }
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
if (!document.getElementById('description')) { return false;}
var whictit = whichpic.getAttribute("title");
if(whictit){
var text = whictit;
}else {
var text = "";
}
var description = document.getElementById('description');
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
function preparePlaceholder () {
if (!document.createElement) { return false;}
if (!document.createTextNode) {return false;}
if (!document.getElementById) {return false;}
if (!document.getElementById('imagegallery')) {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 destxt = document.createTextNode("Choose an image");
description.appendChild(destxt);
var gallery = document.getElementById('imagegallery');
insertAfter(description,gallery);
insertAfter(placeholder,description);
}
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);
}
}
}
//live
function stripeTables () {
if (!document.getElementsByTagName) { return false;}
var tabs = document.getElementsByTagName('table');
for (var i = 0; i < tabs.length; i++) {
var odd = false;
var trs = tabs[i].getElementsByTagName("tr");
for (var j = 0; j < trs.length; j++) {
if (odd == true) {
addClass(trs[j],"odd");
odd = false;
}else {
odd =true;
}
}
}
}
function highlightRows() {
if (!document.getElementsByTagName) { return false;}
var trs = document.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].oldClassName = trs[i].className;
trs[i].onmouseover = function () {
addClass(this,'highlight')
};
trs[i].onmouseout = function () {
this.className = this.oldClassName;
}
}
}
function displayAbbreviations () {
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) {return false;}
var abbreviations = document.getElementsByTagName('abbr');
if (abbreviations.length < 1) { return false;}
var defs = new Array();
for (var i = 0; i < abbreviations.length; i++) {
var current_abbr = abbreviations[i];
if(current_abbr.lastChild.nodeValue.length < 1){ continue;}
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
var dlist = document.createElement("dl");
for (key in defs) {
var definition = defs[key];
var dts = document.createElement('dt');
var dt_txt = document.createTextNode(key);
dts.appendChild(dt_txt);
var dds = document.createElement('dd');
var dd_txt = document.createTextNode(definition);
dds.appendChild(dd_txt);
dlist.appendChild(dts);
dlist.appendChild(dds);
}
if (dlist.childNodes.length < 1) { return false;}
var header = document.createElement("h3");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
var article = document.getElementsByTagName('article');
if (article.length == 0) {return false;}
var articleo= article[0];
articleo.appendChild(header);
articleo.appendChild(dlist);
}
//contant
function focusLabels () {
if (!document.getElementsByTagName) { return false;}
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
if (!labels[i].getAttribute("for")) { continue;}
labels[i].onclick = function() {
var l_id = this.getAttribute("for");
if(!document.getElementById(l_id)){ return false;}
var element = document.getElementById(l_id);
element.focus();
}
}
}
function resetFields (whichform) {
//如果if返回true则结束当前函数
if (Modernizr.input.placeholder) return;
for (var i = 0; i < whichform.elements.length; i++) {
var element = whichform.elements[i];
if(element.type == "submit") continue;
var check = element.placeholder || element.getAttribute("placeholder");
if(!check) continue;
element.onfocus = function () {
var text = this.placeholder || this.getAttribute("placeholder");
if (this.value == text) {
this.value = "";
this.className = "";
}
}
element.onblur = function () {
if (this.value == "") {
this.value = this.placeholder || this.getAttribute("placeholder");
this.className = "placeholder";
}
}
element.onblur();
}
}
function validateForm(whichform) {
for (var i = 0; i < whichform.elements.length; i++) {
var element = whichform.elements[i];
if (element.getAttribute('required') == 'required') {
if (!isFilled(element)) {
alert("Please fill in the "+element.name+"field");
return false;
}
}
if (element.getAttribute('type') == "email") {
if (!isEmail(element)) {
alert("The"+element.name+"field must be a valid email address.");
return false;
}
}
}
return true;
}
// function isFilled (field) {
// if (field.value.replace(' ','').length == 0) { return false;}
// var placeholder = field.placeholder || field.getAttribute('placeholder');
// return (field.value != placeholder);
// }
// function isEmail (field) {
// return (field.value.indexOf('@') != -1 || field.value.indexOf('.') != -1);
// }
function isFilled(field) {
return (field.value.length > 1 && field.value != field.placeholder);
}
function isEmail(field) {
return (field.value.indexOf("@") != -1 && field.value.indexOf(".") != -1);
}
function prepareForms () {
for (var i = 0; i < document.forms.length; i++) {
var thisform = document.forms[i];
resetFields(thisform);
thisform.onsubmit = function () {
if (!validateForm(this)) { return false; }
var article = document.getElementsByTagName('article')[0];
if (submitFormWithAjax(this, article)) return false;
return true;
}
}
}
//ajax
function getHTTPObject () {
if (typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function () {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {}
return false;
}
return new XMLHttpRequest();
}
function displayAjaxLoading (element) {
while (element.hasChildNodes()) {
element.removeChild(element.lastChild);
}
var content = document.createElement('img');
content.setAttribute("src", "images/loading.gif");
content.setAttribute("alt", "Loading...");
element.appendChild(content);
}
function submitFormWithAjax (whichform,thetarget) {
var request = getHTTPObject();
if (!request) { return false; }
displayAjaxLoading(thetarget);
var dataParts = [];
var element;
for (var i = 0; i < whichform.elements.length; i++) {
element = whichform.elements[i];
dataParts[i] = element.name + '=' + encodeURIComponent(element.value);
}
var data = dataParts.join('&');
request.open('POST', whichform.getAttribute("action"), true);
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.onreadystatechange = function () {
//验证当前文档的状态
if (request.readyState == 4) {
//响应成功
if (request.status == 200 || request.status == 0) {
//读取响应文本match()可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/);
if (matches.length > 0) {
thetarget.innerHTML = matches[1];
} else {
thetarget.innerHTML = '<p>Oops, there was an error. Sorry.</p>';
}
} else {
thetarget.innHTML = '<p> + request.statusText + </p>';
}
}
};
request.send(data);
return true;
}
function loadEvents() {
// home
prepareSlideshow();
// about
prepareInternalnav();
// photos
preparePlaceholder();
prepareGallery();
//live
stripeTables ();
highlightRows();
displayAbbreviations();
//contact
focusLabels ();
prepareForms ();
}
// Load events
addLoadEvent(highlightPage);
addLoadEvent(loadEvents);
书中的综合案例，讲述了部分常用的函数
