Προς το περιεχόμενο

jQuery Βοήθημα:Δημιουργία jQuery tabs.

akisplace

Από τον akisplace
στο Web Design - Development

Προτεινόμενες αναρτήσεις

akisplace Proficient

akisplace

Δημοσ.
Δημοσ.

Καλησπέρα σας!!Σε αυτό το jQuery tutorial θα σας δείξουμε πώς μπορείτε να φτιάξετε jQuery tabs με πολύ απλό και εύκολο τρόπο.Το jQuery tabs tutorial περιλαμβάνει φυσικά και html και CSS κώδικα αλλά δεν θα κάνουμε μεγάλη ανάλυση στους κώδικες αυτούς διότι θέλουμε να δώσουμε βάση στην λειτουργικότητα jQuery που θα κάνει λειτουργικές τις jQuery tabs μας.Οι jQuery tabs μπορούν να χρησιμοποιηθούν σε πολλές εφαρμογές και να δώσουν μία πολύ όμορφη και λειτουργική εμπειρία στους χρήστες μας.Αρκετά όμως με τα εισαγωγικά…Ας ξεκινήσουμε το jQuery tabs tutorial!! :-) :-)

 

Σημείωση:Το συγκεκριμένο tutorial μπορεί να γίνει και με άλλους τρόπους!Φυσικά επιλέξαμε ένα συγκεκριμένο για να το κάνουμε..Ξαναλέμε ότι το tutorial αυτό αναλύει σε μικρό βαθμό τα CSS διότι είναι καθαρά jQuery tutorial.

 

Αρχικές σκέψεις για τις jQuery tabs

 

Το πρώτο πράγμα που πρέπει να σκεφτούμε είναι τι θέλουμε να κάνουμε.Αυτό που θέλουμε είναι να δημιουργήσουμε ένα μενού το οποίο κάθε φορά που πατάμε ένα από τα link του να εμφανίζεται το περιεχόμενο της αντίστοιχης div -που ελέγχεται από το link που πατήσαμε-ακριβώς από κάτω από το μενού.Δηλαδή θέλουμε μία div που θα περιέχει τα περιεχόμενα τον links και μία div που θα περιέχει τα links.Ας δούμε λοιπόν ένα απλό σχέδιο…

 

jtab1.png

 

Αυτό που θέλουμε λοιπόν είναι να πατάμε μία tab και από κάτω να αλλάζει το περιεχόμενο ανάλογα με τη tab που πατήσαμε..

 

Τελικές σκέψεις και τελικό σχέδιο για jQuery tabs

 

Μετά τα παραπάνω μπορούμε να φτιάξουμε ένα σχέδιο το οποίο θα μας προσδιορίζει την html-css δομή του παραδείγματός μας.Πάνω στο σχέδιο θα επισημάνουμε τις divs καθώς και τα css ids και classes που θα χρησιμοποιήσουμε.Επίσης στο μενού με τις jQuery tabs θα χρησιμοποιήσουμε και ένα εικονίδιο δίπλα σε κάθε link.Ας δούμε λοιπόν το τελικό σχέδιο και εξηγούμε.

 

jtab2.png

 

Εξηγήσεις πάνω στο σχέδιο των jQuery tabs

Ας αναλύσουμε λίγο τις divs, τις css classes και τα css ids που θα χρησιμοποιήσουμε!Αυτό θα το κάνουμε εδώ διότι δεν υπάρχει λόγος να αναλωθούμε σε μεγάλες αναλύσεις κατά την συγγραφή του html και css κώδικα.

 

wrapper div:Αυτή η div θα περιέχει τα πάντα,οτιδήποτε φτιάξουμε.Θα περιέχει και το μενού των jQuery tabs και την περιοχή όπου θα εμφανίζονται τα περιεχόμενα της κάθε tab!

 

ul id=”theTabs”:Η συγκεκριμένη μη-αριθμημένη λίστα θα είναι ουσιαστικά το μενού των tabs μας.Το css id της θα είναι το “theTabs”.

 

