Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
40 aurelien 1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
	<meta charset="UTF-8" />
5
	<title>jQuery UI Slider - Colorpicker</title>
6
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11
	<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
12
	<link type="text/css" href="../demos.css" rel="stylesheet" />
13
	<style type="text/css">
14
	#red, #green, #blue {
15
		float: left;
16
		clear: left;
17
		width: 300px;
18
		margin: 15px;
19
	}
20
	#swatch {
21
		width: 120px;
22
		height: 100px;
23
		margin-top: 18px;
24
		margin-left: 350px;
25
		background-image: none;
26
	}
27
	#red .ui-slider-range { background: #ef2929; }
28
	#red .ui-slider-handle { border-color: #ef2929; }
29
	#green .ui-slider-range { background: #8ae234; }
30
	#green .ui-slider-handle { border-color: #8ae234; }
31
	#blue .ui-slider-range { background: #729fcf; }
32
	#blue .ui-slider-handle { border-color: #729fcf; }
33
	#demo-frame > div.demo { padding: 10px !important; };
34
	</style>
35
	<script type="text/javascript">
36
	function hexFromRGB (r, g, b) {
37
		var hex = [
38
			r.toString(16),
39
			g.toString(16),
40
			b.toString(16)
41
		];
42
		$.each(hex, function (nr, val) {
43
			if (val.length == 1) {
44
				hex[nr] = '0' + val;
45
			}
46
		});
47
		return hex.join('').toUpperCase();
48
	}
49
	function refreshSwatch() {
50
		var red = $("#red").slider("value")
51
			,green = $("#green").slider("value")
52
			,blue = $("#blue").slider("value")
53
			,hex = hexFromRGB(red, green, blue);
54
		$("#swatch").css("background-color", "#" + hex);
55
	}
56
	$(function() {
57
		$("#red, #green, #blue").slider({
58
			orientation: 'horizontal',
59
			range: "min",
60
			max: 255,
61
			value: 127,
62
			slide: refreshSwatch,
63
			change: refreshSwatch
64
		});
65
		$("#red").slider("value", 255);
66
		$("#green").slider("value", 140);
67
		$("#blue").slider("value", 60);
68
	});
69
	</script>
70
</head>
71
<body class="ui-widget-content" style="border:0;">
72
 
73
<div class="demo">
74
 
75
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
76
<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
77
Simple Colorpicker
78
</p>
79
 
80
<div id="red"></div>
81
<div id="green"></div>
82
<div id="blue"></div>
83
 
84
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
85
 
86
</div><!-- End demo -->
87
 
88
<div class="demo-description" style="clear:left;">
89
 
90
<p>Combine three sliders to create a simple RGB colorpicker.</p>
91
 
92
</div><!-- End demo-description -->
93
 
94
</body>
95
</html>