Προσθήκη Εικονιδίων Στους Συνδέσμους με jQuery
Σε αυτό το βοήθημα θα δούμε βήμα προς βήμα πως μπορούμε να προσθέσουμε εικονίδια δίπλα από τους συνδέσμους στην σελίδα μας, ώστε να κάνουμε τους σύνδεσμους πιο εμφανίσιμους και κατανοητούς.
Ξεκινάμε επιλέγοντας τα εικονίδια μας. Τα εικονίδια που θα επιλέξουμε, θα ήταν σωστό να έχουν μέγεθος 16×16 pixels, έτσι ώστε να μπορούμε να τα προσθέσουμε και σε κείμενο παραγράφου, χωρίς να καταστρέψουμε το ύψος της γραμμής του κειμένου. Ένα πολύ καλό μέρος για να ψάξουμε τα εικονίδια που θέλουμε είναι το IconFinder
CSS
Στο αρχείο CSS που χρησιμοποιούμε, θα προσθέσουμε τις παρακάτω γραμμές κώδικα:
a.pdf {
background: url(images/pdf.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}
a.txt {
background: url(images/text.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}
a.zip {
background: url(images/zip.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}
a.email {
background: url(images/email.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}
a.external {
background: url(images/link.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}
jQuery
Τώρα αυτό που χρειάζεται να κάνουμε είναι να δημιουργήσουμε το script της jQuery που θα αναλαμβάνει να ψάχνει τους συνδέσμους για καταλήξεις αρχείων, και να προσθέτει τις εικόνες μας. Γράφουμε λοιπόν στο <head> μέρος της σελίδας μας τον εξής κώδικα:
<script type="text/javascript">
$(document).ready(function() {
// Προσθέτει το εικονίδιο στα pdf
$("a[href$='.pdf']").addClass("pdf");
// Προσθέτει το εικονίδιο στα doc, rtf και txt
$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
// Προσθέτει το εικονίδιο στα Zip αρχεία (zip και rar)
$("a[href$='.zip'], a[href$='.rar']").addClass("zip");
// Προσθέτει το εικονίδιο στους email συνδέσμους
$("a[href^='mailto:']").addClass("email");
//Προσθέτει το εικονίδιο στους εξωτερικούς συνδέσμους
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).addClass("external");
});
</script>
Επεξήγηση κώδικα
Ουσιαστικά ο κώδικας μας ψάχνει τα href tags για καταλήξεις. Αντιστοίχως λοιπόν όπoυ βρεί την κατάληξη που θα ψάξουμε, προσθέτει την αντίστοιχη κλάση, ώστε να μπορούμε μετά να αλλάξουμε την εμφάνιση του με τα CSS.
Ο παραπάνω κώδικας κάνει το εξής:
$(document).ready(function() – Ελέγχουμε ότι η σελίδα έχει φορτώσει πλήρως πρίν κάνουμε το οτιδήποτε
$(“a[href$='.pdf']“) – Ψάχνουμε τα a[href] tags. Όπου βρεί την κατάληξη .pdf
.addClass(“pdf”); – προσθέτει την κλάση pdf.
Τέλος πρέπει να κάνουμε την σελίδα μας να φορτώνει την βιβλιοθήκη της jQuery. Αυτό το κάνουμε γράφοντας στο <head> μέρος της σελίδας μας τον εξής κώδικα:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
