index.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Blockly Demo: Custom Dialog</title>
  6. <script src="../../blockly_compressed.js"></script>
  7. <script src="../../blocks_compressed.js"></script>
  8. <script src="../../msg/js/en.js"></script>
  9. <style>
  10. body {
  11. background-color: #fff;
  12. font-family: sans-serif;
  13. }
  14. h1 {
  15. font-weight: normal;
  16. font-size: 140%;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
  22. <a href="../index.html">Demos</a> &gt; Custom Dialog</h1>
  23. <p>This is a simple demo of replacing modal browser dialogs with HTML.</p>
  24. <p>Try creating new variables, creating variables with names already in
  25. use, or deleting multiple blocks on the workspace.
  26. </p>
  27. <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  28. <xml id="toolbox" style="display: none">
  29. <category name="Inputs" colour="230">
  30. <block type="math_number" gap="32"></block>
  31. <block type="text"></block>
  32. <block type="text_prompt_ext">
  33. <value name="TEXT">
  34. <shadow type="text">
  35. <field name="TEXT">abc</field>
  36. </shadow>
  37. </value>
  38. </block>
  39. </category>
  40. <sep></sep>
  41. <category name="Variables" colour="330" custom="VARIABLE"></category>
  42. <category name="Functions" colour="290" custom="PROCEDURE"></category>
  43. </xml>
  44. <script>
  45. var workspace = Blockly.inject('blocklyDiv',
  46. {media: '../../media/',
  47. toolbox: document.getElementById('toolbox')});
  48. </script>
  49. <script src="custom-dialog.js"></script>
  50. </body>
  51. </html>