websta.pl

Ruszam z nowym działem na blogu – Download. Będę tu umieszczać różnego rodzaju darmówki mojej produkcji. Na pierwszy ogień idzie plugin jQuery służący do pokazywania i ukrywania dodatkowych pól formularza.

demo | pobierz.zip

Jak używać

Pierwsze co musisz zrobić, to oczywiście pobrać paczkę z pluginem. Następnie dodać do Twojej strony bibliotekę jQuery (jeśli jeszcze nie używasz) oraz plugin (pamiętaj, żeby podać dobrą ścieżkę).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.websta.ukrywaniepol.js"></script>

Do rozwijania i zwijania dodatkowych pól formularza potrzebne będą elementy typu checkbox lub radio. Wycinek mojego formularza wygląd tak:

<div>
	<label>Więcej opcji: 
		<input type="checkbox" id="aktywator1" />
	</label>
</div>
 
<div id="dodatkowo1">
	<label>Dodatkowe opcje:</label>
	<textarea cols="50" rows="10">dodatkowo1</textarea>	
</div>

Żeby checkbox o id="aktywator1" rozwinął div id="dodatkowo1", który zawiera dodatkowe pole tekstowe, musi uruchomić plugin (zobacz źródło demo pluginu i cały kod):

<script type="text/javascript">
 
	$(function() {
 
		$('#aktywator1').ukryjpola({docelowy : 'dodatkowo1'});
 
	});
 
</script>

To tyle, na koniec zobacz schemat użycia i dwie dodatkowe opcje, których możesz użyć, czyli szybkość zwijania i rozwijania:

$("element otwierjący").ukryjpola({
	docelowy : 'element otwierany', 
	szybkoscpokaz : 'fast, normal lub slow – domyślnie slow',
	szybkoscukryj : 'fast, normal lub slow – domyślnie fast',
});

Zasady użytkowania

Zezwalam na użycie pluginu do celów komercyjnych i niekomercyjnych oraz zmiany w kodzie, pod warunkiem pozostawienia danych zawartych w nagłówku skryptu dotyczących autorstwa.

demo | pobierz.zip

Be Sociable, Share!

• 

Tagi: darmowe, jQuery, plugin, pobierz