第3回：テーブルにスクロールバーを実装する (2/3)

TOP＞書籍連動＞スクロールバーを追加する

JPSpanを使ってAJAXをしよう！

第３回：テーブルにスクロールバーを実装する
著者：Joshua Eichorn 2005/11/16

スクロールバーを追加する

   スクロールバーを完成させるには、行の削除やデータの追加を実装する必要がありますが、その前にここまでの動作を確認するため、実際にスクロールバーを作成してみましょう。

   スクロールバーの作成は少し難易度が高くなります。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社のアプリケーションに追加する作業を行っています。現在、アリゾナ州フェニックスに住んでいます。

INDEX
第3回：テーブルにスクロールバーを実装する
	JPSpanプロキシクラス
	スクロールバーを追加する
	スクロールバーに接続する

タイプ

連載

特集

第3回：テーブルにスクロールバーを実装する (2/3)

人気記事トップ10

新着記事

企画広告も役立つ情報バッチリ！ Sponsored