div με class=”tabContainer”:Αυτή η div θα περιέχει όλα τα περιεχόμενα των tabs.Μέσα σε αυτή θα υπάρχουν 4 divs-#tab1,#tab2,#tab3,#tab4- που θα αντιστοιχούν σε 4 tabs με τα αντίστοιχα περιεχόμενά τους.

 

css class= “.spans”:Αυτή η css κλάση θα εφαρμοστεί στα εικονίδια που θα τοποθετήσουμε δίπλα σε κάθε Link που θα υπάρχει στο μενού με τις tabs.

 

css class= “.insideTabs”:Αυτή η css κλάση θα εφαρμόζεται πάνω στα περιεχόμενα της κάθε tab.

 

Αυτές είναι τα βασικά στοιχεία που θα χρησιμοποιήσουμε.Ας ξεκινήσουμε με τη δημιουργία html και css κώδικα για τις jQuery tabs.

 

Html και CSS κώδικας για τις jQuery tabs

 

Πριν ξεκινήσουμε τον κώδικα ας ξεκαθαρίσουμε ένα-δυο πράγματα.Το μενού με τις tabs θα είναι ουσιαστικά ένα κλασσικό css μενού το οποίο θα δημιουργηθεί με τη χρήση μίας “ul tag” και τα links στο μενού θα είναι ουσιαστικά τα μέλη μίας λίστας “li”.Επίσης τα εικονίδια θα είναι μεγέθους 32*32 pixels και θα τα τοποθετήσουμε μέσα σε span στοιχείο το οποίο θα υπάρχει μέσα στο link.

 

To "span" είναι ένα html στοιχείο όπως η div με τη διαφορά ότι όταν το χρησιμοποιούμε κάπου δεν μορφοποιεί τη σελίδα μας ,δηλαδή δεν προκαλεί αλλαγές γραμμής όπως κάνει η div όπου τη χρησιμοποιούμε. Το εικονίδιο το θέλουμε σε span για να είναι στην ίδια ευθεία με τον τίτλο του link μας.

Html κώδικας-δείτε σχόλια στον κώδικα.

 

><!-- wrapper ! -->
<div id="wrapper">

<!-- to navigation menu μας-->
<ul id="theTabs">
<li><a href="#tab1"><span class="spans" id="smileSpan"></span>About us</a></li>
<li><a href="#tab2"><span class="spans" id="portfolioSpan"></span>Portfolio</a></li>
<li><a href="#tab3"><span class="spans" id="mailSpan"></span>Mail</a></li>
<li><a href="#tab4"><span class="spans" id="tutorialSpan"></span>Tutorial</a></li>
</ul>

<!-- The tab container -->
<div class="tabContainer">

<!--Περιεχόμενα tab1-->
<div id="tab1" class="insideTab">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam vehicula consequat ultricies. Nulla ultrices, mi sed
auctor condimentum, leo ligula fringilla dui, id porttitor sem elit nec massa.
Maecenas eu tellus vel ipsum imperdiet imperdiet ut nec lectus. Nunc lobortis
odio in velit rhoncus non hendrerit libero tempor. Vivamus lobortis porta ullamcorper.
Donec egestas, turpis et iaculis sodales, augue est posuere est, id egestas sem justo vitae ante.
Ut vitae sapien vitae lectus interdum imperdiet ut et nisl. Donec in justo nunc. Phasellus consectetur consequat
neque at gravida. Sed ante quam, porta porta interdum vel, porta nec tellus. Praesent tempor, felis eget placerat
 dictum, quam orci sodales eros, in semper sapien dolor et mauris.
</p>
</div>

