返回列表 發帖

[mooTools] NoGray JavaScript Time Picker 視覺化的時間選擇器

NoGray JavaScript Time Picker
http://www.nogray.com/time_picker.php
視覺化的時間選擇器

這個時間選擇器使用 mooTools 為基礎開發而成,可以直接秀出時鐘讓使用者透過滑鼠選擇時間,也算是相當直覺且容易操作。

打開時鐘好讓我選時間


使用方式非常簡單,以下是 HTML 的部份:
<input type="text" name="time2" id="time2" /> <a href="#" id="time2_toggler">打開時鐘好讓我選時間</a>
<div id="time2_picker" class="time_picker_div"></div>
<script type="text/javascript" src="mootools_full_1.11_packed.js"></script>
<script type="text/javascript" src="nogray_time_picker_min.js"></script>
先準備一個 <input> 文字輸入框、一個可以觸發開啟時鐘的連結以及一個放時鐘內容的 <div>,再引用 mootools 及 nogray time picker 的 js 檔。

JavaScript 的部份如下,把相關參數分別帶入:
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true'});
以上是最簡單的一個範例,更多的參數請直接參考線上說明文件
To infinity and beyond!

感謝提供
artie yang

TOP

返回列表 回復 發帖