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 Effects - Easing demo</title>
6
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7
	<script src="../../jquery-1.4.2.js"></script>
8
	<script src="../../ui/jquery.effects.core.js"></script>
9
	<link rel="stylesheet" href="../demos.css">
10
	<style>
11
	.graph {
12
		float: left;
13
		margin-left: 10px;
14
	}
15
	</style>
16
	<script>
17
	$(function() {
18
		if ( !$( "<canvas/>" )[0].getContext ) {
19
			$( "<div/>" ).text(
20
				"Your browser doesn't support canvas, which is required for this demo. " +
21
				"Give Firefox 3 a try!"
22
			).appendTo( "#graphs" );
23
			return;
24
		}
25
 
26
		var i = 0,
27
			width = 100,
28
			height = 100;
29
		$.each( $.easing, function( name, impl ) {
30
			// skip linear/jswing and any non functioning implementation
31
			if ( !$.isFunction( impl ) || /jswing/.test( name ) ) {
32
				return;
33
			}
34
			var graph = $( "<div/>" ).addClass( "graph" ).appendTo( "#graphs" ),
35
				text = $( "<div/>" ).text( ++i + ". " + name ).appendTo( graph ),
36
				canvas = $( "<canvas/>" ).appendTo( graph )[ 0 ];
37
			canvas.width = width;
38
			canvas.height = height;
39
			var drawHeight = height * 0.8,
40
				cradius = 10;
41
				ctx = canvas.getContext( "2d" );
42
			ctx.fillStyle = "black";
43
 
44
			ctx.beginPath();
45
			ctx.moveTo( cradius, 0 );
46
			ctx.quadraticCurveTo( 0, 0, 0, cradius );
47
			ctx.lineTo( 0, height - cradius );
48
			ctx.quadraticCurveTo( 0, height, cradius, height );
49
			ctx.lineTo( width - cradius, height );
50
			ctx.quadraticCurveTo( width, height, width, height - cradius );
51
			ctx.lineTo( width, 0 );
52
			ctx.lineTo( cradius, 0 );
53
			ctx.fill();
54
 
55
			ctx.strokeStyle = "#555";
56
			ctx.beginPath();
57
			ctx.moveTo( width * 0.1, drawHeight + .5 );
58
			ctx.lineTo( width * 0.9, drawHeight + .5 );
59
			ctx.stroke();
60
 
61
			ctx.strokeStyle = "#555";
62
			ctx.beginPath();
63
			ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
64
			ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
65
			ctx.stroke();
66
 
67
			ctx.strokeStyle = "white";
68
			ctx.beginPath();
69
			ctx.lineWidth = 2;
70
			ctx.moveTo( width * 0.1, drawHeight );
71
			$.each( new Array( width ), function( position ) {
72
				var val = impl( 0, position, 0, 1, height );
73
				if ( /linear|jswing/.test( name ) ) {
74
					val = position / width;
75
				}
76
				ctx.lineTo( position * 0.8 + width * 0.1,
77
					drawHeight - drawHeight * val * 0.7 );
78
			});
79
			ctx.stroke();
80
			graph.click(function() {
81
				$( canvas )
82
					.animate( { height: "hide" }, 2000, name )
83
					.animate( { left: 0 }, 800 )
84
					.animate( { height: "show" }, 2000, name );
85
			});
86
 
87
			graph.width( width ).height( height + text.height() + 10 );
88
		});
89
	});
90
	</script>
91
</head>
92
<body>
93
 
94
<div class="demo">
95
 
96
<div id="graphs"></div>
97
 
98
</div><!-- End demo -->
99
 
100
 
101
 
102
<div class="demo-description">
103
<p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p>
104
</div><!-- End demo-description -->
105
 
106
</body>
107
</html>