jQuery时钟风格插件clockpicker

jQuery时钟风格插件clockpicker
 点击预览  点击下载

浏览器支持

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

设备支持

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

依赖关系

依赖jQuery。

用法

  1. <!-- 引导样式表 --> 
  2. <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"> 
  3. <!-- ClockPicker样式表 --> 
  4. <link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css"> 
  5. <!-- 输入组,只需添加类“clockpicker',和可选的数据 --> 
  6. <div class="input-group clockpicker" data-placement="right" data-align="top" data-autoclose="true"> 
  7.     <input type="text" class="form-control" value="09:32"> 
  8.     <span class="input-group-addon"> 
  9.         <span class="glyphicon glyphicon-time"></span> 
  10.     </span> 
  11. </div> 
  12. <!-- 或者只是一个输入 --> 
  13. <input id="demo-input" /> 
  14. <!-- jQuery和引导脚本 --> 
  15. <script type="text/javascript" src="assets/js/jquery.min.js"></script> 
  16. <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> 
  17. <!-- ClockPicker脚本 --> 
  18. <script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script> 
  19. <script type="text/javascript"> 
  20. $('.clockpicker').clockpicker() 
  21.     .find('input').change(function(){ 
  22.         // TODO:时间改变 
  23.         console.log(this.value); 
  24.     }); 
  25. $('#demo-input').clockpicker({ 
  26.     autoclose: true 
  27. }); 
  28. if (something) { 
  29.     // 手动操作(clockpicker初始化之后) 
  30.     $('#demo-input').clockpicker('show') //或者隐藏,删除... 
  31.             .clockpicker('toggleView', 'minutes'); 
  32. </script> 

转载请注明:代码家园 » jQuery时钟风格插件clockpicker

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)