ecology开发之clockpicker组件-赫非域

组件

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组件

与本文相关的文章