有关jQuery UI Datepicker的扩展控件Timepicker的例子
前言:
最近的一个项目需要一个Timepicker来选择时间,如 8:00. 在网上找了很久, 终于找到一个我认为很不错的控件. 它的访问链接是: http://trentrichardson.com/examples/timepicker/
缘由:
在做DEMO的过程中,由于原例子程序中没有提供独立的DEMO程序下载. 因此我通过查看它的页面源码来重新制作我自己的DEMO程序.但弄来弄去都搞不出来. 原来除了要加入下面的三个 *.js脚本外,还要加入它原来定义的css文件.
实现步骤:
1. 在HTML页面的<head></head>标签入导入3个.js脚本文件和1个.css文件
jquery-1.4.4.min.js
jquery-ui-1.8.6.custom.min.js
jquery-ui-timepicker-addon.js
jquery-ui-1.8.6.custom.css
2. 在<body></body>标签之间加入一个文本域:
<input type="text" name="#example" id="#example" value="" />
3. Demo.html的完整的HTML代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TIMEPICKER DEMO</TITLE>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.6.custom.css"/>
<style type="text/css">
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
</style>
<script type="text/javascript">
$(function(){
$('#example').timepicker({});
});
</script>
</HEAD>
<BODY style="font: 9px Arial, Helvetica, sans-serif;">
<input type="text" name="#example" id="#example" value="" />
</BODY>
</HTML>
4. 相关文件下载链接:
jquery-1.4.4.min.js http://trentrichardson.com/examples/timepicker/js/jquery-1.4.4.min.jsjquery-ui-1.8.6.custom.min.js http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.6.custom.min.js
jquery-ui-timepicker-addon.js http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js
jquery-ui-1.8.6.custom.css http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.6.custom.css
5. 文件结构图:
