Δημιουργώντας jQuery tabs με χρήση HTML και CSS.Ειδικά για αρχάριους..!
Demo του jQuery Tabs tutorial.
Ας δούμε ένα demo, για να δείτε τι θα φτιάξουμε σήμερα.Είναι πολύ απλό να δημιουργήσετε jQuery tabs με απλή HTML και λίγο CSS, όσο δεν φαντάζεστε.
Προαπαιτούμενη γνώση για το tutorial αυτό.
Οι γνώσεις που χρειάζονται για να παρακολουθήσετε το tutorial αυτό είναι πολύ απλή γνώση HTML-CSS και ελάχιστη γνώση jQuery.Ο κώδικας θα εξηγείται αναλυτικά στα σημεία που χρειάζεται.. :)
Ξεκινώντας το jQuery Tabs tutorial…
Πριν ξεκινήσουμε θα κάνουμε την εξής παρατήρηση. Όλο τον σημερινό κώδικα θα τον γράψουμε σε ένα αρχείο , το tabs.html. Αυτή η πρακτική ΔΕΝ ΣΥΝΙΣΤΑΤΑΙ σε κανονικά websites απλά εμείς θα το κάνουμε έτσι για λόγους παρουσίασης.Κανονικά πρέπει τα stylesheets, τα js αρχεία και το html να είναι σε ξεχωριστά αρχεία και να τα καλούμε όπου χρειαζόμαστε.Επίσης πολύ καλό είναι να το δημιουργήσετε και να το τρέξετε σε περιβάλλον WAMPserver.
Ξεκινάμε , δημιουργώντας στον αγαπημένο μας editor ένα κενό αρχείο και το σώζουμε με το όνομα :tabs.html. To αρχείο αυτό είναι κενό, ας τοποθετήσουμε μέσα τον βασικό κώδικα που πρέπει να έχει κάθε ιστοσελίδα μας.
<!DOCTYPE html>
<html>
<head>
meta charset = 'UTF-8'/>
<title>Html Tabs Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>
έτοιμο…Ας δούμε λίγο τώρα πριν ξεκινήσουμε τον κώδικα τι είναι αυτό που θέλουμε να φτιάξουμε, έστω στο περίπου.
Τι θέλουμε να φτιάξουμε; (εικόνα)
Βλέποντας την εικόνα καταλαβαίνουμε απλά ότι μπορούμε να έχουμε ένα μικρό μενού με 2 links , tab1 και tab2 και όταν τα κλικάρουμε θα αλλάζει το περιεχόμενο από κάτω.Ας ξεκινήσουμε να το δημιουργούμε……
Δημιουργώντας το οριζόντιο μενού..
Σε αυτό το κομμάτι θα γράψουμε και Html και CSS κώδικα οπότε να είστε προσεχτικοί. Ξεκινώντας με HTML κώδικα στο αρχείο tabs.html γράφουμε μεταξύ των <body></body> το μενού μας, το οποίο θα αποτελείται από 2 links, το tab1 και το tab2. Ένα μενού στην HTML μπορεί και είναι καλό να γίνεται με την χρήση της unordered list tag.Ας το δούμε:
<!--Το μενού μας-->Ας δούμε ένα στιγμιότυπο…
<ul>
<li><a href="#">Tab 1</li>
<li><a href="#">Tab 2</li>
</ul>
Όπως βλέπουμε δημιουργήσαμε το μενού μας, και στην συνέχεια θα του δώσουμε στυλ με CSS για να μοιάζει με αυτό στο σκίτσο…:)Ας το κάνουμε..Μέσα στα <head> ανοίγουμε μία ‘style’ tag και ξεκινάμε να γράφουμε το CSS… Δείτε σχόλια στον κώδικα για ότι δεν καταλαβαίνετε.. :) Επίσης έχω περιβάλλει το menu μας σε μία container div .Δείτε όλο τον κώδικα μέχρι στιγμής.
<!DOCTYPE html>
<html>
<head>
<meta charset = 'UTF-8'/>
<title>Html Tabs Tutorial</title>
<style>
/*Εδώ κάνουμε ένα CSS reset εξαιρετικά απλό.
Μηδενίζουμε το margin και το padding σε όλα τα HTML ELEMENTS στην σελίδα.
*/
*{
margin:0;
padding:0;
}
/*To CSS για το container μας**/
#container{
width:700px;
margin:100px auto; /*Εδώ κεντράρουμε την container div σε σχέση με τη σελίδα μας και της δίνουμε 100px απόσταση από την κορυφή.*/
}
/*
Ας ρυθμίσουμε και το CSS για το μενού μας.
*/
ul{
height:30px;
line-height:15px; /*Μεταφέρει το κείμενο του link Στη μέση του ύψους του height δηλαδή, στα 15px.*/
overflow:hidden;
}
/*Δίνουμε στυλ σε κάθε li item*/
ul li{
display:block;
float:left; /*Βάζει τα links οριζόντια.*/
background:#000;
color:#fff;
text-decoration:none;
margin:0 3px 0 0; /*Πάνω-δεξιά-κάτω-αριστερά.*/
padding:10px 50px 10px 50px;
list-style-type:none;
}
ul li a{
color:#fff;
text-decoration:none; /*Αφαιρεί την γραμμή υπογράμμισης του Link.*/
}
ul li a:hover{
text-decoration:underline; /*Όταν κάνουμε hover πάνω από το link τότε να εμφανίζεται η υπογράμμιση.*/
}
.clear {
clear:both; //Καθαρίζει τα floats των link.
}
#contentContainer{
height:400px;
overflow:hidden;
border:1px solid #000;
}
</style>
</head>
<body>
<!--Το μενού μας-->
<div id="container">
<ul>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
</ul>
<div class="clear"></div>
<div id="contentContainer">
bla bla.
</div>
</div>
</body>
</html>
Ας δούμε ένα στιγμιότυπο:
Δημιουργώντας το contentContainer
Δεν έχουμε τελειώσει με το μενού μας ακόμα αλλά τα υπόλοιπα θα τα κάνουμε όταν πλέον γράψουμε jQuery.Εδώ θα κάνουμε την δημιουργία του περιέκτη του περιεχομένου των tabs.Τι εννοώ; Ότι θα δημιουργήσουμε ένα container το οποίο θα περιέχει ουσιαστικά τα περιεχόμενα και των δύο tabs.Ας δούμε πώς θα το κάνουμε αυτό.
Δείτε τον κώδικα για σχόλια..
To HTML είναι :
<div id="contentContainer">
Tab contents.....
</div>
Και το css είναι:
#contentContainer{
height:200px;
overflow:hidden;/*Να μην είναι τα περιεχόμενα ψηλότερα από 400px.Στο πλάτος θα κοπούν και από το overflow:hidden του συνολικού container μας.*/
border:1px solid #000;
}
Ας δούμε ένα στιγμιότυπο…
Δημιουργώντας τα tabs μέσα στο contentContainer.
Τα jQuery tabs θα είναι ουσιαστικά 2 divs με id το καθένα το όνομα της tab.Επίσης σε κάθε tab θα δώσουμε μία κλαση που θα την χρησιμοποιήσουμε μετά στο jQuery..
Ας δούμε λίγο τον κώδικα…Μέσα στο “contentContainer” γράφουμε….
<!--Tab 1 Contents--> <div id="tab1" class="tabcontents"> <p> The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. </p> </div> <!--Tab 2 Contents --> <div id="tab2" class="tabcontents"> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p> </div>
Αν προσθέσουμε και ένα padding 10px:
.tabcontents{
padding:10px;
}
Ας δούμε ένα στιγμιότυπο…
Πριν την jQuery…
Υπάρχει κάτι που δεν έχουμε κάνει ακόμα…Το μενού μας έχει 2 links τα οποία και να τα πατάμε δεν κάνουν κάτι.Το οποίο είναι λογικό.Αυτό που θα κάνουμε είναι να δώσουμε στο κάθε link ένα “προορισμό” , ώστε όταν το πατάμε να βλέπουμε ποια tab θέλουμε να δούμε.Θα χρησιμοποιήσουμε λοιπόν μία anchor tag σε κάθε link..Θα μας χρησιμεύσει αυτό με την jQuery.Μην ξεχνάτε ότι πρέπει το script που θα γράψουμε να καταλαβαίνει ποια tab είναι ενεργή και αυτό θα το παίρνει από το link…Αυτό γίνεται ως εξής..
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
Ας δούμε στιγμιότυπο και να κλικάρουμε στο link της tab2.Αφού το κάνετε δείτε το url….
Εφαρμόζοντας jQuery στις tabs μας…
Έφτασε η ώρα της jQuery..Το πρώτο πράγμα που χρειάζεται είναι να ενσωματώσουμε την jQuery βιβλιοθήκη αυτή καθ εαυτή στην ιστοσελίδα μας.Αυτό μπορεί να γίνει με την χρήση των google libraries, και συγκεκριμένα μπορούμε να φέρουμε το επόμενο link στο head μας.Δείτε τον κώδικα…
<head>
<meta charset = 'UTF-8'/>
<title>Html Tabs Tutorial</title><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>......
Γράφοντας το jQuery script.
Το τελευταίο πράγμα που θα κάνουμε είναι η δημιουργία ενός πολύ απλού jQuery script που θα ελέγχει την εμφάνιση των tabs ανάλογα με το link που πατάμε..Θα το γράψουμε στο head μας μέσα σε ‘script’ tags.
<script type="text/javascript">
jQuery(document).ready(function(){
//Εδώ θα γράψουμε το script..
});
</script>
//Προσοχή.Ο κώδικας του script μας θα είναι ανάμεσα στην document.ready function η οποία ουσιαστικά θα τον εκτελέσει αφού έχει φορτώσει πλήρως η σελίδα μας....
Εν συνεχεία γράφω το script.Προσέξτε τα σχόλια και θα το καταλάβετε.Αντί για το ‘$’ χρησιμοποιούμε το ‘jQuery’.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.tabcontents').hide(); //Κρύψε όλες τις divs με αυτήν την class.
jQuery('.tabcontents:first').show(); //Δείξε την πρώτη div με την class tabcontents.
jQuery("#container a").click(function(){
var activeTab = jQuery(this).attr("href"); //Εδώ τοποθετούμε στην μεταβλητή activeTab την ενεργή tab.Παίρνουμε από το link που πατάμε
//το href attribute δλδ αν πατήσουμε το tab 1 link θα πάρουμε "#tab1".
jQuery(".tabcontents").hide(); // Κρύβουμε πάλι τα περιεχόμενα των tabs.
jQuery(activeTab).fadeIn(); //Εδώ βρίσκει την div από την activeTab και την εμφανίζει .Βασικά αυτός είναι ο λόγος που στα Links
//χρησιμοποιούμε #tab1 για την div με id=tab1..με το
return false; //Αυτό το κάνουμε για να μην "κλωτσάει προς τα πάνω η οθόνη όταν πατάμε το link.
});
});
</script>
LIVE DEMO
ΠΗΓΉ
Σχόλια