最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery 时间选择器 ClockPicker(模拟时钟)用法
时间：2022-11-14 22:03:13 编辑：袖梨 来源：一聚教程网
最近项目中需要用到一个时间选择器，之前用到的 bootstrap-datetimepicker 在选择日期时蛮好用，但是它的时间选择（时:分）却有点别扭，后来发现 Android 上调闹铃时的选择器挺不错，于是决定自己开发一个类似的模拟时钟的时间选择器。
最开始只是打算做一个用于 Bootstrap 的组件，后来发现我只是用了 Bootstrap 的 .popover 和一些 .btn 的样式，于是我将这些样式取出来，让它同时支持单独作为一个 jQuery 插件。
先看看截图，使用过 Android 手机的亲人们对此应该不陌生：
| 代码如下 | 复制代码 |
|
$('.clockpicker').clockpicker(); |
|
浏览器兼容性
支持所有主流浏览器，包括 IE 9+ 。理论上在 IE 8 下也能正常运行，除了没有圆角边框、指针效果外。不过我没有仔细测试它在 IE 8 下的表现。
如果你的项目必须兼容 IE 6/7 ，你可能得另辟蹊径！
设备兼容性
除了桌面设备外，它也能很好的支持移动设备。如果你使用触摸屏设备，你可以拖动指针转动。当然，桌面设备也可以按住鼠标进行拖动选择。
另外，如果你的手机支持，在点选或拖动指针时，会有力学反馈哦。这个细节也是模仿自手机上的体验。
使用
| 代码如下 | 复制代码 |
|
|
|
对于非 Bootstrap 项目，直接使用 jquery-* 的文件（替换 bootstrap-* ）即可。
选项参数
| 名称 | 默认 | 说明 |
|---|---|---|
| default | ” | 默认时间，如 ’13:14′ |
| placement | ‘bottom’ | 弹层位置 |
| align | ‘left’ | 弹层箭头对齐 |
| donetext | ‘完成’ | 完成按钮文字 |
| autoclose | false | 选定分钟后自动关闭 |
| vibrate | true | 拖动指针时小震一下手机 |
相关文章
- 《原神》5.2卡池抽取建议 11-14
- 《原神》5.2版本新怪物介绍 11-14
- 《原神》希诺宁增伤触发方法 11-14
- 《原神》循音觅奇活动入口 11-14
- 《原神》循音觅奇兑换码获取方法 11-14
- 《原神》花羽会活动飞行技巧介绍 11-14