Automatyczne wstawianie przypisów dolnych HTML/jQuery
Potrzeba matką wynalazków
Jak to zwykle bywa, pomysł na wpis powstał z bardzo prostej przyczyny - pojawiła się potrzeba. Ekonomicznie rzecz ujmując - pojawił się popyt. Skoro jest popyt, to i podaż się pojawia. To nie tak, że HTML nie pozwala wstawiać przypisów dolnych. Problem polega na tym, że wstawianie tych przypisów jest dość uciążliwe. Należy w odpowiednim miejscu w tekście wstawić odwołanie, a na dole (trzeba ten dół odnaleźć) wstawić odpowiednią treść przypisu. Wypadałoby również umieścić na dole referencję wsteczną, wskazującą miejsce, którego dotyczy przypis. Skakanie pomiędzy miejscami umieszczenia przypisu a samym przypisem również nie jest takie łatwe, zwłaszcza wtedy, gdy tekstu jest sporo. Jak to uprościć? Koncepcja polega na tym, aby w kodzie HTML przypisy umieszczać w tym samym miejscu co tekst właściwy. W ten sposób unikniemy zbędnego przechodzenia na koniec. Tekst taki zostanie w odpowiedni sposób oznaczony, poprzez umieszczenie wewnątrz znaczników span klasy Reference. Przykład takiego fragmentu pokazany jest poniżej:
Po wykonaniu procedury efekt powinien być następujący:
Tu jest tekstTo jest właśnie przykład przypisu, a tu dalsza część tekstu
Osiągnęliśmy to, co zostało zamierzone. Przy tekście pojawił się odnośnik, tekst odnośnika został przeniesiony w inne miejsce, a odnośniki wskazują na siebie. Ponadto, uzyskaliśmy automatyczną numerację odnośników. Jak to działa?
Automatyczne tworzenie odnośników przy pomocy jQuery
Cały mechanizm można bez większego problemu zrealizować przy pomocy czystego języka JavaScript. Bardzo często lubię zrobić coś od początku do końca - można to traktować w charakterze edukacyjnym. Tym razem posłużę się powszechnie znaną biblioteką jQuery. Cała operacja będzie przebiegała w kilku jasno zdefiniowanych etapach:
- Wybierz z tekstuAby zawęzić obszar poszukiwań, można zmodyfikować sposób wybierania elementów tak, aby brane były pod uwagę tylko te w określonym obszarze, np. tylko te w znaczniku div ze wskazaną nazwą. Przypis ten potwierdza również, że odwołanie można wstawić w wielu miejscach, a sam przypis może zawierać zwykłe znaczniki HTML. wszystkie elementy klasy Reference.
- Wstaw tuż przed wybranym elementem numerowane odwołanie. Odwołanie będzie miało postać #refX oraz identyfikator brefX, gdzie X to kolejny numer przypisu.
- Przenieś element przypisu w odpowiednie miejsce. Miejsce będzie zdefiniowane poprzez element span z identyfikatorem References. To, gdzie wylądują przypisy będzie określone właśnie przez pozycję tego elementu.
- Wstaw na początku przestawionego elementu numerowane odwołanie (już w miejscu, gdzie te przypisy są, najczęściej na końcu artykułu). Odwołanie będzie miało postać #brefX oraz identyfikator refX, gdzie X to kolejny numer przypisu.
- Wykonaj operacje porządkujące.
Zanim przejdę do kodu, należy się parę słów o operacjach porządkujących. Przyjąłem, że elementy klasy Reference są początkowo niewidoczne. Sprawia to, że w przypadku braku obsługi języka JavaScript przypisy nie będą widoczne w tekście. Zmieniam więc klasę tych elementów na inną - ReferenceEntry. Klasa ta może być zdefiniowana w pliku CSS. Sprawia to, że dla takich przypisów dolnych można wskazać odmienny sposób wyświetlania (być może również poprzez identyfikator References).
Ingerencja w HTML przy pomocy jQuery
Co nam będzie potrzebne do pokazania mechanizmu w akcji? Przede wszystkim biblioteka jQuery, a także odpowiednie style, wspomniane już Reference oraz ReferenceEntry. W nagłówku strony należy zatem umieścić fragment podobny do zaprezentowanego poniżej:
<style>
.Reference{display:none;}
.ReferenceEntry{display:block;}
</style>
Nic nie stoi na przeszkodzie, aby definicję stylu umieścić w innym pliku, razem z innymi definicjami. Sam kod, który zbiera, numeruje i przestawia przypisy pokazany jest poniżej:
$(document).ready(function(){
var i=1;
$('.Reference').each(function(){
$(this).before('<sup><a href="#ref'+i+'" id="bref'+i+'">'+i+'</a></sup>');
$('#References').append(this);
$(this).prepend('<sup><a href="#bref'+i+'" id="ref'+i+'">'+i+'</a></sup>');
i++;
});
$('#References .Reference').removeClass('Reference').addClass('ReferenceEntry');
$('#References').before('<hr/>');
});
</script>
Aby oddzielić część tekstu właściwego od przypisów, na samym końcu skryptu wstawiłem jeszcze poziomą linię. Nie jest to konieczne i można tę operację pominąć.
Podsumowanie
Problem niby złożony, a kod krótki. To też w pewnym sensie zasługa jQuery. Mam nadzieję, że taki sposób dodawania przypisów dolnychTo dla tych, którzy jeszcze do przypisów nie zaglądali. okaże się na tyle atrakcyjny, że ktoś kiedyś zatosuje podobny. Nie ma żadnego problemu ze zmianą stylu (ja akurat przyjąłem małą cyfrę, ale spotyka się też cyfry w nawiasach prostokątnych, w nawiasach zwykłych. Aż się prosi o zrobienie podobnego mechanizmu dla spisu ilustracji, cytowań, odwołań do innych stron, a może nawet spisu treści. Temat jest na tyle atrakcyjny, że najprawdopodobniej jeszcze do niego wrócę. Zachęcam przy okazji do dzielenia się spostrzeżeniami w komentarzach.
Komentarze:
Ale jako swoisty callback dla starszych przeglądarek to rozwiązanie może być nadal niezbędne...