Aplikacje internetowe

Ostatnio wyszedłem z założenia, że można by dodać do każdej notki na blogu spis treści. Poniżej opis jak w prosty sposób wykonać to przy użyciu jQuery.

Pierwszym krokiem jest ustalenie w jaki sposób będzie generowany spis treści. Musimy pobrać wszystkie nagłówki (tagi h2) znajdujące się na stronie, a następnie utworzyć z nich listę. Dodatkowo przed każdym pobranym nagłówkiem musimy dodać link z kotwicą.

Rzut oka na kod.

if( $( ".entry h2" ).get(0) != undefined ) //1
{
	var child = $( ".entry" ).children( ); //2
	var name = 0;
	$( child[0]).before( "<h2>Spis tresci</h2><ol id='toc'></ol>" );

	$( ".entry h2" ).each( function(){ // 3
	 var az = $( "<a/>" ).attr( "name", "toc" + name ); //4
	 $( this ).before( az ); 

	 var a = $( "<li></li>" ); // 5
	 $( "<a></a>" )	.html( $( this ).html( ) )
     	     	     	.attr( "href", "#toc" + name )
     			.appendTo( a );
	  a.appendTo( "#toc" );

	  name++;
	} );
}

I mały opisik :)

1. Sprawdzamy czy na stronie są jakieś taki <h2 /> jeśli tak to:
2. Pobieramy wszystkie elementy obiektu posiadającego klasę entry (treść wpisu na blogu), a następnie przed pierwszym z nich dodajemy nagłówek „Spis treści” oraz listę numerowaną.
3. Przechodzimy iteracyjnie po wszystkich <h2 /> i
4. Dodajemy kotwicę przed nagłówkiem.
5. Dodajemy do listy numerowanej nowy element, który zawiera treść nagłówka.

Tagi: jQuery
Kategoria: Inne, jQuery