jQuery UI Slider 的仿 Window Azure 效果

Zeuxis  2012-11-24  Notes

本應該昨天就需要記錄的.
不過由於在忙別的事情.卹以只好推到現在才記錄.
有此記錄.主要是因為
朋友問了可否做出類似於 Window Azure 計價錢的效果
記錄一下.

測試頁面:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
< !doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="default.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function() {
	// Slider 1
	var slider1MatchJobs = [
		{ "name": "零售",      "money": 26 },
		{ "name": "金融",      "money": 10 },
		{ "name": "專業人士",   "money": 11 },
		{ "name": "服務",      "money": 14 },
		{ "name": "批發/工程",  "money": 11 },
		{ "name": "飲食",       "money": 8 }
	];

	$("#slider-1").slider({
		value:1,
		min: 1,
		max: slider1MatchJobs.length,
		step: 1,
		slide: function(event, ui) {
			var jobPosition = slider1MatchJobs[ui.value - 1]['name'];
			var gotMoney = slider1MatchJobs[ui.value - 1]['money'] + "萬";

			$("#slider-content-1 #display").html(jobPosition + " - " + gotMoney);
		}
	});

	var firstJobPosition = slider1MatchJobs[0]['name'];
	var firstGotMoney = slider1MatchJobs[0]['money'] + "萬";

	$("#slider-content-1 #display").html(firstJobPosition + ' - ' + firstGotMoney);

	// Slider 2
	var slider1MatchService = [
		{ "total": "80,000",  "each": 0.06 },
		{ "total": "150,000", "each": 0.05 },
		{ "total": "250,000", "each": 0.04 },
		{ "total": "350,000", "each": 0.038 },
		{ "total": "500,000", "each": 0.036 },
	];

	$("#slider-2").slider({
		value:1,
		min: 1,
		max: slider1MatchService.length,
		step: 1,
		slide: function(event, ui) {
			var total = slider1MatchService[ui.value - 1]['total'];
			var each = "$" + slider1MatchService[ui.value - 1]['each'] + "/email";
			$("#slider-content-2 #display").html(total + " - " + each);
		}
	});

	var total = slider1MatchService[0]['total'];
	var each = "$" + slider1MatchService[0]['each'] + "/email";

	$("#slider-content-2 #display").html(total + ' - ' + each);
});
</script>
</head>
<body>

<ul>
	<li>
		<!--Slider 1-->
		<span class="slider-group">
			<span id="slider-content-1" class="slider-content">
				<span id="display"></span>
			</span>
			<span id="slider-1" class="slider-div"></span>
		</span>
		<table border="0" class="caption">
		<tr>
			<td width="79px">零售</td>
			<td width="79px">金融</td>
			<td width="79px">專業人士</td>
			<td width="79px" align="center">服務</td>
			<td width="89px" align="right">批發/工程</td>
			<td width="70px" align="right">飲食</td>
		</tr>
		</table>
	</li>
	<li>
		<!--Slider 2-->
		<span class="slider-group">
			<span id="slider-2" class="slider-div"></span>
			<span id="slider-content-2" class="slider-content">
				<span id="display"></span>
			</span>
		</span>
		<table border="0" class="caption">
		<tr>
			<td width="95px">80,000</td>
			<td width="95px">150,000</td>
			<td width="95px" align="center">250,000</td>
			<td width="95px" align="right">350,000</td>
			<td width="95px" align="right">500,000</td>
		</tr>
		</table>
	</li>
</ul>

</body>
</html>

樣式檔案:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
/*  */
ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

ul li {
	padding: 10px 0px;
	clear: both;
}

ul li .slider-group {
	display: block;
}

ul li table.caption {
	display: block;
	clear:left;
}

.slider-content {
	float: left;
	display: block;
	min-width: 100px;
	margin: -3px 0 0 20px;
	font-size: 12px;
	line-height: 21px;
}

/* Bar */
.slider-div {
	width: 475px;
	float: left;
	display: block;
	clear: both;
	min-height: 1px;
}

.ui-slider {
	position: relative;
	text-align: left;
	background: #E0E2E2;
	border: 2px solid white;
	z-index: 1001;
}

.ui-slider-horizontal {
	height: 10px;
	margin-bottom: 0;
}

/* Click point */
.ui-slider .ui-slider-handle {
	z-index: 1002;
}

.ui-slider-horizontal .ui-slider-handle {
	top: -7px;
	margin-left: -2px;
	height: 20px;
	width: 7px;
}

.ui-slider .ui-slider-handle {
	position: absolute;
	cursor: pointer;
}

.ui-slider a {
	outline: 0;
	text-decoration: none;
	color: white;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border: 2px solid white;
	background: black;
}
© Copyright 2007 - 2023 by Zeuxis Lo.