// スライダーオブジェクトを生成
slider=new Slider();
// スライダーを<div id="slider">に割り当て
Slider.init('slider');
// スライドバーの中央を指定
Slider.bcenter({y:0, x:0});
x : 'center' | 'left' | 'right' | Number
y : 'center' | 'bottom' | 'top' | Number
を指定可能
// スライダーの中央値を指定
Slider.center({y:0, x:0});
x : 'center' | 'left' | 'right' | Number
y : 'center' | 'bottom' | 'top' | Number
を指定可能
// スライドバーを移動またはクリックしたときに呼び出される関数（コールバック関数）を指定
Slider.callback(Function);
コールバック関数への引数
{
x: Number,
y: Number,
ID: String | Null
}
x : Number : スライドバーの横方向位置
y : Number : スライドバーの縦方向位置
ID : スライダーID、initで設定した引数
// スライドバーの間隔（デフォルトは{x: 1, y: 1} ）
Slider.interval({x:1, y:1});
x : Number
y : Number
を指定可能
<head>
<script type="text/javascript" src="slider.js"></script>
</head>
スライダーを表示する部分にスライドバーの画像を表示し、スタイルシートを適用して下さい。
<div id="slider"><img src="bar.png" width="20" height="40"></div>
bar.pngがスライドバーになります。
スライドバーのスタイルシート
<style type="text/css">
#slider {
width:360px; /* 必須 スライダーの幅 */
height:44px; /* 必須 スライダーの高さ */
padding-left:20px; /* 任意 スライドバーの半分 */
padding-right:20px; /* 任意 スライドバーの半分 */
background-image: url(slider.png); /* 任意 スライダーの背景 */
}
#slider img {
width: 20px; /* 必須 スライドバーの幅 */
height: 40px; /* 必須 スライドバーの高さ */
}
</style>
widthが長いと横長、heightが長いと縦長のスライダーになります。
width、heightともにスライドバーよりも大きいと、縦横、両方に移動できる2次元スライダーになります。
 |
 |
 |
配布条件：修正BSDライセンスに準拠します。
