AJAX Kurs od podstaw - jQuery

Menu

Ładowanie treści po kliknięciu

Wykonanie menu, które nie będzie przeładowywało całej strony rozpoczynamy od załadowania zewnętrznego dokumentu (tj. pliku fragment-abba.html) do elementu o identyfikatorze #content po wystąpieniu zdarzenia onclick. Zadanie to zrealizuje następujący kod jQuery:

[+]

[-]

 

 

JavaScript

1. $('#a1').click(function(){
2.    $('#content').load('fragment-abba.html');
3. });
4. <ol>
5.    <li id="a1">ABBA</li>
6. </ol>
7. <div id="content"></div>

Listing zwinięty - 7 linii

Najpierw wybieramy element o identyfikatorze #a1, któremu definiujemy zdarzenie onclick:

[+]

[-]

 

 

JavaScript

1. $('#a1').click(function(){
2.    ...
3. });

Listing zwinięty - 3 linii

Wewnątrz obsługi zdarzenia występuje ładowanie zewnętrznego dokumentu fragment-abba.html do elementu o identyfikatorze #content: $('#content').load('fragment-abba.html');

Kilka opcji menu

Jeśli menu zawiera kilka opcji:

[+]

[-]

 

 

HTML

1. <ol id="menu">
2.    <li id="a1">ABBA</li>
3.    <li id="a2">AC DC</li>
4.    ...
5. </ol>
6. <div id="content"></div>

Listing zwinięty - 6 linii

wówczas definiujemy zdarzenie onclick każdej opcji z osobna:

[+]

[-]

 

 

JavaScript

1. $(document).ready(function(){
2.    $('#a1').click(function(){
3.       $('#content').load('fragment-abba.html');
4.    });
5.    $('#a2').click(function(){
6.       $('#content').load('fragment-ac-dc.html');
7.    });
8. });

Listing zwinięty - 8 linii

Menu ol/li/a

Opcje menu należy przekształcić w hiperłącza a:

[+]

[-]

 

 

HTML

1. <ol>
2.    <li><a href="fragment-abba.html">ABBA</a></li>
3.    <li><a href="fragment-ac-dc.html">AC DC</a></li>
4.    ...
5. </ol>
6. <div id="content"></div>

Listing zwinięty - 6 linii

W tym przypadku stosujemy selektor wybierający element o zadanej wartości atrybutu. W ten sposób kod jQuery przyjmie postać:

[+]

[-]

 

 

JavaScript

 1. $(document).ready(function(){
 2.    $('a[href="fragment-abba.html"]').click(function(){
 3.       $('#content').load('fragment-abba.html');
 4.       return false;
 5.    });
 6.    $('a[href="fragment-ac-dc.html"]').click(function(){
 7.       $('#content').load('fragment-ac_dc.html');
 8.       return false;
 9.    });
10. });

Listing zwinięty - 10 linii

Instrukcje return zapewniają, że kliknięcie hiperłącza nie będzie powodowało przeładowania strony.

1. Cechy jQuery, Podstawy
2. Podstawy c.d.
3. Selektory CSS
4. Zmiana treści i wyglądu, Zdarzenia
5. Zagadnienia dalsze
6. Menu
7. Menu c.d., Wyszukiwarka