script.aculo.usのslider.jsはスライダ処理を行うためのライブラリです（ここではver 1.6.1を使用）。スライダー処理の追加は簡単でスタイルシートで幅／高さを指定し、divタグにIDを指定しておくだけです。定義する部分はスライダーの背景部分（トラック部分）とドラッグして動かすハンドル部分になっています。特にdivタグを入れ子にしなくても動作しますが、基本的にはトラックのdivタグの入れ子としてハンドル部分を定義しておきます。
script.aculo.usのスライダーの書式は以下のようになっています。
new Control.Slider("id_of_slider_handle","id_of_slider_track", [options]);
詳しいオプションに関しては以下のページを参照してください。
http://wiki.script.aculo.us/scriptaculous/show/Slider
以下のサンプルは最も簡単なスライダーのサンプルです。ハンドルを動かすことができるだけです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>横スライダー</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=slider"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
new Control.Slider("ptr", "back");
}
// --></script>
</head>
<body>
<h1>scriptaculous.js 横スライダー</h1>
<div id="back">
<div id="ptr"></div>
</div>
<div id="result"></div>
</body>
</html>
スライダーで現在どの値になっているかどうかはイベントハンドラを設定する必要があります。スライダーのハンドルがドラッグされている間はonSlideイベントが発生します。このイベントハンドラを設定します。呼び出される関数側にはパラメータが1つ渡されます。このパラメータの値がスライダーの現在の値を示しています。以下のサンプルはスライダーのハンドルをドラッグすると値を表示するものです。なお、値の範囲は小数値で左側が0.0、一番右側が1.0となります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>横スライダーで値を表示する</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
new Control.Slider("ptr", "back", {
onSlide:dispValue});
}
function dispValue(n)
{
$("result").innerHTML = n;
}
// --></script>
</head>
<body>
<h1>scriptaculous.js 横スライダーで値を表示する</h1>
<div id="back">
<div id="ptr"></div>
</div>
<div id="result"></div>
</body>
</html>
上記２つのサンプルはスタイルシートを使った適当なもので実際のページに使用するには無理があります。通常はページのイメージに合わせたスライダーにする必要があります。この場合はPhotoshopなどでスライダーのトラック部分とハンドル部分の画像を用意し、divタグの背景画像として設定しておきます。このようにすることでページの雰囲気に合わせたスライダーを作成することができます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>横スライダーで値を表示する</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
new Control.Slider("ptr", "back", { onSlide:dispValue});
}
function dispValue(n)
{
$("result").innerHTML = n;
}
// --></script>
</head>
<body>
<h1>scriptaculous.js 横スライダーで値を表示する</h1>
<div id="back">
<div id="ptr"></div>
</div>
<div id="result"></div>
</body>
</html>
●スタイルシート (main.css)
#back {
background-image:url(track.gif);
background-repeat:no-repeat;
background-position:0px 2px;
width:100px;
height:10px;
}
#ptr {
background-image:url(slider.gif);
background-repeat:no-repeat;
width:5px;
height:10px;
}
#result {
margin-top:2em;
}
[
目次へ]
(2006.7.3)