<!--Περιεχόμενα tab2 -->
<div id="tab2" class="insideTab">Tab 2!!Τοποθετήστε ότι θέλετε εδώ...
<p>Nullam accumsan mi eu urna feugiat euismod.
In fermentum, risus ut gravida blandit, nibh ipsum tincidunt
lacus, ut tempor nulla lacus iaculis diam. Vivamus tincidunt pellentesque ante,
at gravida nunc sollicitudin nec. Phasellus facilisis facilisis sem in rutrum. Suspendisse
ac leo tortor. Donec justo justo, cursus nec dignissim nec, fringilla in nisi. Nam faucibus,
nibh non adipiscing eleifend, sem metus elementum sem, nec ornare nisi turpis a ipsum. Nullam
semper vulputate molestie. Sed id massa mauris, ut tincidunt puru
</p>
</div>

<!--Περιεχόμενα tab3-->
<div id="tab3" class="insideTab">
<form>
Αυτή είναι η tab3!!
<label for="email">Email:</label>
<input type="text" name="email" />
<input type="submit" value="submit"/>
</form>
</div>

<!--Περιεχόμενα tab4-->
<div id="tab4" class="insideTab">
TAB4 -ΣΑΣ ΑΡΕΣΕ ΤΟ TUTORIAL????Αν ναι γραφτείτε στα feeds μας να λαμβάνεται όλα τα άρθρα μας!!
<form style="border:1px solid #ccc;padding:3px;text-align:center;"
action="http://feedburner.google.com/fb/a/mailverify" method="post"
target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=akisplacecom',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="akisplacecom" name="uri"/>
<input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by
<a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>
</div>

</div>
<!-- Telos the tab content -->
<!-- Div με class-clear για να καθαριστούν τα floats-->
<div class="clear"></div>
</div>
<!-- Telos wrapper-->

 

Βλέπετε ξεκάθαρα πώς δημιουργούμε το μενού των jQuery tab μας καθώς και όλα τα υπόλοιπα.Επίσης στις δύο πρώτες tabs βάλαμε ένα “dummy text” σαν περιεχόμενο,στην τρίτη tab μία φόρμα για email και στην τέταρτη tab δώσαμε τη φόρμα που χρησιμοποιείται από το feedburner για να γραφεί κάποιος αναγνώστης μας.Στη συνέχεια θα εφαρμόσουμε CSS κώδικα ώστε να δώσουμε ένα στυλ στη σελίδα μας.Ας δούμε ένα στιγμιότυπο για το πώς μοιάζει η σελίδα μας χωρίς css..

 

jtab3.png

 

CSS κώδικας για τις jQuery tabs

 

>/*εφαρμογή σε όλα τα html στοιχεία.*/
*{
   margin:0;
   padding:0;
}
/*Ορίζουμε χρώμα φόντου του background*/
body{
   background: #353535;
}
/*Το css στυλ της wrapper div η οποία περιλαμβάνει τα πάντα.Απέχει 50px από την κορυφή και έχει πλάτος 500px*/
#wrapper{
   width:500px;
   background: #353535;
   margin: 50px auto;
}
/*Ορίζει το στυλ που θα έχει οτιδήποτε βρίσκεται μέσα στην ul αυτή.Ουσιαστικά αυτό είναι το μενού μας.
Το float:left κάνει το μενού μας να ξεκινάει από οσο πιο αριστερά γίνεται μέσα στο στοιχείο που το
περιέχει δηλαδή το wrapper..*/
#theTabs{
float: left;
list-style: none;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;

}
/*Εδώ ορίζουμε το στυλ των list items που βρίσκονται στην παραπάνω ul.To margin-bottom:-2px το δίνουμε
έτσι αρνητικό για να δίνουμε την εντύπωση ότι το μενού μας μπάινει από κάτω απο το tabContainer.Με το height:40px
ορίζουμε το ύψος κάθε link του μενού και το line-height:40px κάνουμε το κείμενο του link να είναι στη μέση του
στο κάθε tab στο μενού.*/
#theTabs li{

float: left;
   background: #DAFEC5;
