基于jQuery实现指针时钟插件



39 154 52



特效描述:基于jQuery实现 指针时钟,基于jQuery实现指针时钟插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/github.min.css">

2. 引入JS

<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript" src="assets/js/highlight.min.js"></script>

3. HTML代码

<div class="container">
	<div class="form-group">
		<h4>Default: </h4>
		<div class="input-group clockpicker">
			<input type="text" class="form-control" value="09:30">
			<span class="input-group-addon">
				<span class="glyphicon glyphicon-time"></span>
			</span>
		</div>
		<pre class="hljs-pre"><code class="html">&lt;div class="input-group clockpicker"&gt;
	&lt;input type="text" class="form-control" value="09:30"&gt;
	&lt;span class="input-group-addon"&gt;
		&lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
	&lt;/span&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$('.clockpicker').clockpicker();
&lt;/script&gt;</code></pre>
	</div>
	<div class="form-group">
		<h4>Place at left, align the arrow to top, auto close:</h4>
		<div class="clearfix">
			<div class="input-group clockpicker pull-center" data-placement="left" data-align="top" data-autoclose="true">
				<input type="text" class="form-control" value="13:14">
				<span class="input-group-addon">
					<span class="glyphicon glyphicon-time"></span>
				</span>
			</div>
		</div>
		<pre class="hljs-pre"><code class="html">&lt;div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true"&gt;
	&lt;input type="text" class="form-control" value="13:14"&gt;
	&lt;span class="input-group-addon"&gt;
		&lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
	&lt;/span&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$('.clockpicker').clockpicker();
&lt;/script&gt;</code></pre>
	</div>
	<div class="form-group">
		<h4>Set options in javascript, instead of <code>data-*</code> :</h4>
		<div class="input-group clockpicker" data-placement="top" data-align="left" data-donetext="Done">
			<input type="text" class="form-control" value="18:00">
			<span class="input-group-addon">
				<span class="glyphicon glyphicon-time"></span>
			</span>
		</div>
		<pre class="hljs-pre"><code class="html">&lt;div class="input-group clockpicker"&gt;
	&lt;input type="text" class="form-control" value="18:00"&gt;
	&lt;span class="input-group-addon"&gt;
		&lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
	&lt;/span&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$('.clockpicker').clockpicker({
	placement: 'top',
	align: 'left',
	donetext: 'Done'
});
&lt;/script&gt;</code></pre>
	</div>
	<div class="form-group">
		<h4>Set default value, input without addon, and manual operations:</h4>
		<div class="clearfix">
			<div class="pull-center clearfix" style="margin-bottom:10px;">
				<button type="button" class="btn btn-default pull-right" id="check-minutes">Check the minutes</button>
				<input class="form-control pull-right" id="single-input" value="" placeholder="Now" style="width:80px;margin-right:20px;">
			</div>
		</div>
		<pre class="hljs-pre"><code class="html">&lt;input class="form-control" id="single-input" value="" placeholder="Now"&gt;
&lt;button type="button" id="check-minutes"&gt;Check the minutes&lt;/button&gt;
&lt;script type="text/javascript"&gt;
var input = $('#single-input').clockpicker({
	placement: 'bottom',
	align: 'left',
	autoclose: true,
	'default': 'now'
});
// Manually toggle to the minutes view
$('#check-minutes').click(function(e){
	// Have to stop propagation here
	e.stopPropagation();
	input.clockpicker('show')
			.clockpicker('toggleView', 'minutes');
});
&lt;/script&gt;</code></pre>
	</div>
	<h3>Options</h3>
	<table class="table table-bordered table-striped">
	<thead><tr>
	<th>Name</th>
	<th>Default</th>
	<th>Description</th>
	</tr></thead>
	<tbody>
	<tr>
	<td>default</td>
	<td>''</td>
	<td>default time, 'now' or '13:14' e.g.</td>
	</tr>
	<tr>
	<td>placement</td>
	<td>'bottom'</td>
	<td>popover placement</td>
	</tr>
	<tr>
	<td>align</td>
	<td>'left'</td>
	<td>popover arrow align</td>
	</tr>
	<tr>
	<td>donetext</td>
	<td>'完成'</td>
	<td>done button text</td>
	</tr>
	<tr>
	<td>autoclose</td>
	<td>false</td>
	<td>auto close when minute is selected</td>
	</tr>
	<tr>
	<td>vibrate</td>
	<td>true</td>
	<td>vibrate the device when dragging clock hand</td>
	</tr>
	<tr>
	<td>fromnow</td>
	<td>0</td>
	<td>set default time to * milliseconds from now (using with default = 'now')</td>
	</tr>
	</tbody>
	</table>
	<h3>Operations</h3>
	<table class="table table-bordered table-striped">
	<thead><tr>
	<th>operation</th>
	<th>Arguments</th>
	<th>Description</th>
	</tr></thead>
	<tbody>
	<tr>
	<td>show</td>
	<td></td>
	<td>show the clockpicker</td>
	</tr>
	<tr>
	<td>hide</td>
	<td></td>
	<td>hide the clockpicker</td>
	</tr>
	<tr>
	<td>remove</td>
	<td></td>
	<td>remove the clockpicker (and event listeners)</td>
	</tr>
	<tr>
	<td>toggleView</td>
	<td>'hours' or 'minutes'</td>
	<td>toggle to hours or minutes view</td>
	</tr>
	</tbody>
	</table>
	<h3>What's included</h3>
	<pre class="hljs-pre"><code class="bash">clockpicker/
├── dist/
│   ├── bootstrap-clockpicker.css      # full code for bootstrap
│   ├── bootstrap-clockpicker.js
│   ├── bootstrap-clockpicker.min.css  # compiled and minified files for bootstrap
│   ├── bootstrap-clockpicker.min.js
│   ├── jquery-clockpicker.css         # full code for jquery
│   ├── jquery-clockpicker.js
│   ├── jquery-clockpicker.min.css     # compiled and minified files for jquery
│   └── jquery-clockpicker.min.js
└── src/                               # source code
    ├── clockpicker.css
    ├── clockpicker.js
    └── standalone.css                 # some styles picked from bootstrap</code></pre>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker()
	.find('input').change(function(){
		console.log(this.value);
	});
var input = $('#single-input').clockpicker({
	placement: 'bottom',
	align: 'left',
	autoclose: true,
	'default': 'now'
});
// Manually toggle to the minutes view
$('#check-minutes').click(function(e){
	// Have to stop propagation here
	e.stopPropagation();
	input.clockpicker('show')
			.clockpicker('toggleView', 'minutes');
});
if (/mobile/i.test(navigator.userAgent)) {
	$('input').prop('readOnly', true);
}
</script>
<script type="text/javascript">
hljs.configure({tabReplace: '    '});
hljs.initHighlightingOnLoad();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 浮动提示框 切换按钮 日期时间 时钟 日历 时间 日历插件 时间日期插件 表单 表单美化 表单插件 表单美化插件 浮动菜单 浮动导航 时间日期插件 时间日期 文本框 text文本框 表单提交

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到