時刻入力をスライダーでAJAXに行えるようにするjQuery Plugin「timeSlider.js」作りました。


「よくカレンダーとかで日付入力を補助するJavascriptUIはあるけど、時刻入力でそういうのないの?」
そう言われて探してみたけど、いまいち「コレッ!」っていうのが見あたらなかったので作ってみました。


TimeSlider.js


jQueryで書いてるのでjQueryは必須です。
使用方法は以下の通り。

1. timeSlider.js PackageをDLする
2. 任意の場所にアップロードする
3. jQueryとtimeSlider.jsをheadで読み込む
4. 初期設定オプションを設定する

timeSlider.js PackageをDLする

以下からDLしてください。Packageには画像も含まれています。

time_slider_js.zip

任意の場所にアップロードする

任意のJSフォルダ等にPackageに入ってるtimeSliderフォルダをアップしてください。

jQueryとtimeSlider.jsをheadで読み込む

jQuery-1.3.2もPackageのtimeSliderフォルダに入っているので、timeSlider.jsと一緒にheadで読み込む

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/timeSlider/timeSlider.min.js"></script>

初期設定オプションを設定する

使用するにはtimeSlider.init( objectArray )関数呼び出す必要があります。
引数にはオブジェクトの配列を指定します。スライダーを複数表示する場合は配列で複数指定します。


オブジェクトに設定するオプションパラメータは以下の通りです。

■type: スライダーのタイプ(1 or 2を設定してください)
■step: Minute Stepの設定(ステップを15分おきにしたい場合は15を設定)
■image: gif画像かpng画像のどちらを使用するか設定("gif" or "png" ※IEの場合強制的にgif画像が読み込まれます)
■color: スライダーデザインのカラーを設定("black" or "white" or "transparent")
■url: timeSlider.js Packageへのパスを設定
■selector: スライダーを表示するエレメントのセレクタを設定("#timeSlider"など)
■hourForm: Hourを関連づけるinputフィールドのセレクタを配列で設定(.val()でvalue属性に結果が返されます)
■minuteForm: Minuteを関連づけるinputフィールドのセレクタを配列で設定(.val()でvalue属性に結果が返されます)
■hourText: Hourを表示するHtmlエレメントのセレクタを配列で設定(.text()で結果が返されます)
■minuteText: Textを表示するHtmlエレメントのセレクタを配列で設定(.text()で結果が返されます)
■setHour: 初期のHourを配列で設定
■setMinute: 初期のMinuteを配列で設定

▼ 例

$(function(){
	timeSlider.init([
		{
			"type": 2,
			"step": 15,
			"image": "png",
			"color": "white",
			"url": "js/timeSlider/",
			"selector": "#timeSlider1",
			"hourForm": ["#hour1","#hour2"],
			"minuteForm": ["#minute1","#minute2"],
			"hourText": ["#hourText1","#hourText2"],
			"minuteText": ["#minuteText1","#minuteText2"],
			"setHour": [20,3],
			"setMinute": [0,30]
		},{
			…
		}
	]);
});

何か不具合があればコメントください。


サンプル