Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Efekt "click" (wcisniecia) w jquery
Forum PHP.pl > Forum > XML, AJAX
AndyPSV
6.09.2010, 02:11:53
http://img3.imageshack.us/img3/7678/clickajax.gif

chodzi o to w jaki sposob zrobic "wcisniecie" (i aby bylo one przekazane w formularzu)
moglby ktos podac jakis przyklad lub gotowy skrypt? (mysle, ze jest bardzo prosty)
masiakla
6.09.2010, 02:38:34
$(selector).click(); lub jak chcesz wysłac formularz to $(selector).submit();
wiiir
6.09.2010, 07:27:47
wydaje mi sie ze jemu chodzi bardziej o jakby animacje klikniecia, czyli w przypadku mousedown i mouseup
Napisz funkcje w jquery
[HTML] pobierz, plaintext 
  1. $("jakis selektor").mousedown(function(){
  2.  // tutaj zmieniasz sobie grafike przyciku, czyli np tlo albo src:
  3. $(this).css("background","tutaj twoj obrazek");
  4. //albo
  5. $(this).attr("src","tutaj twoj obrazek");
  6. }).mouseup(function(){
  7. //tutaj wywolujesz to co napisal kolega wyzej :)
  8. // w sumie mozna jeszcze przywrocic obrazek przed kliknieciem 
  9. })
  10.  
[HTML] pobierz, plaintext

w ten sposob mozesz uzykac efekt wcisniecia smile.gif
AndyPSV
6.09.2010, 14:23:23
dziala! super dziala
jednak to co potrzebuje jeszcze to:
1. aby tylko jedna z "raczek" mogla byc wcisnieta
2. aby w <form> gdzie sa znajduja sie te obrazki byl jakis przekaznik w stylu $_POST['thumbdown'] , $_POST['thumbup'] i aby pokazywal, ktory jest "on" (najlepiej $_POST['thumb'] -> 'up' or 'down')

moglby ktos pomoc?
dziekuje serdecznie

oto kod:

[HTML] pobierz, plaintext 
  1. <script type='text/javascript'>
  2. 				/* <![CDATA[ */
  3. 				jQuery(function($){
  4. 					$("#thumbup").mousedown(function(){
  5. 						$(this).css("background","<% $TPL %>i/ico/thumb_up_.png");
  6. 						$(this).attr("src","<% $TPL %>i/ico/thumb_up.png");
  7. 						}).mouseup(function(){
  8. 							$(this).click();
  9. 						})
  10.  
  11. 				});
  12.  
  13. 				jQuery(function($){
  14. 					$("#thumbdown").mousedown(function(){
  15. 						$(this).css("background","<% $TPL %>i/ico/thumb_down_.png");
  16. 						$(this).attr("src","<% $TPL %>i/ico/thumb_down.png");
  17. 						}).mouseup(function(){
  18. 							$(this).click();
  19. 						})
  20.  
  21. 				});
  22. 				/* ]]> */
  23. 				</script>
  24.  
  25. ----
  26.  
  27. <img src='<% $TPL %>i/ico/thumb_up_.png' id='thumbup' alt='thumb up'/> <img src='<% $TPL %>i/ico/thumb_down_.png' id='thumbdown' alt='thumb down'/>
[HTML] pobierz, plaintext
wiiir
6.09.2010, 14:50:46
w tym kodzie co napisales jest niepotrzebna jedna rzecz, mianowicie napisalem ci cos takiego
[HTML] pobierz, plaintext 
  1.  
  2. $(this).css("background","tutaj twoj obrazek");
  3.  
  4. //albo
  5.  
  6. $(this).attr("src","tutaj twoj obrazek");
[HTML] pobierz, plaintext

tam jest albo wiec nie musisz wykonywac 2 operacji tylko ta ktora u ciebie powinna byc wykonana z tego co sadze to u ciebie ta druga czy 

[HTML] pobierz, plaintext 
  1. $(this).attr("src","tutaj twoj obrazek");
[HTML] pobierz, plaintext


co do twoich pytan:
odp 1
Piszesz tylko funkcje dla jednego selectora, nie wiem ktory chcesz zeby byl wciskany, wiec tylko np dla przycisku o id thumbdown lub thumbup

