Board logo

標題: [jQuery] TimePicker- 時間選擇器 [打印本頁]
作者: wmh    時間: 2008-11-12 22:52     標題: [jQuery] TimePicker- 時間選擇器

jquery.timepickr (jQuery TimePicker)
http://haineault.com/media/jquery/ui-timepickr/page/
jQuery 時間選擇器

我沒打錯字喔，是 timepickr 沒錯，名字有點學 flickr 的味道。基本上這是一個 jQuery 的時間選擇器，有個特別的 UI，可以只用滑鼠點兩次就可以選好時間了。還記得先前介紹過 othree 寫的 jFormino Birthday 嗎？有著異曲同工之妙喔。

先解釋一下，這個 plugin 目前版本是 0.6a，目前不支援 IE！官方也預計於 0.8 版時支援 IE7，還請 IE 使用者再耐心等待，欲看以下展示的話，請改用其他瀏覽器，目前測試過 Firefox 和 Chrome 都可正常運作。

使用方式

下載 jquery.timepickr 後，將 js 和 css 引用進來。
<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>
加上文字輸入框：
<input id="demo-1" type="text" value="06:30" />
接著把這個輸入框套用 timepickr()：
<script type="text/javascript">
$(function() {
  $('#demo-1').timepickr().focus();
});
成果展示

順利的話，應該就可以看到這樣的輸入框囉：

[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]




換一個暗色佈景主題

如果網頁是黑色的背景，預設也有個佈景主題可以適用喔。要再加上一個下載包內的 style.css:
<link rel="Stylesheet" href="style.css" />
<input id="demo-2" type="text" value="14:00" class="demo">
至於程式的部份，也是多一行如下所示：
<script type="text/javascript">
$(function() {
  $('#demo-2').timepickr().focus();
  $('#demo-2').next().addClass('dark');
});
效果就像這樣：

[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]

總結
作者: wing_hk    時間: 2008-11-14 16:47

真的很方便，之前見過一個更小的，就是格式好像 datepicker一樣的界面。
作者: wmh    時間: 2008-11-14 19:54

如果記得網址的話，歡迎分享一下喔



歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)