[mooTools] NoGray JavaScript Time Picker 視覺化的時間選擇器
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] NoGray JavaScript Time Picker[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://www.nogray.com/time_picker.php[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 視覺化的時間選擇器
這個時間選擇器使用 mooTools 為基礎開發而成，可以直接秀出時鐘讓使用者透過滑鼠選擇時間，也算是相當直覺且容易操作。
[jsg.example]
<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="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="_lib/others/nogray_time_picker/nogray_time_picker_min.js"></script>
<script type="text/javascript">
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true, imagesPath: '_lib/others/nogray_time_picker/time_picker_files/images'});
</script>
[/jsg.example]
使用方式非常簡單，以下是 HTML 的部份：
[code 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>
[/code]
先準備一個 <input> 文字輸入框、一個可以觸發開啟時鐘的連結以及一個放時鐘內容的 <div>，再引用 mootools 及 nogray time picker 的 js 檔。
JavaScript 的部份如下，把相關參數分別帶入：
[code js]
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true'});
[/code]
以上是最簡單的一個範例，更多的參數請直接參考[url=http://www.nogray.com/time_picker.php]線上說明文件[/url]。 感謝提供
頁:
[1]