odp 2
[HTML] pobierz, plaintext 
  1. //js
  2. <script>
  3. //funkcja ktora ustawia wartosc w formularzu w zaleznosci na co klikniemy
  4. function wyslij(typ){
  5. $(":input[name=type_thumb]").val(typ)
  6. //wyslanie formularza
  7. $("form[name=thumb]").submit();
  8. }
  9. </script>
  10. <form name="thumb" method="POST" action="toja sciezka do skryptu">
  11. <input type="hidden" name="type_thumb">
  12. </form>
[HTML] pobierz, plaintext


i w skrycie odbierasz

[PHP] pobierz, plaintext 
  1. $zmienna = $_POST['type_thumb']?;
[PHP] pobierz, plaintext


i teraz u ciebie w kodzie gdzie masz obsluge tych raczek czyli

[HTML] pobierz, plaintext 
  1. 				jQuery(function($){
  2. 					$("#thumbdown").mousedown(function(){
  3. 						$(this).css("background","<% $TPL %>i/ico/thumb_down_.png");
  4. 						$(this).attr("src","<% $TPL %>i/ico/thumb_down.png");
  5. 						}).mouseup(function(){
  6.                                                         /*
  7.                                                          * tutaj uruchum funckje do wysylania, $(this).click() nie musi byc bo mouseup jest rowno znaczne 
  8.                                                          */
  9. 							wyslij(0); // 0 jesli ktos oddal glos na minus, 1 gdy ktos oddal glos na plus
  10. 						})
  11.  
[HTML] pobierz, plaintext

AndyPSV
6.09.2010, 15:00:01
nie testowalem jeszcze formularza, jednak zostala ostatnia rzecz: moze wybrac tylko jedna opcje -> albo raczke do gory albo do dolu; kod wyglada tak
prosilbym o ostatnia pomoc, dziekuje; @wiiir: dzieki serdeczne za pomoc do tej pory

[HTML] pobierz, plaintext 
  1. <script type='text/javascript'>
  2. 				/* <![CDATA[ */
  3. 				jQuery(function($){
  4. 					$("#thumbdown").mousedown(function(){
  5. 						$(this).css("background","<% $TPL %>i/ico/thumb_down_.png");
  6. 						$(this).attr("src","<% $TPL %>i/ico/thumb_down.png");
  7. 						}).mouseup(function(){
  8. 							$(this).click();
  9. 							wyslij(0);
  10. 						})
  11. 				});
  12.  
  13. 				jQuery(function($){
  14. 					$("#thumbup").mousedown(function(){
  15. 						$(this).css("background","<% $TPL %>i/ico/thumb_up_.png");
  16. 						$(this).attr("src","<% $TPL %>i/ico/thumb_up.png");
  17. 						}).mouseup(function(){
  18. 							$(this).click();
  19. 							wyslij(1);
  20. 						})
  21. 				});
  22. 				/* ]]> */
  23. 				</script>
  24.  
  25. 				<script>
  26. 				function wyslij(typ){
  27. 					$(":input[name=type_thumb]").val(typ)
  28. 					$("form[name=thumb]").submit();
  29. 				}
  30. 				</script>
  31.  
  32. 				<br/><br/>
  33. 				<div class="reference">
  34. 				<h5><% $_[references]|upper %></h5><br/>
  35. 				<% $_[reference_nfo] %><br/>
  36.  
  37. 				<form action='<% $URL %><% $_GET[0] %>/reference' method='post'>
  38. 				<div>
  39. 				<input type='hidden' name='st4' value='<% $HIDE %>'/>
  40. 				<input type="hidden" name="type_thumb">
  41.  
  42. 				<div style='padding-top:5px'><div class='l'><img src='<% $TPL %>i/ico/thumb_up_.png' id='thumbup' alt='thumb up'/> <img src='<% $TPL %>i/ico/thumb_down_.png' id='thumbdown' alt='thumb down'/>
  43. 				<input type='text' name='reference' id='reference' maxlength="999" style='width:195px' value='' title='<% $_[leave_reference] %>'/>&nbsp;</div><div class='l'><% include file = $TPLx.'m/_/save'.$HTML %></div><div class='f'></div></div>
  44. 				</div>
  45. 				</form>
[HTML] pobierz, plaintext
wiiir
6.09.2010, 16:39:01
nie rozumiem za bardzo.. ma na stronie 2 raczki i albo klika w jedna albo w druga

PS. w twoim wypadku to chyba nie bedzie potrzebne
[HTML] pobierz, plaintext 
  1. $(this).css("background","<% $TPL %>i/ico/thumb_down_.png");
  2. $(this).css("background","<% $TPL %>i/ico/thumb_up_.png");
  3. $(this).click();
[HTML] pobierz, plaintext
AndyPSV
6.09.2010, 20:45:14
chodzi o to, ze sa 2 raczki na stronie i 2wie da sie zaznaczyc!
chodzi o to, aby jedna tylko raczke dalo sie zaznaczyc na raz
wiiir
6.09.2010, 21:54:04
masz na mysli to ze jest wiecej takich formularzy na stronie gdzie mozna oddac glos czy cos tak ? No w tym przypadku te nasze funkcje nie beda dzialac jak trzeba.. dobrze cie rozumiem?
AndyPSV
7.09.2010, 00:14:44
mam tylko to:

wyzwanie polega tylko na tym, ze istnieje mozliwosc wcisniecia NARAZ dwoch przyciskow, chce aby bylo mozna wcisnac tylko jeden
czyli jak np. wcisne jeden i bede chcial drugi wcisnac -> zmienia sie zaznaczenie na ten drugi

zrozumiales wszystko?

[HTML] pobierz, plaintext 
  1. <script type='text/javascript'>
  2. 					/* <![CDATA[ */
  3. 					jQuery(function($){
  4. 						$("#thumbdown").mousedown(function(){
  5. 							$(this).css("background","<% $TPL %>i/ico/thumb_down_.png");
  6. 							$(this).attr("src","<% $TPL %>i/ico/thumb_down.png");
  7. 							}).mouseup(function(){
  8. 								$(this).click();
  9. 								wyslij(0);
  10. 							})
  11. 					});
  12.  
  13. 					jQuery(function($){
  14. 						$("#thumbup").mousedown(function(){
  15. 							$(this).css("background","<% $TPL %>i/ico/thumb_up_.png");
  16. 							$(this).attr("src","<% $TPL %>i/ico/thumb_up.png");
  17. 							}).mouseup(function(){
  18. 								$(this).click();
  19. 								wyslij(1);
  20. 							})
  21. 					});
  22. 					/* ]]> */
  23. 					</script>
  24.  
  25. 					<script>
  26. 					function wyslij(typ){
  27. 						$(":input[name=type_thumb]").val(typ)
  28. 						$("form[name=thumb]").submit();
  29. 					}
  30. 					</script>
  31.  
  32. 					<br/><br/>
  33. 					<div class="reference">
  34. 					<h5><% $_[references]|upper %></h5><br/>
  35. 					<% $_[reference_nfo] %><br/>
  36.  
  37. 					<form action='<% $URL %><% $_GET[0] %>/reference' method='post'>
  38. 					<div>
  39. 					<input type='hidden' name='review' value='<% $HIDE %>'/>
  40. 					<input type="hidden" name="type_thumb">
  41.  
  42. 					<div style='padding-top:5px'><div class='l'><img src='<% $TPL %>i/ico/thumb_up_.png' id='thumbup' alt='thumb up'/> <img src='<% $TPL %>i/ico/thumb_down_.png' id='thumbdown' alt='thumb down'/>
  43. 					<input type='text' name='reference' id='reference' maxlength="999" style='width:195px' value='<% $r[reference] %>' title='<% $_[leave_reference] %>'/>&nbsp;</div><div class='l'><% include file = $TPLx.'m/_/save'.$HTML %></div><div class='f'></div></div>
  44. 					</div>
  45. 					</form>
  46.  
  47.  
  48. 					</div>
  49. 					<div class='low' style='padding-left:10px'><% $_[reference_nfo2] %></div>
[HTML] pobierz, plaintext
wiiir
7.09.2010, 07:28:51
jak mozesz naraz (jednoczesnie) wcisnac 2 przyciki skoro jeden przycisk to jeden obrazek, czyli moge wcisnac albo np lewy albo prawy
AndyPSV
7.09.2010, 14:11:50
w tym kodzie co podalem wczesniej jest to mozliwe, moglbys podac poprawiony kod? to wszystko o co prosze
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.