test_popup.php

  1. <?php
  2. define('COLORMAP_ROOT', '');
  3. ?><!DOCTYPE html>
  4. <html lang="es" dir="ltr">
  5. <head>
  6. <meta charset="utf-8">
  7. <title>ColorMap pop-up</title>
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  9. <script src="<?=COLORMAP_ROOT?>colormap.js"></script>
  10. <link href="<?=COLORMAP_ROOT?>colormap.css" rel="stylesheet">
  11. <style>
  12. body { background-color:#999; }
  13. #cm_selection { display:flex; }
  14. #cm_sampling { width:100px; height:100px; border:1px solid #000; cursor:pointer; }
  15. #cm_clicking { margin-left:1em; }
  16. #cm_buttons { display:flex; flex-direction:row; width:100px; }
  17. </style>
  18. <script>
  19. $(function() {
  20. var colormap = $('#colormap');
  21. colormap.hide();
  22.  
  23. $(document).click(function() {
  24. colormap.hide();
  25. });
  26. $('#cm_sampling').click(function (event) {
  27. event.stopPropagation();
  28. if (colormap.is(':visible')) colormap.hide();
  29. else {
  30. ColorMap.setColor(getColor());
  31. colormap.show();
  32. }
  33. });
  34.  
  35. ColorMap.setSamplingId('cm_sampling');
  36. ColorMap.setCallback(function(color) {
  37. showColor(color);
  38. });
  39.  
  40. function getColor() {
  41. return $('#cm_clicking').text();
  42. }
  43. function showColor(color) {
  44. $('#cm_clicking').text(color);
  45. }
  46. });
  47.  
  48. </script>
  49. </head>
  50. <body>
  51. <h1>ColorMap pop-up</h1>
  52. <div id="colormap">
  53. <?php include COLORMAP_ROOT."colormap.php" ?>
  54. </div>
  55. <h2>Color</h2>
  56. <div id="cm_selection">
  57. <p id="cm_sampling">sampling</p>
  58. <p id="cm_clicking">clicking</p>
  59. </div>
  60. </body>
  61. </html>
  62.  

Proinf.net