jQuery时钟风格插件clockpicker

 查看演示  website  立即下载

浏览器支持

所有的主流浏览器都支持，包括IE 9 +。其它外观和行为不够好，在IE 8。

设备支持

台式机和移动设备的支持。它也可以在大触摸屏设备。

依赖关系

依赖jQuery。

用法

<!-- 引导样式表 -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- ClockPicker样式表 -->
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
<!-- 输入组，只需添加类“clockpicker'，和可选的数据 -->
<div class="input-group clockpicker" data-placement="right" data-align="top" data-autoclose="true">
    <input type="text" class="form-control" value="09:32">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>
<!-- 或者只是一个输入 -->
<input id="demo-input" />
<!-- jQuery和引导脚本 -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- ClockPicker脚本 -->
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript">
$('.clockpicker').clockpicker()
    .find('input').change(function(){
        // TODO：时间改变
        console.log(this.value);
    });
$('#demo-input').clockpicker({
    autoclose: true
});
if (something) {
    // 手动操作（clockpicker初始化之后）
    $('#demo-input').clockpicker('show') //或者隐藏，删除...
            .clockpicker('toggleView', 'minutes');
}
</script>

PREVIOUS:
NEXT:
滚动视差插件skrollr-master
jQuery滑块插件nstSlider.js