Mercurial > hg > digilib-old

comparison client/digitallibrary/jquery/svg/svgBasics.html @ 756:ccf67eaf97ee jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added jQuery ui and svg javascripts
author hertzhaft
date Sun, 06 Feb 2011 22:17:41 +0100
parents
children aab01da232ef
comparison
equal deleted inserted replaced
755:4c0cc97a6399 756:ccf67eaf97ee
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
6 <title>jQuery SVG Basics</title>
7 <style type="text/css">
8 @import "jquery.svg.css";
9
10 #svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
11 </style>
12 <script type="text/javascript" src="../jquery-1.4.4.js"></script>
13 <script type="text/javascript" src="jquery.svg.js"></script>
14 <script type="text/javascript">
15 $(function() {
16 $('#svgbasics').svg({onLoad: drawInitial});
17 $('button').click(drawShape);
18 });
19
20 function drawInitial(svg) {
21 svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});
22 var g = svg.group({stroke: 'black', 'stroke-width': 2});
23 svg.line(g, 15, 75, 135, 75);
24 svg.line(g, 75, 15, 75, 135);
25 }
26
27 var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black'];
28
29 function drawShape() {
30 var shape = this.id;
31 var svg = $('#svgbasics').svg('get');
32 if (shape == 'rect') {
33 svg.rect(random(300), random(200), random(100) + 100, random(100) + 100,
34 {fill: colours[random(9)], stroke: colours[random(9)],
35 'stroke-width': random(5) + 1});
36 }
37 else if (shape == 'line') {
38 svg.line(random(400), random(300), random(400), random(300),
39 {stroke: colours[random(9)], 'stroke-width': random(5) + 1});
40 }
41 else if (shape == 'circle') {
42 svg.circle(random(300) + 50, random(200) + 50, random(80) + 20,
43 {fill: colours[random(9)], stroke: colours[random(9)],
44 'stroke-width': random(5) + 1});
45 }
46 else if (shape == 'ellipse') {
47 svg.ellipse(random(300) + 50, random(200) + 50, random(80) + 20, random(80) + 20,
48 {fill: colours[random(9)], stroke: colours[random(9)],
49 'stroke-width': random(5) + 1});
50 }
51 else if (shape == 'clear') {
52 svg.clear();
53 }
54 }
55
56 function random(range) {
57 return Math.floor(Math.random() * range);
58 }
59 </script>
60 </head>
61 <body>
62 <h1>jQuery SVG Basics</h1>
63 <p>This page demonstrates the very basics of the <a href="http://keith-wood.name/svg.html">jQuery SVG plugin</a>.
64 It contains the minimum requirements for using the plugin and
65 can be used as the basis for your own experimentation.</p>
66 <p>The page creates an SVG document in the area below and draws an initial display.
67 The buttons then add randomly sized and coloured shapes on demand.</p>
68 <p>For more detail see the <a href="http://keith-wood.name/svgRef.html">documentation reference</a> page.</p>
69 <div id="svgbasics"></div>
70 <p><button id="rect">Add rectangle</button> <button id="line">Add line</button>
71 <button id="circle">Add circle</button> <button id="ellipse">Add ellipse</button>
72 <button id="clear">Clear</button></p>
73 </body>
74 </html>