基于jQuery實現指針時鐘插件



44 172 58



特效描述:基于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

加群請備注:從官網了解到

老夫子电子