時刻入力をスライダーでAJAXに行えるようにするjQuery Plugin「timeSlider.js」作りました。
「よくカレンダーとかで日付入力を補助するJavascriptUIはあるけど、時刻入力でそういうのないの?」
そう言われて探してみたけど、いまいち「コレッ!」っていうのが見あたらなかったので作ってみました。
jQueryで書いてるのでjQueryは必須です。
使用方法は以下の通り。
1. timeSlider.js PackageをDLする
2. 任意の場所にアップロードする
3. jQueryとtimeSlider.jsをheadで読み込む
4. 初期設定オプションを設定する
任意の場所にアップロードする
任意の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] },{ … } ]); });
何か不具合があればコメントください。