height: 40px;
line-height: 40px;
border: 1px solid #999;
border-left: none;
margin-bottom: -2px;

}
/*Εδώ ορίζεται το στυλ των links που βρίσκονται στο μενού μας.Το text-decoration:none διώχνει τη γραμμή που
υπάρχει by default κάτω από κάθε link.*/
#theTabs li a {
text-decoration: none;
color: #000000;
display: block;
   font-size:16px;
padding: 0 10px;
   font-family:Kalinga;

}
/*Αυτή η κλάση εφαρμόζεται σε όλα τα εικονίδια μας που βρίσκονται δίπλα στα links*/
.spans{

       margin-right:1px;
       padding-left:32px;
       padding-top:9px;
       }
/*Εδώ ορίζουμε σαν background τα 4 εικονίδια που θέλουμε για τα 4 Spans που βρίσκονται στα links. */
#smileSpan{
   background: url(img/smile.png) no-repeat left;
}

#mailSpan{
   background: url(img/mail.png) no-repeat left;
}

#portfolioSpan{
   background: url(img/portfolio.png) no-repeat left;
}
#tutorialSpan{

   background: url(img/tutorial.png) no-repeat left;
}

/*Αυτή η κλάση εφαρμόζεται στη div που περιέχει τα περιεχόμενα των 4 tabs!*/
.tabContainer {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left;
   width: 100%;
background: #EfEfEf;
}

/*Αυτη κλάση με αυτό το padding (περιθώριο από μέσα) εφαρμόζεται στα περιεχόμενα των tabs.*/
.insideTab{
   padding:5px;

}
/*Η κλάση αυτή εφαρμόζεται στη div που κάνει clear τα floats.*/
.clear{
   clear:both;
}
/*Αυτή η κλάση εφαρμόζεται όταν πατάμε ένα tab-link στο μενού και θα τη χρησιμοποιήσουμε με τη jQuery.*/
#theTabs li a.active{
   background:#EfEfEf;
}

 

Ουσιαστικά εφαρμόσαμε το παραπάνω εύκολο css ώστε να αποκτήσουν μορφή οι jQuery tabs μας.Μη ξεχάσετε να καλέσετε το παραπάνω αρχείο css στο head της σελίδας.Σώστε το css αρχείο σαν “styles.css”, αποθηκεύστε το στο ίδιο φάκελο με το html αρχείο και καλέστε ανάμεσα στα head tags ως εξής:

 

><link rel="stylesheet" href="styles.css"/>

Ας δούμε ένα στιγμιότυπο..

jtab4.png

 

Όπως βλέπουμε όλες οι divs φαίνονται αλλά κατά τα άλλα όλα είναι τέλεια!Πάμε να δούμε τη λειτουργικότητα με jQuery τώρα!!!

 

Λειτουργικότητα με jQuery..

Λίγο ακόμα έμεινε και θα τελειώσουμε αυτό το πολύ απλό αλλά όμορφο jQuery tutorial.Πάμε να εφαρμόσουμε λίγο από jQuery ώστε να μπορέσουμε να ελέγξουμε την λειτουργία των jQuery tabs.Σημείωση: Εάν είστε εντελώς αρχάριος στην jQuery δείτε αυτό το jQuery tutorial.

Τι θέλω να κάνω με τις jQuery tabs;

 

Σκέψη 1:Θέλω με το που φορτώνει η σελίδα μου να βλέπω μόνο το περιεχόμενο της πρώτης tab και να είναι “ενεργοποιημένο” το πρώτο link στο μενού μου.Εδώ θα χρησιμοποιηθεί και η css κλάση “.active”.

 

Σκέψη 2:Με το που πατάω σε ένα link στο μενού των tabs να αποκτάει την κλάση “active” το link πάτησα και τα περιεχόμενα του tabContainer να αλλάζουν και να δείχνουν τα περιεχόμενα που αντιστοιχούν στο link που πάτησα.Πρέπει να βρω ένα τρόπο γι αυτό..

 

