rangeRover/index.html at master · styopdev/rangeRover · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
	<head>
		<title>Range Rover plugin demo</title>
		<link rel="stylesheet" href="src/jquery.rangerover.css">
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Gudea">

		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

		<script type="text/javascript" src="src/jquery.rangerover.js"></script>

		<script type="text/javascript">
			$(function() {
				$("#range").rangeRover({
						range: true,
						mode: 'categorized', // default plain
						// data: {
						// 	start: 1900,
						// 	end: 1920,
						// 	exlude: [{ start: 1905, end: 1908 }]
						// },
            data: [
                {
                  name: 'Lenin',
                  start: 1917,
                  end: 1923,
                  color: '#6d99ff',
                  size: 20
                },
                {
                  name: 'Stalin',
                  start: 1923,
                  end: 1953,
                  color: '#ff0000',
                  size: 30
                },
                {
                  name: 'Khrushchev',
                  start: 1953,
                  end: 1964,
                  color: '#ffcc66',
                  size: 25
                },
                {
                  name: 'Brezhnev',
                  start: 1964,
                  end: 1982,
                  color: '#6bf442',
                  size: 10
              },
							{
								name: 'Dissolution',
								start: 1982,
								end: 1991,
								color: '#cccccc',
								size: 15
						}],
						onChange : function(val) {
							console.log('val', val);
						}
          });
       });
		</script>
	</head>
	<body>
		<h1> RangeRover plugin demo </h1>
		<div>
        <div id="range"></div>
		</div>

		<style type="text/css">
      body {
        background-color: #d5dde2;
				text-align: center;
      }
			#range {
			  width: 1000px;
				margin: 0 auto;
				margin-top: 100px;
			}
			* {
				font-family: "Gudea";
			}
		</style>
	</body>
</html>