Σε αυτό το βοήθημα θα δούμε αναλυτικά πώς να δημιουργήσουμε μια καρτέλα ακορντεόν για την πλαϊνή μπάρα της ιστοσελίδας μας, με ένα πολύ όμορφο εφέ συρταριού, χρησιμοποιόντας την jQuery. Για να το πραγματοποιήσουμε αυτό, θα χρησιμοποιήσουμε απλές εντολές html, css για το στύλ της σελίδας, και jQuery για την κίνηση του ακορντεόν μας.
Πρίν ξεκινήσουμε την δημιουργία, ας δούμε πρώτα το τελικό αποτέλεσμα, για να έχουμε μια καλύτερη κατανόηση του τι θέλουμε να φτιάξουμε.
Αφού είδαμε το τελικό αποτέλεσμα είμαστε έτοιμοι να δοκιμάσουμε να φτάσουμε σε αυτό και εμείς. Ας ξεκινήσουμε λοιπόν
HTML
Ξεκινάμε δημιουργώντας ένα κενό έγγραφο html με το όνομα index.html, το οποίο θα περιέχει τον εξής κώδικα :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ακορντεόν jQuery - GreekTuts</title> </head> <body> </body> </html>
Έχοντας την βασική δομή της σελίδας μας, θα αρχίσουμε να προσθέτουμε περιεχόμενο. Έτσι λοιπόν στο <body> κομμάτι του κώδικά μας γράφουμε :
<div> <h3>Καρτέλα 1</h3> <p>Θα φράση εξακολουθεί χειροκροτήματα ήδη, κι λες τελικά κακόκεφος ταξινομεί. Ύψος υόρκη περιμένουν στο μα, αλλάζοντας προσλάμβανες χρησιμοποιήσει μας αν. Με όσο φίλος συνεντεύξης χαρακτηριστικό, που δείξει δούλευε αλλάζοντας μη. Έτσι ζητήσεις παραδώσεις πως μα, δύο αλφα συνδυασμούς με. Σου δε βιβλίο εργαλείων, όλη καθώς τέτοιο βαθμολόγησε ας. Να εδώ χρόνου χαρτιού, αν και μέσης κώδικάς συνδυασμούς. </p> <h3>Καρτέλα 2</h3> <p><strong>Βάζοντας αναζήτησης</strong> παραγωγικής πω μια, με απλό θέματα παράγει μου. Νέες πρώτοι τελειώσει κι λες, οι στα νόμιζες σταματάς συνεντεύξης, όλη εσφαλμένη κατάσταση δωροδοκηθούν πω. Του κι τότε τους προγραμματιστής, το γραφικά μέγιστη εντυπωσιακό έξι, πω μια καθώς αναφορά αποκλειστικούς. Στα ώς μπουν εκτελέσει παραδοτέου, ναί δείξει ειδικά αλλάζοντας τα, το πως πλέον βρίσκονται ανταγωνιστής. Εργασίας χρησιμοποιούσες πω ένα, οι ανά γραφικά ευκολότερο συγχωνευτεί, μέρος γι'αυτό καλύτερο στη τα. </p> <h3>Καρτέλα 3</h3> <p>Εγώ τα γραφικά κακόκεφος εκφράσουν, πάντα εξοργιστικά σε σας. Το από κόψεις συνεχώς συγχωνευτεί, σας σταματάς μπορούσε οι. Το ροή αθόρυβες σίγουρος απομόνωση. <a href="http://greektuts.net" title="LINK" target="_blank">Έργων γλιτώσει</a> βάζοντας νέο αν, εγώ φτιάξε γι'αυτό πρόσληψη μα, σπίτι άτομο το μας. Που ύψος γειτονιάς περιβάλλον οι, σας μη θέλεις γίνεται προσπαθήσεις, γίνεται ευκολότερο αναγκάζονται κι ματ. Θα που εκφράσουν αναφέρονται μεταγλωτίσει, αφού κύκλο νιρβάνα πω μου, κάποιο υπηρεσία ματ μη.</p> <h3>Καρτέλα 4</h3> <p>Ως χάος τοπικές δημιουργήσεις ήδη, να αφήσεις συζήτηση επεξεργασία όσο. Ματ δε κύκλο μόλις διοίκηση, ναι κεντρικό φθηνότερος διοικητικό το, τότε γραμμές κακόκεφους όχι ώς. Όσο ας λοιπόν τεσσαρών, μπουν αρέσει γραφικά άρα το. Ροή μη ελέγχους παραγωγικής πιθανότητες, θα ειδικά εκτελέσει συγκεντρωμένοι όρο. Το νέα ελέγχους προσθέσει περισσότερο. </p> <h3>Καρτέλα 5</h3> <p><img src="images/sample-4.jpg" width="441" height="327" />Προϊόντα καταλάθος της το, πως μα χρόνου νύχτας. Μέχρι χρειάζονται το των, έχω βαθμό αλγόριθμου δημιουργείς να, με ορίστε εργαζόμενων διολισθήσεις δύο. Δε ήδη στην διάσημα προσοχή, νέες συγγραφείς επιδιορθώσεις πως τη, κι περισσότερο μεταγλωτιστής σαν. Φίλος βασανίζουν εργοστασίου δε εγώ, πω πάρα συγγραφείς λες. </p> </div>
Παρατηρήστε ότι στην τελευταία καρτέλα(Καρτέλα 5) προσθέσαμε και μια εικόνα, αφού μας δίνεται η δυνατότητα αυτή.
CSS
Αφού δημιουργήσαμε την σελίδα μας, ήρθε η ώρα να της δώσουμε και μορφoποίηση.
Δημιουργούμε ένα κενό αρχείο, το μετονομάζουμε σε styles.css και γράφουμε τον εξής κώδικα:
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
background-color:#898989;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #666666 url(images/arrow-square.gif) no-repeat right -51px; /* Εδώ ορίζουμε το background, που στην περίπτωση μας είναι τα πλαϊνά κουμπάκια */
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color:#ffffff;
}
.accordion h3:hover {
background-color: #333333;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background:#E0E0E0;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
Τώρα θα ενσωματώσουμε το αρχείο στύλ στην σελίδα μας. Αυτό το κάνουμε προσθέτοντας την εξής γραμμή στο html αρχείο, στο <head> κομμάτι:
<link rel="stylesheet" href="styles.css" type="text/css" />
jQuery
Τώρα αφού έχουμε δημιουργήσει τα βασικά μας αρχεία, θα δημιουργήσουμε και όλη την διαδικασία της κίνησης, μέσω jQuery. Πρώτα απόλα θα συμπεριλάβουμε την βιβλιοθήκη της jQuery στο <head> μέρος του html αρχείου μας, γράφοντας τον εξής κώδικα:
<script type="text/javascript" src="jquery.js"></script>
Την βιβλιοθήκη της jQuery θα την βρείτε εδώ
Τέλος θα πρέπει να δημιουργήσουμε το script το οποίο θα ευθύνεται για την κίνηση του ακορντεόν μας. Έτι γράφουμε στο <head> μέρος του html αρχείου τον εξής κώδικα :
<script type="text/javascript">
$(document).ready(function(){ // Περιμένουμε να φορτώσει ολόκληρη η σελίδα
$(".accordion h3:first").addClass("active"); // Ορίζουμε το πρώτο h3 κείμενο της σελίδας ώς active
$(".accordion p:not(:first)").hide(); // Αποκρύπουμε τις υπόλοιπες καρτέλες
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
Αυτό ήταν. Πλέον έχουμε ένα ακορντεόν με πλήρη κίνηση μέσω jQuery.
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ
2 Σχόλια
Γεια σας και σας ευχαριστώ πολύ για αυτόν τον πάρα πολύ χρήσιμο οδηγό, με βοήθησε πάρα πολύ και όπως πάντα τον προσάρμοσα σε αυτά που εγώ φανταζόμουν! και είπα αφού βασίστηκα σε αυτόν τον οδηγώ ας δημοσιεύσω την δικιά μου προσαρμοσμένη έκδοση έτσι ώστε όσοι θέλουν να κάνουν το ίδιο να το βρουν έτοιμο και ίσως και αυτοί με την σειρά τους να βελτιώσουν το δικό μου!
<script type="text/javascript">
$(document).ready(function() { // Περιμένουμε να φορτώσει ολόκληρη η σελίδα
$(".accordion h3:first").addClass("active"); // Ορίζουμε το πρώτο h3 κείμενο της σελίδας ώς active
$(".accordion p:not(:first)").hide(); // Αποκρύβουμε τις υπόλοιπες καρτέλες
// Zarlord.net – Προσθήκες:
$(".accordion h3:first").css("-moz-border-radius-topleft", "10px"); // Προσθέτω στην πρώτη καρτέλα ccs style σύμφωνα με το οποίο διαμορφώνονται οι πάνω γωνίες.
$(".accordion h3:first").css("-moz-border-radius-topright", "10px");
$(".accordion h3:last").css("-moz-border-radius-bottomleft", "10px"); // Προσθέτω στην τελευταία καρτέλα ccs style σύμφωνα με το οποίο διαμορφώνονται οι κάτω γωνίες.
$(".accordion h3:last").css("-moz-border-radius-bottomright", "10px");
$(".accordion h3:last").css("border-bottom", "none"); // Αφαιρώ το περίγραμμα από την τελευταία καρτέλα
// Ζarlord.net – Προσθήκες τέλος.
$(".accordion h3").click(function() {
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
// Zarlord.net – Προσθήκες:
$(".accordion h3:last").click(function() { // Όταν πατάει ο επισκέπτης την τελευταία καρτέλα
$(".accordion p:visible").slideUp("slow"); // Τότε αποκρύπτονται οι άλλες
$(this).prev("p:not(:visible)").slideToggle("slow"); // Και εμφανίζεται η τελευταία αλλά από πάνω αντί για από κάτω!
});
// Ζarlord.net – Προσθήκες τέλος.
});
</script>
Και μια μικρή αλλαγή στον HTML κώδικα:
<div class="accordion">
<h3>Καρτέλα 1</h3>
<p>Θα φράση εξακολουθεί χειροκροτήματα ήδη, κι λες τελικά κακόκεφος ταξινομεί. Ύψος υόρκη περιμένουν στο μα, αλλάζοντας προσλάμβανες χρησιμοποιήσει μας αν. Με όσο φίλος συνεντεύξης χαρακτηριστικό, που δείξει δούλευε αλλάζοντας μη. Έτσι ζητήσεις παραδώσεις πως μα, δύο αλφα συνδυασμούς με. Σου δε βιβλίο εργαλείων, όλη καθώς τέτοιο βαθμολόγησε ας. Να εδώ χρόνου χαρτιού, αν και μέσης κώδικάς συνδυασμούς.
</p>
[...]
<h3>Καρτέλα 4</h3>
<p>Ως χάος τοπικές δημιουργήσεις ήδη, να αφήσεις συζήτηση επεξεργασία όσο. Ματ δε κύκλο μόλις διοίκηση, ναι κεντρικό φθηνότερος διοικητικό το, τότε γραμμές κακόκεφους όχι ώς. Όσο ας λοιπόν τεσσαρών, μπουν αρέσει γραφικά άρα το. Ροή μη ελέγχους παραγωγικής πιθανότητες, θα ειδικά εκτελέσει συγκεντρωμένοι όρο. Το νέα ελέγχους προσθέσει περισσότερο.
</p>
<p>Προϊόντα καταλάθος της το, πως μα χρόνου νύχτας. Μέχρι χρειάζονται το των, έχω βαθμό αλγόριθμου δημιουργείς να, με ορίστε εργαζόμενων διολισθήσεις δύο. Δε ήδη στην διάσημα προσοχή, νέες συγγραφείς επιδιορθώσεις πως τη, κι περισσότερο μεταγλωτιστής σαν. Φίλος βασανίζουν εργοστασίου δε εγώ, πω πάρα συγγραφείς λες.
</p>
<h3>Καρτέλα 5</h3>
</div>
Πείτε μ την γνώμη σας!
Έχεις κάνει πάρα πολύ καλή δουλειά και συγχαρητήρια !!! Χαίρομαι πολύ να βλέπω ότι τα άθρα μας βοηθάνε