Artifact
c9b3d3402ea6e395e2065190a1b2e8ceddf67d0c8587a200aeb015aad062ec5c:
0000: 3c 21 64 6f 63 74 79 70 65 20 68 74 6d 6c 3e 0a <!doctype html>.
0010: 3c 68 74 6d 6c 3e 0a 0a 3c 68 65 61 64 3e 0a 20 <html>..<head>.
0020: 20 3c 6d 65 74 61 20 63 68 61 72 73 65 74 3d 22 <meta charset="
0030: 75 74 66 2d 38 22 20 2f 3e 0a 20 20 3c 74 69 74 utf-8" />. <tit
0040: 6c 65 3e 4d 75 73 69 63 69 61 6e 27 73 20 54 6f le>Musician's To
0050: 6f 6c 6b 69 74 3c 2f 74 69 74 6c 65 3e 0a 20 20 olkit</title>.
0060: 3c 73 63 72 69 70 74 20 73 72 63 3d 22 2e 2e 2f <script src="../
0070: 64 69 73 74 2f 4e 65 78 75 73 55 49 2e 6a 73 22 dist/NexusUI.js"
0080: 3e 3c 2f 73 63 72 69 70 74 3e 0a 20 20 3c 73 63 ></script>. <sc
0090: 72 69 70 74 20 73 72 63 3d 22 2e 2e 2f 61 70 69 ript src="../api
00a0: 2f 6a 73 2f 6a 71 75 65 72 79 2e 6a 73 22 3e 3c /js/jquery.js"><
00b0: 2f 73 63 72 69 70 74 3e 0a 20 20 3c 73 63 72 69 /script>. <scri
00c0: 70 74 20 73 72 63 3d 22 6a 73 2f 54 6f 6e 65 39 pt src="js/Tone9
00d0: 2e 6a 73 22 3e 3c 2f 73 63 72 69 70 74 3e 0a 20 .js"></script>.
00e0: 20 3c 6d 65 74 61 20 6e 61 6d 65 3d 22 76 69 65 <meta name="vie
00f0: 77 70 6f 72 74 22 20 63 6f 6e 74 65 6e 74 3d 22 wport" content="
0100: 77 69 64 74 68 3d 32 30 30 2c 20 69 6e 69 74 69 width=200, initi
0110: 61 6c 2d 73 63 61 6c 65 3d 31 22 3e 0a 3c 2f 68 al-scale=1">.</h
0120: 65 61 64 3e 0a 0a 3c 62 6f 64 79 20 73 74 79 6c ead>..<body styl
0130: 65 3d 22 6d 61 72 67 69 6e 3a 30 3b 70 61 64 64 e="margin:0;padd
0140: 69 6e 67 3a 30 3b 22 3e 0a 0a 0a 20 20 3c 64 69 ing:0;">... <di
0150: 76 20 73 74 79 6c 65 3d 22 66 6f 6e 74 2d 73 69 v style="font-si
0160: 7a 65 3a 32 35 70 78 3b 6d 61 72 67 69 6e 3a 31 ze:25px;margin:1
0170: 30 70 78 3b 22 3e 0a 20 20 20 20 54 65 73 74 69 0px;">. Testi
0180: 6e 67 20 53 61 6e 64 62 6f 78 0a 20 20 3c 2f 64 ng Sandbox. </d
0190: 69 76 3e 0a 0a 20 20 3c 64 69 76 20 69 64 3d 22 iv>.. <div id="
01a0: 74 61 72 67 65 74 22 3e 3c 2f 64 69 76 3e 0a 0a target"></div>..
01b0: 0a 3c 2f 62 6f 64 79 3e 0a 3c 73 74 79 6c 65 3e .</body>.<style>
01c0: 0a 20 20 62 6f 64 79 20 7b 0a 20 20 20 20 66 6f . body {. fo
01d0: 6e 74 2d 66 61 6d 69 6c 79 3a 20 68 65 6c 76 65 nt-family: helve
01e0: 74 69 63 61 3b 0a 20 20 7d 0a 0a 20 20 5b 6e 65 tica;. }.. [ne
01f0: 78 75 73 2d 75 69 5d 20 7b 0a 20 20 20 20 6d 61 xus-ui] {. ma
0200: 72 67 69 6e 3a 20 31 30 70 78 3b 0a 20 20 20 20 rgin: 10px;.
0210: 66 6c 6f 61 74 3a 20 6c 65 66 74 3b 0a 20 20 7d float: left;. }
0220: 0a 0a 20 20 23 74 61 72 67 65 74 20 7b 0a 20 20 .. #target {.
0230: 20 20 77 69 64 74 68 3a 20 35 30 30 70 78 3b 0a width: 500px;.
0240: 20 20 20 20 68 65 69 67 68 74 3a 20 35 30 30 70 height: 500p
0250: 78 3b 0a 20 20 20 20 62 6f 72 64 65 72 3a 20 64 x;. border: d
0260: 61 73 68 65 64 20 32 70 78 20 23 33 33 33 3b 0a ashed 2px #333;.
0270: 20 20 7d 0a 3c 2f 73 74 79 6c 65 3e 0a 3c 73 63 }.</style>.<sc
0280: 72 69 70 74 3e 0a 20 20 76 61 72 20 74 68 69 6e ript>. var thin
0290: 67 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 53 65 g = new Nexus.Se
02a0: 71 75 65 6e 63 65 72 28 27 23 74 61 72 67 65 74 quencer('#target
02b0: 27 2c 7b 0a 20 20 20 20 27 73 69 7a 65 27 3a 20 ',{. 'size':
02c0: 5b 34 30 30 2c 32 30 30 5d 2c 0a 20 20 20 20 27 [400,200],. '
02d0: 6d 6f 64 65 27 3a 20 27 74 6f 67 67 6c 65 27 2c mode': 'toggle',
02e0: 0a 20 20 20 20 27 72 6f 77 73 27 3a 20 35 2c 0a . 'rows': 5,.
02f0: 20 20 20 20 27 63 6f 6c 75 6d 6e 73 27 3a 20 31 'columns': 1
0300: 30 2c 0a 20 20 20 7d 29 0a 0a 20 20 74 68 69 6e 0,. }).. thin
0310: 67 2e 6f 6e 28 27 63 68 61 6e 67 65 27 2c 20 78 g.on('change', x
0320: 20 3d 3e 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 => console.log(
0330: 78 29 29 0a 0a 0a 3c 2f 73 63 72 69 70 74 3e 0a x))...</script>.
0340: 0a 3c 2f 68 74 6d 6c 3e .</html>