【DOM编程艺术】综合示例---全部代码
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Jay Skript And The Domsters</title> <script src="scripts/modernizr.js"></script> <link rel="stylesheet" media="screen" href="styles/basic.css"/> </head> <body> <header> <img src="images/logo.gif" alt="Jay Skript and the Domsters" /> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="live.html">Live</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <article> <h1>Welcome</h1> <p id="intro">Welcome to the official website of Jay Skript and the Domsters. Here, you can <a href="about.html">learn more about the band</a>, view <a href="photos.html">photos of the band</a>, find out about <a href="live.html">tour dates</a> and <a href="contact.html">get in touch with the band</a>.</p> </article> <script src="scripts/global.js"></script> </body> </html>
about.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Jay Skript And The Domsters: About the band</title> <script src="scripts/modernizr.js"></script> <link rel="stylesheet" media="screen" href="styles/basic.css" /> </head> <body> <header> <img src="images/logo.gif" alt="Jay Skript and the Domsters" /> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="live.html">Live</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <article> <h1>About the band</h1> <nav> <ul> <li><a href="#jay">Jay Skript</a></li> <li><a href="#domsters">The Domsters</a></li> </ul> </nav> <section id="jay"> <h2>Jay Skript</h2> <p>Jay Skript is going to rock your world!</p> <p>Together with his compatriots The Domsters, Jay is set for world domination. Just you wait and see.</p> <p>Jay Skript has been on the scene since the mid nineties. His talent hasn't always been recognized or fully appreciated. In the early days, he was often unfavorably compared to bigger, similarly-named artists. That's all in the past now.</p> </section> <section id="domsters"> <h2>The Domsters</h2> <p>The Domsters have been around, in one form or another, for almost as long. It's only in the past few years that The Domsters have settled down to their current, stable line-up. Now they're a rock-solid bunch: methodical and dependable.</p> </section> </article> <script src="scripts/global.js"></script> </body> </html>
photos.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Jay Skript And The Domsters: Photos</title> <script src="scripts/modernizr.js"></script> <link rel="stylesheet" media="screen" href="styles/basic.css" /> </head> <body> <header> <img src="images/logo.gif" alt="Jay Skript and the Domsters" /> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="live.html">Live</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <article> <h1>Photos of the band</h1> <ul id="imagegallery"> <li> <a href="images/photos/concert.jpg" title="The crowd goes wild"> <img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" /> </a> </li> <li> <a href="images/photos/bassist.jpg" title="An atmospheric moment"> <img src="images/photos/thumbnail_bassist.jpg" alt="the bassist" /> </a> </li> <li> <a href="images/photos/guitarist.jpg" title="Rocking out"> <img src="images/photos/thumbnail_guitarist.jpg" alt="the guitarist" /> </a> </li> <li> <a href="images/photos/crowd.jpg" title="Encore! Encore!"> <img src="images/photos/thumbnail_crowd.jpg" alt="the audience" /> </a> </li> </ul> </article> <script src="scripts/global.js"></script> </body> </html>
live.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Jay Skript And The Domsters: Tour dates</title> <script src="scripts/modernizr.js"></script> <link rel="stylesheet" media="screen" href="styles/basic.css" /> </head> <body> <header> <img src="images/logo.gif" alt="Jay Skript and the Domsters" /> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="live.html">Live</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <article> <h1>Tour dates</h1> <table summary="when and where you can see the band"> <thead> <tr> <th>Date</th> <th>City</th> <th>Venue</th> </tr> </thead> <tbody> <tr> <td>June 9th</td> <td>Portland, <abbr title="Oregon">OR</abbr></td> <td>Crystal Ballroom</td> </tr> <tr> <td>June 10th</td> <td>Seattle, <abbr title="Washington">WA</abbr></td> <td>Crocodile Cafe</td> </tr> <tr> <td>June 12th</td> <td>Sacramento, <abbr title="California">CA</abbr></td> <td>Torch Club</td> </tr> <tr> <td>June 17th</td> <td>Austin, <abbr title="Texas">TX</abbr></td> <td>Speakeasy</td> </tr> </tbody> </table> </article> <script src="scripts/global.js"></script> </body> </html>
contact.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Jay Skript And The Domsters: Contact the band</title> <script src="scripts/modernizr.js"></script> <link rel="stylesheet" media="screen" href="styles/basic.css" /> </head> <body> <header> <img src="images/logo.gif" alt="Jay Skript and the Domsters" /> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="live.html">Live</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <article> <h1>Contact the band</h1> <form method="post" action="submit.html"> <fieldset> <p> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Your name" required /> </p> <p> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Your email address" required /> </p> <p> <label for="message">Message:</label> <textarea cols="45" rows="7" id="message" name="message" placeholder="Write your message here." required ></textarea> </p> <input type="submit" value="Send" /> </fieldset> </form> </article> <script src="scripts/global.js"></script> </body> </html>
submit.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Jay Skript And The Domsters: Contact the band</title> <script src="scripts/modernizr.js"></script> <link rel="stylesheet" media="screen" href="styles/basic.css" /> </head> <body> <header> <img src="images/logo.gif" alt="Jay Skript and the Domsters" /> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="live.html">Live</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <article> <h1>Thanks!</h1> <p>Thanks for contacting us. We'll get back to you as soon as we can.</p> </article> <script src="scripts/global.js"></script> </body> </html>
global.js
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.getElementById) return false; if( !document.getElementsByTagName ) return false; var headers = document.getElementsByTagName('header'); if( headers.length == 0) return false; var navs = headers[0].getElementsByTagName('nav'); if( navs.length == 0 ) return false; var links = navs[0].getElementsByTagName('a'); var url = window.location.href; for(var i=0;i<links.length;i++){ var linkurl = links[i].getAttribute('href'); if( url.indexOf(linkurl) != -1 ){ links[i].setAttribute('href','#'); links[i].className = 'here' ; } } } function prepareSlideshow(){ if(!document.getElementById('intro')) return false; var slideshow = document.createElement('div'); slideshow.setAttribute('id','slideshow'); var frame = document.createElement('img'); frame.setAttribute('id','frame'); frame.setAttribute('src','images/frame.gif'); slideshow.appendChild(frame); var preview = document.createElement('img'); preview.setAttribute('id','preview'); preview.setAttribute('src','images/slideshow.gif'); slideshow.appendChild(preview); var intro = document.getElementById('intro'); insertAfter(slideshow,intro); var links = document.getElementsByTagName('a'); for(var i=0;i<links.length;i++){ links[i].onmouseover=function(){ var destiation = this.getAttribute('href'); if( destiation.indexOf('index.html') != -1){ moveElement('preview',0,0,10); } if( destiation.indexOf('about.html') != -1){ moveElement('preview',-150,0,10); } if( destiation.indexOf('photos.html') != -1){ moveElement('preview',-300,0,10); } if( destiation.indexOf('live.html') != -1){ moveElement('preview',-450,0,10); } if( destiation.indexOf('contact.html') != -1){ moveElement('preview',-600,0,10); } } } } function moveElement(elementID,final_x,final_y,interval){ var elem = document.getElementById(elementID); if( !elem.style.left) {elem.style.left = 0;} if( !elem.style.top) {elem.style.top = 0;} var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); var dist; if(elem.movement) { clearTimeout(elem.movement)}; if( xpos == final_x && ypos == final_y ){ return true; } if( xpos < final_x){ dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if( xpos > final_x){ dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if( ypos < final_y){ dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if( ypos > final_y){ dist = Math.ceil((final_y - ypos)/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); } //About function prepareShowSection(){ if( !document.getElementById) return false; if( !document.getElementsByTagName) return false; var article = document.getElementsByTagName('article'); if( article.length == 0 ) return false; var nav = article[0].getElementsByTagName('nav'); if( nav.length == 0 ) return false; var links = nav[0].getElementsByTagName('a'); for(var i=0;i<links.length;i++){ document.getElementsByTagName('section')[i].style.display = 'none'; var sectionId = links[i].getAttribute('href').split('#')[1]; links[i].destination = sectionId; if( !document.getElementById(sectionId)) continue; links[i].onclick = function(){ showSection(this.destination); return false; } } } 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'; } } } //photos function preparePlaceholder(){ if( !document.getElementById) return false; if( !document.getElementsByTagName ) return false; if( !document.getElementById('imagegallery')) return false; var placeholder = document.createElement('img'); placeholder.setAttribute('id','placeholder'); placeholder.setAttribute('src','images/placeholder.gif'); var description = document.createElement('p'); description.setAttribute('id','description'); var text = document.createTextNode('choose an image'); description.appendChild(text); var imagegallery= document.getElementById('imagegallery'); insertAfter(description,imagegallery); insertAfter(placeholder,description); } function prepareGallery(){ if( !document.getElementById('imagegallery')) return false; var imagegallery = document.getElementById('imagegallery'); var links = imagegallery.getElementsByTagName('a'); for(var i=0;i<links.length;i++){ links[i].onclick = function(){ return showpic(this); } } } function showpic(whichpic){ if( !document.getElementById('placeholder')) return true; var imageurl = whichpic.getAttribute('href'); var placeholder = document.getElementById('placeholder'); placeholder.setAttribute('src',imageurl); if( !document.getElementById('description')) return false; if( !whichpic.getAttribute('title')){ var title = ''; }else{ var title = whichpic.getAttribute('title'); } var description = document.getElementById('description'); if( description.firstChild.nodeType == 3){ description.firstChild.nodeValue = title; } return false; } //live function stripeTables(){ var tables = document.getElementsByTagName('table'); for(var i=0;i<tables.length;i++){ var rows = tables[i].getElementsByTagName('tr'); var odd = false; for(var j=0;j<rows.length;j++){ if( odd == false ){ odd = true; }else{ addClass(rows[j],'odd'); odd = false; } } } } function highlightRows(){ var tables = document.getElementsByTagName('table'); for(var i=0;i<tables.length;i++){ var rows = tables[i].getElementsByTagName('tr'); for(var j=0;j<rows.length;j++){ var oldClassname = rows[j].className; rows[j].onmouseover = function(){ addClass(this,'highlight'); } rows[j].onmouseout = function(){ this.className = oldClassname; } } } } function displayAbbreviations(){ if( !document.getElementsByTagName('abbr')) return false; var defs = new Array(); var abbrs = document.getElementsByTagName('abbr'); if( abbrs.length ==0) return false; for(var i=0;i<abbrs.length;i++){ if( abbrs[i].childNodes.length <1) continue; var key = abbrs[i].firstChild.nodeValue; var definition = abbrs[i].getAttribute('title'); defs[key] = definition; } var dlist = document.createElement('dl'); for(var key in defs){ var dtitle = document.createElement('dt'); var dtitle_text = document.createTextNode(key); dtitle.appendChild(dtitle_text); var ddtitle = document.createElement('dd'); var definition = defs[key]; var ddtitle_text = document.createTextNode(definition); ddtitle.appendChild(ddtitle_text); dlist.appendChild(dtitle); dlist.appendChild(ddtitle); } var header = document.createElement('h3'); var header_text = document.createElement('Abbreviations'); header.appendChild(header_text); var articles = document.getElementsByTagName('article'); if( articles.length == 0) return false; articles[0].appendChild(header); articles[0].appendChild(dlist); } /*contact*/ function focusLabels(){ var labels = document.getElementsByTagName('label'); for( var i=0;i<labels.length;i++){ if( !labels[i].getAttribute('for') ) continue; labels[i].onclick = function(){ var id = this.getAttribute('for'); if( !document.getElementById(id)) return false; var elem = document.getElementById(id); elem.focus(); } } } 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; } } } function resetFields(whichform){ 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; var placeholder = element.getAttribute('placeholder'); //element.className = 'placeholder'; //element.value = placeholder; element.onfocus= function(){ var text = this.placeholder || this.getAttribute('placeholder'); if( this.value == text){ this.value = ''; } } element.onblur = function(){ if( this.value == ''){ this.className = 'placeholder'; this.value = this.placeholder || this.getAttribute('placeholder'); } } element.onblur(); } } /*表单*/ function validateForm(whichform){ for(var i=0;i<whichform.elements.length;i++){ var elem = whichform.elements[i]; var elem_required = elem.required || elem.getAttribute('required'); if( elem_required == '' || elem_required == 'required'){ var elem_name = elem.name || elem.getAttribute('name'); if( !isFilled(elem) ){ alert('please fill in '+elem_name +' '+'field.'); return false; } if( elem.getAttribute('id') == 'email'){ //或者elem.type == 'email' if( !isEmail(elem)){ alert('请输入正确的邮箱地址'); 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); } /*ajax*/ function submitFormWithAjax(whichform,thetarget){ var request = getHTTPObject(); if(!request) return false; displayAjaxLoading(thetarget); var dataParts = []; for(i=0;i<whichform.elements.length;i++){ var elem = whichform.elements[i]; dataParts[i] = elem.getAttribute('name') + '=' + encodeURIComponent(elem.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 ){ 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.innerHTML = '<p>' + request.statusText + '</p>'; } } } request.send(data); return true; } function getHTTPObject(){ if(typeof XMLHttpRequest == 'undefined'){ 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; }else{ 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); console.log(element); } addLoadEvent(highlightPage); addLoadEvent(prepareSlideshow); addLoadEvent(prepareShowSection); addLoadEvent(preparePlaceholder); addLoadEvent(prepareGallery); addLoadEvent(stripeTables); addLoadEvent(highlightRows); addLoadEvent(displayAbbreviations); addLoadEvent(focusLabels); addLoadEvent(prepareForms);
