Jeśli używasz jQuery, to:
HTML:
<a id="openMap" href="/map/">link</a>
JS:
$(document).ready(function() {
$("#openMap").click(function(){
popup('/map/', 300, 300, 'map');
return false;
});
});
Ma to tę zaletę, że nadal działa bez JS lub jeśli użytkownik kliknie link w środku.
Oznacza to również, że mógłbym obsłużyć ogólne wyskakujące okienka, przepisując ponownie do:
HTML:
<a class="popup" href="/map/">link</a>
JS:
$(document).ready(function() {
$(".popup").click(function(){
popup($(this).attr("href"), 300, 300, 'map');
return false;
});
});
Umożliwiłoby to dodanie wyskakującego okienka do dowolnego łącza, po prostu nadając mu klasę wyskakującą.
Ten pomysł można rozszerzyć jeszcze bardziej w ten sposób:
HTML:
<a class="popup" data-width="300" data-height="300" href="/map/">link</a>
JS:
$(document).ready(function() {
$(".popup").click(function(){
popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
return false;
});
});
Mogę teraz używać tego samego fragmentu kodu do wielu wyskakujących okienek w całej mojej witrynie bez konieczności pisania mnóstwa rzeczy onclick! Brawo za ponowne użycie!
Oznacza to również, że jeśli później uznam, że wyskakujące okienka są złą praktyką (a tak są!) I chcę je zastąpić modalnym oknem w stylu lightbox, mogę zmienić:
popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
do
myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
a wszystkie moje wyskakujące okienka w całej mojej witrynie działają teraz zupełnie inaczej. Mógłbym nawet wykonać wykrywanie funkcji, aby zdecydować, co zrobić w wyskakującym okienku, lub zapisać preferencje użytkowników, aby im zezwolić lub nie. Dzięki inline onclick wymaga to ogromnego wysiłku w kopiowaniu i wklejaniu.