 |
|
| JPSpanを使ってAJAXをしよう！ |
第３回：テーブルにスクロールバーを実装する
著者：Joshua Eichorn 2005/11/16
|
|
|
| 前のページ 1 2 3 次のページ
|
|
| スクロールバーを追加する
|
スクロールバーを完成させるには、行の削除やデータの追加を実装する必要がありますが、その前にここまでの動作を確認するため、実際にスクロールバーを作成してみましょう。
スクロールバーの作成は少し難易度が高くなります。Webブラウザにはスクロールバーがありますが、スクロールバーのためのJavaScriptAPIやHTMLは用意されていないため、自分で一から作成する必要があります。しかし、スクロールバーを作成すること自体は非常に簡単です。スクロールバーを構成する各パーツの画像を取得して、CSSを使って各パーツに分ければよいのです。
そうすることで、スクロールバーの外見を簡単に変えることができます。例えば、サイトに合う配色にしたい場合でもすぐに対応できます。今回のスクロールバーに用いるCSS、HTML、画像はソースコードに含まれています。
スクロールバーを動作させるため、各イベントにJavaScriptのアクションを割り当てる必要があります。コンテナとなるDIVタグを作成し、コンテナのidを元に新しいインスタンスを作成します。スクロールバーをHTMLのテーブルに関連づける部分のコードは、リスト8に掲載しています。今回のやり方では、スクロールバーを連結するためのテーブルを用意しています。HTMLは見づらくなりますが、一番簡単で問題なく配置できる方法です。
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Scroll Bar</title>
<link rel="stylesheet" href="scrollbar.css"type="text/css"/>
<script type="text/javascript" src="scrollbar.js">
</script>
</head>
<body>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td>
<table border="1">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr> <td>Col 1</td> <td>Col 2</td> </tr>
<tr> <td>Col 1</td> <td>Col 2</td> </tr>
</table>
</td>
<td>
<div class="scrollBar" id="bar"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var bar = new ScrollBar('bar');
</script>
</body>
</html>
|
リスト8：スクロールバーをHTMLのテーブルに関連づける部分のコード
|
リスト9に、スクロールバーを実装するためのJavaScriptクラスを掲載します。コンストラクタではまず、親コンテナーのclientHeight属性を使って、スクロールバーの高さをセットします。実際のスクロールバーでは、onScrollUpとonScrollDownメソッドをオーバーライドする必要がありますが、この部分に関してはこの記事では書かないことにします。
|
1 ⁄⁄ JavaScript で作ったスクロールバー
2 function ScrollBar(id) {
3 var barHTML = '<div class="buttonUp"><⁄div>' +
4 '<div class="bar"><div class="capTop"><⁄div>' +
5 '<div class="gripper"><⁄div><div class="capBottom">' +
6 '<⁄div><⁄div><div class="buttonDown"><⁄div>';
7 this.element = document.getElementById(id);
8
9 this.element.innerHTML = barHTML;
10 this.element.style.height =
11 this.element.parentNode.clientHeight +"px";
12
13 var divs = this.element.getElementsByTagName('div');
14 for(var i = 0; i < divs.length; i++) {
15 this[divs[i].className] = divs[i];
16 this[divs[i].className].worker = this;
17 }
18
19 this.buttonUp.onclick = function()
20 { this.worker.onScrollUp(); }
21 this.buttonDown.onclick = function()
22 { this.worker.onScrollDown(); }
23 this.gripper.onclick = function()
24 { this.worker.onGripper(); }
25 }
26
27 ScrollBar.prototype.setHeight = function(height) {
28 this.element.style.height = height;
29 }
30
31 ScrollBar.prototype.onScrollUp = function() {
32 alert('scroll up');
33 }
34
35 ScrollBar.prototype.onScrollDown = function() {
36 alert('scroll down');
37 }
38
39 ScrollBar.prototype.onGripper = function() {
40 alert('clicked Gripper');
41 }
|
リスト9：スクロールバーを実装するためのJavaScriptクラス
|
前のページ 1 2 3 次のページ
|
|
|
|
|
著者プロフィール
Joshua Eichorn
Joshua Eichornは、PHPを使ったWebサイトを7年間制作してきました。彼は、非常に有名なPHPのドキュメーションツールであるphpDocumentorの制作者です。また彼は、アリゾナ州立大学のScience in Computer InformationSystems学部の学士号をとっています。
彼はUversa社のシニア設計者として、AJAXをUversa社のアプリケーションに追加する作業を行っています。現在、アリゾナ州フェニックスに住んでいます。
|
|
|
|
|
|
