bootstrap-progressbar-extension/index.html at master · kdstarter/bootstrap-progressbar-extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
	<title>Progressbar Demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="assets/bootstrap.css">
	<script type="text/javascript" src="assets/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="assets/bootstrap.js"></script>
	<script type="text/javascript" src="assets/bootstrap-progressbar.js"></script>
</head>

<body>
<div class="container">
	<h2>进度条示例</h2>
	<div>
		<div id="progressbar"></div>
		<span class="pull-right badge count"></span>
	</div>

	<label>最大值</label><input type="text" class="input-mini maximum-input">
	<label>递增值</label><input type="text" class="input-mini step-input">
	<label>位置</label><input type="text" class="input-mini position-input">
	<div class="pull-right">
		<input type="button" class="btn btn-primary step-btn" value="单步">
		<input type="button" class="btn btn-primary reset-btn" value="重置">
		<input type="button" class="btn btn-primary start-btn" value="开始">
	</div>
</div>

<script type="text/javascript">
	$(function () {
		bar = $('#progressbar');
		bar.bind('positionChanged', function(event) {
			event.bar.changedLabel = '当前' + event.bar.position + '人';
		})
		bar.bind('labelLoaded', function(event) {
			i = event.labelIndex;
			event.bar.loadedLabel = event.bar.getMarker(i)+'人/￥' + event.bar.getMarkerLabel(i);
		})
		bar.progressbar({
			step: 20,
			barSize: 3,
			minimum: 4,
			maximum: 300,
			averageStep: false,
			markers: [6, 50, 300],
			badgeClasses: ['badge-info'],
			markerLabels: ['60', '100', '300']
		});

		$('.step-btn').bind("click", function (e) {
			bar.progressbar('stepIt');
		});

		$('.reset-btn').bind("click", function (e) {
			bar.progressbar('reset');
		});

		$('.start-btn').bind("click", function (e) {
			bar.progressbar('start');
		});
	});
</script>
</body>
</html>