Επειδή ο τίτλος δεν βοηθάει και ιδιαίτερα, τι εννοώ:
Πολλές φορές όταν είστε σε κάποιο site με lyrics ας πούμε, θα έχετε προσέξει ότι υπάρχει μια γραμμή για να διαλέξεις καλλιτέχνη αλφαβητικά.
Σε πολλά έχει γίνει με Ajax πλέον όλο αυτό, οπότε κάνοντας κλικ φορτώνει εκείνη την ώρα τη λίστα με τους καλλιτέχνες που ξεκινάνε με αυτό το γράμμα χωρίς να χρειαστεί να κάνει reload όλη η σελίδα.
To είδα λοιπόν, μου άρεσε, το χρησιμοποίησα σε ένα project και εδώ είναι ένα παράδειγμα για το πώς να το χρησιμοποιήσετε κι εσείς.
Κάπου εδώ να επισημάνω ότι όπως και με το live search, έτσι κι εδώ, πρώτα φορτώνω όλα τα στοιχεία που με ενδιαφέρουν και μετά κάνω την όποια επιλογή. ΔΕΝ γίνεται χρήση Ajax.
Έχουμε ένα σύνολο εγγραφών, στην περίπτωση αυτή τοποθετημένες σε μια ul και όλο το αλφάβητο που το κάθε γράμμα είναι ένα link και στο onclick γίνεται η κλήση μιας συνάρτησης. Για λόγους ευχρηστίας (και κοινής λογικής) πέρα από τα γράμματα έχουμε ένα link για να εμφανίζονται όλες τις εγγραφές και ένα για να εμφανίζονται οι εγγραφές που ξεκινάνε από κάποιον αριθμό.
Η συνάρτηση στη javascript δουλεύει ως εξής:
Παίρνει σαν όρισμα το innerHTML του link που πατήθηκε.
Ελέγχει αν έχει πατηθεί το 'All' οπότε πάει και εμφανίζει όλη τη λίστα.
Σε διαφορετική περίπτωση, ελέγχει αν είναι γράμμα ή αριθμός αυτό που πατήθηκε, οπότε δημιουργεί την κατάλληλη regular expression βάσει της οποίας θα γίνει η όποια σύγκριση.
Παίρνουμε τη λίστα, και για κάθε li της:
Πρώτα το εμφανίζουμε σε περίπτωση που το έχουμε κρύψει με κάποιο προηγούμενο κλικ.
Μετά ελέγχουμε το innerHTML αν ταιριάζει με τη regular expression.
Αν δεν ταιριάζει, το κρύβουμε.
Με κώδικα πιστεύω θα είναι πιο κατανοητό το όλο θέμα:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Selections with JS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//pairnei san parametro to innerHTML tou kathe link pou patame
//diladi ousiastika to kathe gramma (H to 0-9 H to 'All')
function showItems(selection)
{
if(selection!= "All")
{
if(selection == "0-9")
{
var pat = new RegExp("^[0-9]","gi");
}
else
{
var pat = new RegExp("^"+selection, "gi");
}
var list = document.getElementById("myList");
var listItems = list.children;
var i=0;
for(i=0; i<listItems.length; i++)
{
listItems[i].style.display=''; //kanoume energo to kathe stoixeio
var text = listItems[i].innerHTML; //pairnoume to innerHTML tou kathe <li>
if(!text.match(pat))
{
listItems[i].style.display='none'; //kai an _DEN_ tairiazei, to svinoume
}
}
}
else
{
var list = document.getElementById("myList");
var listItems = list.children;
var i=0;
for(i=0; i<listItems.length; i++)
{
listItems[i].style.display=''; //kanoume energo to kathe stoixeio
}
}
}
</script>
</head>
<body>
<div align="center">
Browse items by letter: <br /><br />
<a href="#" onclick="showItems(this.innerHTML)" >All</a>
<a href="#" onclick="showItems(this.innerHTML)" >A</a>
<a href="#" onclick="showItems(this.innerHTML)" >B</a>
<a href="#" onclick="showItems(this.innerHTML)" >C</a>
<a href="#" onclick="showItems(this.innerHTML)" >D</a>
<a href="#" onclick="showItems(this.innerHTML)" >E</a>
<a href="#" onclick="showItems(this.innerHTML)" >F</a>
<a href="#" onclick="showItems(this.innerHTML)" >G</a>
<a href="#" onclick="showItems(this.innerHTML)" >H</a>
<a href="#" onclick="showItems(this.innerHTML)" >I</a>
<a href="#" onclick="showItems(this.innerHTML)" >J</a>
<a href="#" onclick="showItems(this.innerHTML)" >K</a>
<a href="#" onclick="showItems(this.innerHTML)" >L</a>
<a href="#" onclick="showItems(this.innerHTML)" >M</a>
<a href="#" onclick="showItems(this.innerHTML)" >N</a>
<a href="#" onclick="showItems(this.innerHTML)" >O</a>
<a href="#" onclick="showItems(this.innerHTML)" >P</a>
<a href="#" onclick="showItems(this.innerHTML)" >Q</a>
<a href="#" onclick="showItems(this.innerHTML)" >R</a>
<a href="#" onclick="showItems(this.innerHTML)" >S</a>
<a href="#" onclick="showItems(this.innerHTML)" >T</a>
<a href="#" onclick="showItems(this.innerHTML)" >U</a>
<a href="#" onclick="showItems(this.innerHTML)" >V</a>
<a href="#" onclick="showItems(this.innerHTML)" >W</a>
<a href="#" onclick="showItems(this.innerHTML)" >X</a>
<a href="#" onclick="showItems(this.innerHTML)" >Y</a>
<a href="#" onclick="showItems(this.innerHTML)" >Z</a>
<a href="#" onclick="showItems(this.innerHTML)" >0-9</a>
</div>
<ul id="myList">
<li>A-item</li>
<li>B-item</li>
<li>C-item</li>
<li>D-item</li>
<li>E-item</li>
<li>F-item</li>
<li>G-item</li>
<li>H-item</li>
<li>I-item</li>
<li>A-item</li>
<li>5-item</li>
<li>6-item</li>
<li>7-item</li>
<li>B-item</li>
<li>D-item</li>
</ul>
</body>
</html>
Από σήμερα θα αρχίσω να ανεβάζω και το αρχείο με τον κώδικα για όποιον ενδιαφέρεται.
Σημείωση: Ο παραπάνω κώδικας δοκιμάστηκε και δουλεύει με τον τελευταίο firefox, chrome και safari.
Όσοι έχετε ΙΕ, αν δεν τρέχει κατεβάστε κάναν browser της προκοπής.
Ιδού και το αρχείο:
http://www.mediafire.com/file/mxlzjw7euocgds1/selections.html
Σημείωση: Ο παραπάνω κώδικας δοκιμάστηκε και δουλεύει με τον τελευταίο firefox, chrome και safari.
Όσοι έχετε ΙΕ, αν δεν τρέχει κατεβάστε κάναν browser της προκοπής.
Ιδού και το αρχείο:
http://www.mediafire.com/file/mxlzjw7euocgds1/selections.html
No comments:
Post a Comment