Efekt "click" (wcisniecia) w jquery Opcje

[AndyPSV]

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]

$(selector).click(); lub jak chcesz wysłac formularz to $(selector).submit();

[wiiir]

wydaje mi sie ze jemu chodzi bardziej o jakby animacje klikniecia, czyli w przypadku mousedown i mouseup
Napisz funkcje w jquery

[HTML] pobierz, plaintext 
$("jakis selektor").mousedown(function(){
 // tutaj zmieniasz sobie grafike przyciku, czyli np tlo albo src:
$(this).css("background","tutaj twoj obrazek");
//albo
$(this).attr("src","tutaj twoj obrazek");
}).mouseup(function(){
//tutaj wywolujesz to co napisal kolega wyzej :)
// w sumie mozna jeszcze przywrocic obrazek przed kliknieciem 
})
 
[HTML] pobierz, plaintext 

w ten sposob mozesz uzykac efekt wcisniecia (IMG:style_emoticons/default/smile.gif)

Ten post edytował wiiir 6.09.2010, 07:28:15

[AndyPSV]

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 
<script type='text/javascript'>
				/* <![CDATA[ */
				jQuery(function($){
					$("#thumbup").mousedown(function(){
						$(this).css("background","<% $TPL %>i/ico/thumb_up_.png");
						$(this).attr("src","<% $TPL %>i/ico/thumb_up.png");
						}).mouseup(function(){
							$(this).click();
						})
 
				});
 
				jQuery(function($){
					$("#thumbdown").mousedown(function(){
						$(this).css("background","<% $TPL %>i/ico/thumb_down_.png");
						$(this).attr("src","<% $TPL %>i/ico/thumb_down.png");
						}).mouseup(function(){
							$(this).click();
						})
 
				});
				/* ]]> */
				</script>
 
----
 
<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]

w tym kodzie co napisales jest niepotrzebna jedna rzecz, mianowicie napisalem ci cos takiego

[HTML] pobierz, plaintext 
 
$(this).css("background","tutaj twoj obrazek");
 
//albo
 
$(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 
$(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 
//js
<script>
//funkcja ktora ustawia wartosc w formularzu w zaleznosci na co klikniemy
function wyslij(typ){
$(":input[name=type_thumb]").val(typ)
//wyslanie formularza
$("form[name=thumb]").submit();
}
</script>
<form name="thumb" method="POST" action="toja sciezka do skryptu">
<input type="hidden" name="type_thumb">
</form>
[HTML] pobierz, plaintext 

i w skrycie odbierasz

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

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

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

[AndyPSV]

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 
<script type='text/javascript'>
				/* <![CDATA[ */
				jQuery(function($){
					$("#thumbdown").mousedown(function(){
						$(this).css("background","<% $TPL %>i/ico/thumb_down_.png");
						$(this).attr("src","<% $TPL %>i/ico/thumb_down.png");
						}).mouseup(function(){
							$(this).click();
							wyslij(0);
						})
				});
 
				jQuery(function($){
					$("#thumbup").mousedown(function(){
						$(this).css("background","<% $TPL %>i/ico/thumb_up_.png");
						$(this).attr("src","<% $TPL %>i/ico/thumb_up.png");
						}).mouseup(function(){
							$(this).click();
							wyslij(1);
						})
				});
				/* ]]> */
				</script>
 
				<script>
				function wyslij(typ){
					$(":input[name=type_thumb]").val(typ)
					$("form[name=thumb]").submit();
				}
				</script>
 
				<br/><br/>
				<div class="reference">
				<h5><% $_[references]|upper %></h5><br/>
				<% $_[reference_nfo] %><br/>
 
				<form action='<% $URL %><% $_GET[0] %>/reference' method='post'>
				<div>
				<input type='hidden' name='st4' value='<% $HIDE %>'/>
				<input type="hidden" name="type_thumb">
 
				<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'/>
				<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>
				</div>
				</form>
[HTML] pobierz, plaintext 

[wiiir]

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 
$(this).css("background","<% $TPL %>i/ico/thumb_down_.png");
$(this).css("background","<% $TPL %>i/ico/thumb_up_.png");
$(this).click();
[HTML] pobierz, plaintext 

[AndyPSV]

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]

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]

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 
<script type='text/javascript'>
					/* <![CDATA[ */
					jQuery(function($){
						$("#thumbdown").mousedown(function(){
							$(this).css("background","<% $TPL %>i/ico/thumb_down_.png");
							$(this).attr("src","<% $TPL %>i/ico/thumb_down.png");
							}).mouseup(function(){
								$(this).click();
								wyslij(0);
							})
					});
 
					jQuery(function($){
						$("#thumbup").mousedown(function(){
							$(this).css("background","<% $TPL %>i/ico/thumb_up_.png");
							$(this).attr("src","<% $TPL %>i/ico/thumb_up.png");
							}).mouseup(function(){
								$(this).click();
								wyslij(1);
							})
					});
					/* ]]> */
					</script>
 
					<script>
					function wyslij(typ){
						$(":input[name=type_thumb]").val(typ)
						$("form[name=thumb]").submit();
					}
					</script>
 
					<br/><br/>
					<div class="reference">
					<h5><% $_[references]|upper %></h5><br/>
					<% $_[reference_nfo] %><br/>
 
					<form action='<% $URL %><% $_GET[0] %>/reference' method='post'>
					<div>
					<input type='hidden' name='review' value='<% $HIDE %>'/>
					<input type="hidden" name="type_thumb">
 
					<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'/>
					<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>
					</div>
					</form>
 
 
					</div>
					<div class='low' style='padding-left:10px'><% $_[reference_nfo2] %></div>
[HTML] pobierz, plaintext 

[wiiir]

jak mozesz naraz (jednoczesnie) wcisnac 2 przyciki skoro jeden przycisk to jeden obrazek, czyli moge wcisnac albo np lewy albo prawy

[AndyPSV]

w tym kodzie co podalem wczesniej jest to mozliwe, moglbys podac poprawiony kod? to wszystko o co prosze