縦スライダーもオプションを指定する以外は横スライダーと全く同じです。縦スライダーの場合はオプションでaxisを指定します。
new Control.Slider("id_of_slider_handle","id_of_slider_track", {
axis:"vertical"});
以下のサンプルは最も簡単な縦スライダーのサンプルです。ハンドルを動かすことができるだけです。（サンプルを
実行する）
<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", { axis:"vertical" });
}
// --></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", { axis:"vertical",
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", { axis:"vertical", 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:2px 0px;
width:10px;
height:100px;
}
#ptr {
background-image:url(slider.gif);
background-repeat:no-repeat;
width:10px;
height:5px;
}
#result {
margin-top:2em;
}
[
目次へ]
(2006.7.3)