Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Dynamiczne dodawanie punktu w html
trifek
post 14.01.2019, 09:53:22
Post #1





Grupa: Zarejestrowani
Postów: 340
Pomógł: 0
Dołączył: 28.09.2015

Ostrzeżenie: (0%)
-----


Witam,
Mam taki kod:

  1. <div class="container">
  2. <div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  3. aria-hidden="true">
  4. <div class="modal-dialog" role="document">
  5. <div class="modal-content">
  6. <div class="modal-header text-center">
  7. <h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
  8. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  9. <span aria-hidden="true">&times;</span>
  10. </button>
  11. </div>
  12. <div class="modal-body mx-3">
  13. <div class="md-form mb-5">
  14. <i class="fas fa-user prefix grey-text"></i>
  15. <input type="text" id="form3" class="form-control validate val1" name="val1">
  16. <label data-error="wrong" data-success="right" for="form3">Title</label>
  17. </div>
  18. <div class="md-form mb-4">
  19. <i class="fas fa-envelope prefix grey-text"></i>
  20. <input type="email" id="form2" class="form-control validate val2" name="val2">
  21. <label data-error="wrong" data-success="right" for="form2">Desc</label>
  22. </div>
  23. <div class="md-form mb-4">
  24. <i class="fas fa-envelope prefix grey-text"></i>
  25. <label data-error="wrong" data-success="right" for="form2">
  26. Coordinates click:
  27. <div class="coorX"></div>
  28. x
  29. <div class="coorY"></div>
  30. </label>
  31. </div>
  32. </div>
  33. <div class="modal-footer d-flex justify-content-center">
  34. <button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="scalize imgpo">
  40. <img src="img/jacket.png" alt="" class="target ">
  41. <div class="item-point" data-top="130" data-left="300" id="point1">
  42. <div><a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 1</h1>" data-placement="top" data-html="true" rel="tooltip"></a></div>
  43. </div>
  44. <div class="item-point" data-top="180" data-left="462" id="point2">
  45. <div><a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 2</h1>" data-placement="top" data-html="true" rel="tooltip"></a></div>
  46. </div>
  47. <div class="item-point" data-top="380" data-left="215" id="point3">
  48. <div><a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 3</h1>" data-placement="top" data-html="true" rel="tooltip"></a></div>
  49. </div>
  50. <div class="item-point" data-left="357" data-top="458" id="point4">
  51. <div><a href="#" class="toggle tooltips" title="<h1><b>xxxxx</b> <em>one</em> here too 4</h1>" data-placement="top" data-html="true" rel="tooltip"></a></div>
  52. </div>
  53. </div>
  54. </div>
  55. <a href="" class="btn btn-default btn-rounded mb-4 formAdd" data-toggle="modal" data-target="#modalSubscriptionForm" style="display:none"></a>
  56. <script type="text/javascript">
  57. $(document).ready(function(){
  58.  
  59. $('.imgpo').click(function(e) {
  60. var posX = $(this).position().left,posY = $(this).position().top;
  61. $('.coorX').html((e.pageX - posX -10));
  62. $('.coorY').html((e.pageY - posY -10));
  63. $(".tooltip").tooltip("hide");
  64. $('.formAdd').click();
  65. });
  66.  
  67. $('.saveBtn').click(function(e) {
  68. var val1 = $(".val1").val();
  69. var val2 = $(".val2").val();
  70.  
  71. var values = {
  72. 'val1' : val1,
  73. 'val2' : val2
  74. };
  75.  
  76.  
  77. alert('Save');
  78.  
  79.  
  80. $.ajax({
  81. url: "save.php",
  82. type: "post",
  83. data: values ,
  84. success: function (response) {
  85. alert('Save');
  86. },
  87. error: function(jqXHR, textStatus, errorThrown) {
  88. alert('Error');
  89. }
  90.  
  91.  
  92. });
  93.  
  94. });
  95.  
  96. $('.removeMe').on('click', function() {
  97. var number = $(this).attr('id');
  98. $('#point' + number).remove();
  99. $('.obiect' + number).remove();
  100. });
  101.  
  102. $('.scalize').scalize({
  103. styleSelector: 'circle',
  104. animationPopoverIn: 'flipInY',
  105. animationPopoverOut: 'flipOutY',
  106. animationSelector: 'pulse2'
  107. });
  108. /*
  109. $('.tooltips').tooltip({
  110. html: true,
  111. trigger: 'click',
  112. placement: 'top'
  113. })
  114. */
  115. const $tooltip = $('.tooltips');
  116. $tooltip.tooltip({
  117. html: true,
  118. trigger: 'click',
  119. placement: 'top',
  120. });
  121. $tooltip.on('show.bs.tooltip', () => {
  122. $('.tooltip').not(this).remove();
  123. });
  124. $tooltip.on('click', (ev) => { ev.stopPropagation(); })
  125.  
  126.  
  127. });
  128. </script>
  129. <div class="itemsBox">
  130. <form name="saveForm" action="#" method="post">
  131. <div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
  132. <div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
  133. <div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
  134. <div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
  135. </div>
  136.  
  137. <input type="submit" value="Save" />
  138. </form>




Powyższy kod wyświetla punkty na obrazku. Pod obrazkiem mam możliwośc kasowania punktów ze strony internetowej i z obrazka. Po kliknięciu na obrazek wyświetla się tooltip (Bootstrap). Po kliknięciu na na tło obrazka wyświetla się formularz dodawania punktu na zdjęciu. W formularzu znajdują się wspórzędne klikniętego punktu. To działa poprawnie.

W jaki sposób można zrobić zapis nowego punktu na obrazku?

Aby punkt na obrazku należy dodać kolejny kod do HTML:
  1. <div class="item-point" data-left="357" data-top="458" id="point4">
  2. <div><a href="#" class="toggle tooltips" title="<h1><b>xxxxx</b> <em>one</em> here too 4</h1>" data-placement="top" data-html="true" rel="tooltip"></a></div>
  3. </div>
  4.  
  5. <div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>

W jaki sposób to zrobić?

Podgląd: http://serwer1356363.home.pl/pub/component/index2.html

Ten post edytował trifek 14.01.2019, 09:55:56
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 10:14