Σκέψη 3:Θέλω οτιδήποτε συμβαίνει με τον jQuery κώδικα να συμβαίνει αφού φορτωθούν τα πάντα στη σελίδα μου.

 

Οι σκέψεις μας για τις jQuery tabs σε κώδικα jQuery…

 

Μάλιστα..Ας ξεκινήσουμε δημιουργώντας ένα κενό αρχείο το “tabs.js”.Αποθηκεύστε το στον ίδιο φάκελο που έχετε αποθηκεύσει και την html σελίδα σας.Επίσης μη ξεχάσετε να κατεβάσετε αν δεν έχετε ήδη κατεβάσει τη βιβλιοθήκη της jQuery.Και τα δύο αυτά αρχεία καλέστε τα στο head της σελίδας σας ως εξής:

><script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="tabs.js"></script>

 

Ωραία!Ας ξεκινήσουμε με την υλοποίηση των τριών βημάτων που είδαμε παραπάνω.

Θα κάνουμε το πιο απλό πρώτα .Θέλουμε να γράψουμε τον κώδικα στο αρχείο “tabs.js” το οποίο θα μας εξασφαλίσει ότι τα πάντα θα γίνουν ΑΦΟΥ φορτωθεί η σελίδα μας πρώτα.Γράφουμε τον γνωστό κώδικα..

>$(document).ready(function() {

/*Εδώ θα τοποθετήσουμε όλες τις υπόλοιπες εντολές...*/

});

 

Έτοιμο το τρίτο βήμα…Ας υλοποιήσουμε λοιπόν τη σκέψη 1 τώρα:Διαβάστε λίγο παραπάνω ,δείτε το κώδικα και όπου χρειάζεται σχολιάζουμε!Συμπληρώνουμε τον παραπάνω κώδικα.

 

>$('.tabContainer div').hide();
$('.tabContainer div:first').show();
$('#theTabs li:first a').addClass('active');

 

Εξηγήσεις:

Γραμμή 1:Με αυτή τη γραμμή κάνουμε το εξής:Αμέσως μετά τη φόρτωση της σελίδας μας, ο,τιδήποτε υπάρχει μέσα στη div που έχει κλάση tabContainer (είναι η div που περιέχει τα περιεχόμενα των 4 divs που ανήκουν στα tabs) το κρύβουμε.

 

Γραμμή 2:Σε αυτή τη γραμμή χρησιμοποιούμε τον ειδικό selector της jQuery το “:first” και ουσιαστικά “βρίσκουμε” ποια είναι η πρώτη div από τις 4 στην html σελίδα μας μέσα στη div με κλαση “.tabContainer“. Κατά γράμμα αυτή η εντολή λέει :”βρές την πρώτη div-άρα και τα περιεχόμενα της-που βρίσκεται μέσα στο html στοιχείο που του εφαρμόζεται η css κλάση “.tabContainer” και εμφάνισε το“.Δηλαδή μας εμφανίζει και τα περιεχόμενα της πρώτης tab!

 

Γραμμή 3:Με αυτή τη γραμμή δίνουμε στυλ στο πρώτο link που υπάρχει στο μενού των jQuery tabs διότι του εφαρμόζουμε την css class “.active”.Είναι λογικό να το κάνουμε αυτό αφού καθώς φορτώνεται η σελίδα μας θέλουμε να διακρίνουμε ότι είναι και πατημένο το πρώτο link(αφού παραπάνω είπαμε ότι θέλουμε να βλέπουμε και τα περιεχόμενα του πρώτου tab μας).

 

Αυτό ήταν.Ας υλοποιήσουμε τη σκέψη 2,τι θα συμβαίνει όταν πατήσουμε ένα link σε κάποιο tab στο μενού.

 

Συμπληρώνουμε τον παραπάνω κώδικα..

