[jQuery] TimePicker- 時間選擇器
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] jquery.timepickr (jQuery TimePicker)[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://haineault.com/media/jquery/ui-timepickr/page/[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] jQuery 時間選擇器
我沒打錯字喔，是 timepickr 沒錯，名字有點學 flickr 的味道。基本上這是一個 jQuery 的時間選擇器，有個特別的 UI，可以只用滑鼠點兩次就可以選好時間了。還記得先前介紹過 [url=http://jsgears.com/thread-80-1-1.html]othree 寫的 jFormino Birthday[/url] 嗎？有著異曲同工之妙喔。
先解釋一下，這個 plugin 目前版本是 0.6a，目前不支援 IE！官方也預計於 0.8 版時支援 IE7，還請 IE 使用者再耐心等待，欲看以下展示的話，請改用其他瀏覽器，目前測試過 Firefox 和 Chrome 都可正常運作。
[b][size=4][color=Indigo]使用方式[/color][/size][/b]
下載 jquery.timepickr 後，將 js 和 css 引用進來。
[code html]
<link rel="Stylesheet" href="jquery.timepikr.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepickr.js"></script>
[/code]
加上文字輸入框：
[code html]
<input id="demo-1" type="text" value="06:30" />
[/code]
接著把這個輸入框套用 timepickr()：[code]<script type="text/javascript">
$(function() {
$('#demo-1').timepickr().focus();
});[/code][b][size=4][color=Indigo]成果展示[/color][/size][/b]
順利的話，應該就可以看到這樣的輸入框囉：
[jsg.example]
<link rel="Stylesheet" media="screen" href="_lib/jquery/plugins/jquery.timepikr.css" />
<link rel="Stylesheet" media="screen" href="_lib/jquery/plugins/jquery.timepikr.dark.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/jquery.timepickr.js"></script>
<input id="demo-1" type="text" value="06:30" class="demo" />
[/jsg.example]
[b][size=4][color=Indigo]換一個暗色佈景主題[/color][/size][/b]
如果網頁是黑色的背景，預設也有個佈景主題可以適用喔。要再加上一個下載包內的 style.css:
[code html]
<link rel="Stylesheet" href="style.css" />
<input id="demo-2" type="text" value="14:00" class="demo">
[/code]
至於程式的部份，也是多一行如下所示：[code]<script type="text/javascript">
$(function() {
$('#demo-2').timepickr().focus();
$('#demo-2').next().addClass('dark');
});[/code]效果就像這樣：
[jsg.example]
<div style="color: white; background-color: black; padding: 6px;">
測試黑色背景：</br>
<input id="demo-2" type="text" value="14:00" class="demo">
<br /><br /><br /><br /><br /><br />
</div>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(function() {
$j('#demo-1').timepickr().focus();
$j('#demo-2').timepickr().focus();
$j('#demo-2').next().addClass('dark');
});
</script>
[/jsg.example]
[b][size=4][color=Indigo]總結[/color][/size][/b][list=1]
[*]可以設定分和秒的選項，完整設定方式請參考[url=http://code.google.com/p/jquery-utils/wiki/UiTimepickr]官方文件[/url]
[*]0.6a minified 的版本 (jquery.timepickr.min.js) 不能用!
[*]原始版本檔案還蠻大的 (289KB)!
[*]尚不支援 IE!
[/list] 真的很方便，之前見過一個更小的，就是格式好像 datepicker一樣的界面。 如果記得網址的話，歡迎分享一下喔 :)
頁:
[1]