git @ Cat's Eye Technologies yoob.js / master eg / element-factory.html
master

Tree @master (Download .tar.gz)

element-factory.html @master — raw · history · blame 

 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
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>yoob/element-factory.js Demo</title>
</head>
<body>

<h1>yoob/element-factory.js Demo</h1>
<h4>Look at the browser's console to see the effect of some controls.</h4>

<div id="container"></div>

</body>
<script src="../src/yoob/element-factory.js"></script>
<script type="text/javascript">
  var container = document.getElementById('container');

  var p = yoob.makeParagraph(container, "This element was created by Javascript.");
  var panel = yoob.makePanel(container, "Collapsible Panel", false);
  yoob.makeButton(panel, "Click me!", function(e) {
      p.style.border = "1px solid black";
  });

  var select = yoob.makeSelect(panel, "Select:", [
      ['0', 'Zero'],
      ['1', 'One']
  ], function(key) {
      console.log(key);
  }, '1');

  var canvas = yoob.makeCanvas(container, 100, 100);
  canvas.style.border = "1px solid blue";

  yoob.makeLineBreak(container);

  yoob.makeRangeControl(container, {
      label: "Speed:",
      min: 0,
      max: 100,
      value: 50,
      callback: function(v) {
          console.log('new speed:' + v);
      }
  });

  yoob.makeLineBreak(container);

  var svg = yoob.makeSVG(container);
  svg.style.height = "300px";
  svg.style.width = "500px";
  svg.style.border = "1px solid red";

  yoob.makeSVGElem(this.svg, "rect", {
      x: 100,
      y: 100,
      width: 500,
      height: 200,
      fill: "#603020"
  });
  
  yoob.makeSVGElem(this.svg, "circle", {
      cx: 100,
      cy: 100,
      r: 50,
      fill: "black",
      stroke: "white"
  });
</script>