最新消息:本站持续更新中,请注意添加收藏夹。搜索关键词时,多换一个同义词。比如要搜索界面,可以尝试页面,画面,PER档等词汇。善于搜索,将大大提高你的查找效率。

ecology开发之clockpicker组件

底层代码 bron1984 2064浏览
组件 clockpicker组件(时间选择控件)
功能说明 基于jQuery时间选择控件,其特点如下:
以时钟形式显示时间,直观
基于html5绘制,仅支持IE9以上浏览器
使用说明 1.引入如下js
如果没有引入以下js,那么需要引入以下js:
<link rel=”stylesheet” type=”text/css” href=”/js/jquery-clockpicker/assets/css/bootstrap.min_wev8.css”>
<link rel=”stylesheet” type=”text/css” href=”/js/jquery-clockpicker/dist/bootstrap-clockpicker.min_wev8.css”>
<script type=”text/javascript” src=”/js/jquery-clockpicker/assets/js/bootstrap.min_wev8.js”></script>
<script type=”text/javascript” src=”/js/jquery-clockpicker/dist/bootstrap-clockpicker.min_wev8.js”></script>
2、页面指定一个显示区域
<!– Input group, just add class ‘clockpicker’, and optional data-* –>
<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>
<!– Or just a input –>
<input id=”demo-input” />
3、当页面加载完成后,在页面上调用如下方法
jQuery(document).ready(function(){
$(‘.clockpicker’).clockpicker()
.find(‘input’).change(function(){
// TODO: time changed
console.log(this.value);
});
$(‘#demo-input’).clockpicker({
autoclose: true
});

if (something) {
// Manual operations (after clockpicker is initialized).
$(‘#demo-input’).clockpicker(‘show’) // Or hide, remove …
.clockpicker(‘toggleView’, ‘minutes’);
}
});

例子
https://github.com/weareoutman/clockpicker
API https://github.com/weareoutman/clockpicker
Demo

转载请注明:赫非域 » ecology开发之clockpicker组件