>$('#theTabs li a').click(function(){

var currentTab = $(this).attr('href');

$('#theTabs li a').removeClass('active');
$(this).addClass('active');
$('.tabContainer div').hide();
$(currentTab).fadeIn("2000");
   });

 

Εξηγήσεις:

 

Γραμμή 1:Εδώ ουσιαστικά ορίζουμε ότι εάν πατηθεί κάποιο από τα link μας στο μενού των jQuery tabs τότε θα εκτελεστεί ο κώδικας που βρίσκεται στις γραμμές 2-8.

 

Γραμμή 3:Προσέξτε το εξής.Θέλουμε πατώντας σε ένα link στο μενού μας να ανοίγει η σωστή tab.Η κάθε tab μας έχει ένα συγκεκριμένο id .Εάν δείτε τον κώδικα html θα διαπιστώσετε ότι υπάρχουν οι #tab1,#tab2,#tab3,#tab4.Εμείς λοιπόν έχουμε κάνει το εξής.Σε κάθε link έχουμε τοποθετήσει μέσα του το όνομα της αντίστοιχης tab.Για παράδειγμα δείτε το link αυτό:

 

><a href="#tab2"><span class="spans" id="portfolioSpan"></span>Portfolio</a></li>

 

Βλέπετε μετά το “href” το “#tab2″;;Εάν καταφέρουμε να το πάρουμε από το link την τιμή του “href” attribute και να το χρησιμοποιήσουμε καταλλήλως θα ανοίγει η η div που θα έχει id= href του link.Γι αυτό χρησιμοποιούμε τη συνάρτηση της jQuery “attr()” και όταν πατάμε στο Link της συγκεκριμένης tab (this) τότε αποθηκεύεται σε μια μεταβλητή η τιμή του “href” που ουσιαστικά είναι το id της div που θέλουμε να εμφανίσουμε!!

 

Γραμμές 5-9:Εδώ αφαιρείται καταρχάς η εφαρμογή της κλάσης “.active” στο link που την είχε πριν πατήσουμε το επόμενο link και εν συνεχεία,γραμμή 6,εφαρμόζεται η κλάση “.active” στο link που πατήσαμε τελευταίο.Το this αναφέρεται ουσιαστικά σε αυτό το Link που πατήσαμε τελευταίο.

Στη γραμμή 7 εξαφανίζουμε οτιδήποτε υπάρχει ήδη μέσα στο tabContainer.Αυτό το κάνουμε διότι αφού πατήσουμε ένα καινούργιο Link στο μενού πρέπει τα περιεχόμενα της tab του προηγούμενου link να κρυφτούν, να εξαφανιστούν ώστε με την εντολή στη γραμμή 8 να εμφανίσουμε εμφανίσουμε τη div που θέλουμε εμείς.Μη ξεχνάτε ότι η μεταβλητή “currentTab” μπορεί να πάρει τις εξής τιμές:”#tab1,#tab2,#tab3,#tab4″.Άρα ανάλογα την τιμή της εμφανίζεται το αντίστοιχο περιεχόμενο που θέλουμε!!

 

Έτοιμες οι jQuery tabs μας…. :-) Ας δούμε λίγο ολόκληρο το αρχείο “tabs.js”.

jQuery κώδικας στο αρχείο “tabs.js”.

 

>$(document).ready(function() {
   $('.tabContainer div').hide();
   $('.tabContainer div:first').show();
   $('#theTabs li:first a').addClass('active');

   $('#theTabs li a').click(function(){

   var currentTab = $(this).attr('href');

   $('#theTabs li a').removeClass('active');
   $(this).addClass('active');
   $('.tabContainer div').hide();
   $(currentTab).fadeIn("2000");
   });
});

 

Επίλογος του jQuery tutorial

 

Εδώ κάπου τελειώνει το jQuery tutorial μας.Ελπίζουμε να σας άρεσε.Μπορείτε να κατεβάσετε τα αρχεία του tutorial αυτού από εδώ

Πηγή :akisplace.com

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...