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>