slide.js 2日目
グローバルな領域を汚さないように、oop化してみた。
そしたらなぜかIEでもエラーにならなくなった(つ´∀`)つ
でもなんでだろう。
まぁいいか。
DOMで抽出するより、CSSのクラス切り替えのほうがメモリ食わなくていいかもなぁ。
とにかく、oop化してちょっと(自己)満足。
slide.js
// slide.js // @version: 2007/05/03 // @author: futa23 function Slide() { this.initialize.apply(this, arguments); } // Slide class Slide.prototype.initialize = function() { this.main = null; this.contents = new Array(); this.page = 0; }; Slide.prototype.start = function(){ //load slide base element this.main = document.getElementById('main'); document.getElementById('startBtn').disabled = true; var divPages = document.getElementsByTagName('div'); for (var i=0; i<divPages.length ; i++) { if (divPages[i].className == 'page') { this.contents.push(divPages[i].firstChild.nodeValue); } divPages[i].innerHTML = ''; } }; Slide.prototype.next = function() { // if(!main) this.main = document.getElementById('main'); // alert(this.contents.length); if (this.page < this.contents.length) { this.main.innerHTML = this.contents[this.page++]; //last action if (this.page == this.contents.length) { document.getElementById('nextBtn').disabled = true; } } } //app var slide = new Slide();
呼び出すHTML側
<html> <head> <title>プレゼンツール</title> <STYLE TYPE="text/css"> <!-- A:link { color:#0ac0ff; text-decoration:none; } A:visited { color:#5080e0; text-decoration:none; } A:hover { color:#2ae0ff; text-decoration:underline;} --> </STYLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <script type="text/javascript" language="JavaScript" src="slide.js"></script> </head> <body bgcolor="#FFFFFF" text="#003366" link="#3399FF" vlink="#99CCFF" alink="#FF3333"> <input type="button" value="start!" id="startBtn" onclick="slide.start()"> <input type="button" value="next!" id="nextBtn" onclick="slide.next()"> <div id="main" class="main" onClick="slide.next()"> start </div> <div id="1" class="page"> test1 </div> <div id="2" class="page"> test2 </div> </body> </html>