Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX][JavaScript]podglad input w popup, pojedyncze wybieranie
martex
post
Post #1





Grupa: Zarejestrowani
Postów: 133
Pomógł: 4
Dołączył: 7.11.2012
Skąd: Połaniec

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

Witam jak w temacie poszukuje jakiegos tutoriala bądz moze ktos wie jak takie cos zrobic :
(IMG:http://x4ql.nazwa.pl/opis_form.png)

przedstawiam to na obrazku
mam formularz i przy kazdym inpucie lupke do podgladu
po wpisaniu np tutul 1 klikam na lupke i pojaiwa sie popup z podgladem wpisu
a jesli wybiore np sam opis to lupka podgladam sam opi

chcialbym to zrobic jakos w js zeby nie przeladowywac strony za pomoca php udaje sie wysylka formularza ale juz w nowej karcie
a tutaj zrobilem juz fajny popup tylko trzeba by go podpiac

zna ktos jakis tutorial lub nakieruje mnie jak to zrobic (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
styryl
post
Post #2





Grupa: Zarejestrowani
Postów: 223
Pomógł: 27
Dołączył: 16.04.2008
Skąd: Bakutilu

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

Wykorzystaj jquery oraz zdarzenie click() . Po kliknięciu w lupkę pobierz dane z formularza "val()" i zaktualizuj kod popupa. To jest tylko jeden ze sposobów.

http://api.jquery.com/click/
http://api.jquery.com/val/
http://api.jquery.com/html/
Go to the top of the page
+Quote Post
martex
post
Post #3





Grupa: Zarejestrowani
Postów: 133
Pomógł: 4
Dołączył: 7.11.2012
Skąd: Połaniec

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

znalazłem takie rozwiazanie niby działa ale to jeszcze nie to bo działa tylko pierwsza luka :/ i pokazuje wszystko :/
wrzucam komplet bez styli oczywiscie
pytanie jeszcze jak to rozdzielic aby podglad byl lupka od danego inputu kazda osobno

teraz mam tylko pierwsza lupka i wszystko na raz
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title> Popup  </title>
  4. <meta charset="utf-8" />
  5. <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
  6. <script src="jquery.js"></script>
  7. <script type="text/javascript" src="popup.js"></script>
  8. </head>
  9. <body>
  10. <div style="margin-top:220px;">
  11. <input type="text" class="textin" id="title"><input type="image" value="" src="loupe_blue.png" class="loupe" id="pop"><br />
  12. <input type="text" class="textin" id="title1"><input type="image" value="" src="loupe_blue.png" class="loupe" id="pop"><br />
  13. <input type="text" class="textin" id="title2"><input type="image" value="" src="loupe_blue.png" class="loupe" id="pop"><br />
  14. <input type="text" class="textin" id="title3"><input type="image" value="" src="loupe_blue.png" class="loupe" id="pop">
  15. </div>
  16.  
  17. <script type="text/javascript">  <!-- preview popup -->
  18. 	$('#title').keyup(function() {
  19.     $('#title_preview').html($('#title').val());
  20. 	});
  21. 	$('#title1').keyup(function() {
  22.     $('#title_preview1').html($('#title1').val());
  23. 	});
  24. 	$('#title2').keyup(function() {
  25.     $('#title_preview2').html($('#title2').val());
  26. 	});
  27. 	$('#title3').keyup(function() {
  28.     $('#title_preview3').html($('#title3').val());
  29. 	});
  30. </script>
  31.  
  32. <br />
  33. <form id="popup_form" style="display:none; margin-left:400px;">
  34. 	<a href="#" id="popup_close" class="popup_close">X</a>
  35. 	Tak będzie wyglądał tekst w serwisie: <br />
  36. 	<div class="popup_title"><div id="title_preview">Tytuł A:</div></div><br />
  37. 	<div class="popup_column_left">
  38. 	<img src="/img/opicture3.png">
  39. 	</div>
  40.  
  41. 	<div class="popup_column_right">
  42. 	<p><div id="title_preview1">Tytuł B:</div></p>
  43. 	<p><div id="title_preview2">Tytuł C:</div></p>
  44. 	<p><div id="title_preview3">Tytuł D:</div></p>
  45. 	</div>
  46. 	<br />
  47. </form>
  48.  
  49.  
  50. </body>
  51. </html>
[HTML] pobierz, plaintext


script wyskakujacego popup: 
[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2. //open popup
  3. $("#pop").click(function(){
  4. $("#popup_form").fadeIn(1000);
  5. positionPopup();
  6. });
  7.  
  8. //close popup
  9. $("#popup_close").click(function(){
  10. $("#popup_form").fadeOut(500);
  11. });
  12. });
  13.  
  14. //position the popup at the center of the page
  15. function positionPopup(){
  16. if(!$("#popup_form").is(':visible')){
  17. return;
  18. }
  19. $("#popup_form").css({
  20. top: ($(window).width() - $('#popup_form').width()) / 7,
  21. position:'absolute'
  22. });
  23. }
  24.  
  25. //maintain the popup at center of the page when browser resized
  26. $(window).bind('resize',positionPopup);
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
styryl
post
Post #4





Grupa: Zarejestrowani
Postów: 223
Pomógł: 27
Dołączył: 16.04.2008
Skąd: Bakutilu

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

Zamień: 

[PHP] pobierz, plaintext 
  1. //open popup
  2. $("#pop").click(function(){
  3. $("#popup_form").fadeIn(1000);
  4. positionPopup();
  5. });
[PHP] pobierz, plaintext


Na:

[PHP] pobierz, plaintext 
  1. //open popup
  2. $(".loupe").click(function(){
  3. $("#popup_form").fadeIn(1000);
  4. positionPopup();
  5. });
[PHP] pobierz, plaintext


Ten post edytował styryl 21.08.2013, 12:13:57
Go to the top of the page
+Quote Post
martex
post
Post #5





Grupa: Zarejestrowani
Postów: 133
Pomógł: 4
Dołączył: 7.11.2012
Skąd: Połaniec

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

dzieki działa (IMG:style_emoticons/default/smile.gif) ale mam jeszcze pytanko czy to poprwany sposób czy lepiej użyć .click .val .html (IMG:style_emoticons/default/questionmark.gif) a moze jeszcze jakiś inny (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 23:37
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn