jQuery tutorial - Δημιουργία jQuery powered sliding panel με mini portfolio
|
από akisplace
Πριν διαβάσετε το tutorial διαβάστε εδώ παρακαλω.
1) Tο συγκεκριμένο tutorial θα μπορούσα να δώσω απλά ένα link στην αντίστοιχη σελίδα που το περιέχει αλλά επειδή αυτό το θεωρώ λάθος, το γράφω ολόκληρο.
2) Απευθύνεται σε αρχάριους που έχουν κάποια μικρή γνώση της jQuery. Όχι σε πολύ προχωρημένους κλπ.
3) Κάποια σημεία θα μπορούσαν να γίνουν αλλιώς. Δηλαδή, θα μπορούσαν να αντικατασταθούν κάποιες DIVs με άλλα HTML στοιχεία όπως ul, h2, h1 κλπ.
4) Εμείς δίνουμε ένα τρόπο λύσης του συγκεκριμένου προβλήματος. Φυσικά υπάρχουν και άλλοι.
5) Ο λόγος δημιουργίας του αναλυτικού βοηθήματος είναι για να βοηθά τους άλλους.
Καλησπέρα σας. Αλήθεια έχετε δει σε κάποια sites που στην κορυφή της σελίδας τους ή στο πλάι έχουν ένα κουμπί ή ένα εικονίδιο που μόλις το πατήσουμε εμφανίζεται ένα panel με διάφορες πληροφορίες; Ε λοιπόν, σε αυτό το premium βοήθημα θα δημιουργήσουμε ένα jQuery sliding panel το οποίο θα είναι κρυφό και εφόσον πατήσουμε σε ένα κουμπί θα εμφανίζεται. Όταν θα ξαναπατάμε το κουμπί, θα εξαφανίζεται. Μέσα σε αυτό το panel θα τοποθετήσουμε περιεχόμενο όπως το twitter του site μας, τη Facebook σελίδα μας, φόρμα επικοινωνίας και επίσης θα τοποθετήσουμε και ένα mini portfolio. Αυτό το sliding panel θα είναι στην κορυφή της σελίδας μας και θα μπορούμε να το ανοιγοκλείνουμε.
Δείτε ένα live demo σχετικά με αυτό που θα φτιάξουμε στα δύο μέρη του tutorial αυτού! Στο πρώτο μέρος του tutorial αυτού θα φτιάξουμε τη δομή με HTML και CSS και στο δεύτερο θα φτιάξουμε τη λειτουργικότητα και ένα κομμάτι HTML-CSS λίγο ιδιαίτερο. Στο τρίτο θα εφαρμόσουμε λειτουργικότητα με jQuery! Αρκετά με τα εισαγωγικά. Επειδή αυτό θα είναι μεγάλο tutorial, οπλιστείτε με διάθεση και ξεκινάμε!
__TOC__
Πρώτες σκέψεις για το panel - Πρώτο σχέδιο
Λοιπόν, κατ' αρχάς να δούμε λίγο τί ζητάμε. Θέλουμε ένα panel το οποίο θα περιέχει κάποιο περιεχόμενο και ακριβώς από κάτω του θα υπάρχει ένα κουμπί - μπορεί να είναι μία εικόνα - το οποίο θα το πατάμε και θα μπορούμε να το ανοίξουμε και να το κλείσουμε. Αυτά ουσιαστικά θέλουμε. Άρα λοιπόν, ένα πρόχειρο σχέδιο θα μπορούσε να είναι το παρακάτω.
Όπως βλέπουμε, έχει 2 περιοχές. Στη μία θα τοποθετήσουμε το περιεχόμενο μας και στην άλλη θα είναι το κουμπί που θα ελέγχουμε την εμφάνιση ή όχι του panel μας.
Δεύτερες σκέψεις για το πάνελ - Αναλυτικό σχέδιο
Μάλιστα. Είδαμε παραπάνω πώς θα μοιάζει το sliding panel μας. Τί να τοποθετήσουμε μέσα όμως και πώς; Τί περιεχόμενο να 'χει; Ας κάνουμε μία δύο σκέψεις. Αυτό το panel θα βρίσκεται κλειστό στην κορυφή της σελίδας μας. Ο χρήστης το βλέπει και το πατάει. Τί θα 'θελε να δει; Θα μπορούσαμε να του δώσουμε κάποιες πληροφορίες για το site μας, θα μπορούσαμε επίσης να τοποθετήσουμε σημαντικές πληροφορίες όπως το RSS feed μας, το Twitter μας, το Facebook μας, μία φόρμα επικοινωνίας. Επιπροσθέτως, θα μπορούσαμε να του δείξουμε και κάποια από τα έργα μας, σαν ένα μικρό portfolio. Και πώς μπορώ να τα χωρέσω όλα αυτά εκεί; Μήπως να χρησιμοποιούσα κάποιο «κρυφό» χώρο μέσα στο πάνελ; Ας τα βάλουμε όλα αυτά κάτω και ίσως να μπορούσαμε να σχεδιάσουμε ένα αναλυτικότερο σχέδιο από το προηγούμενο.
Τί θα χρειαστώ για την υλοποίηση του πάνελ και τελικό σχέδιο
Αφού δημιούργησα το παραπάνω σχέδιο, μπορώ να σκεφτώ και κάποια επιμέρους πράγματα. Για να φτιάξω το panel αυτό, θα χρησιμοποιήσω HTML και CSS σίγουρα. Από εκεί και πέρα; Είναι σίγουρο ότι θα χρειαστώ και jQuery, διότι όπως είπαμε θα μπορώ να ανοιγοκλείνω το panel. Επίσης θα χρησιμοποιήσω jQuery στο σημείο 3 στην παραπάνω εικόνα όπου θα έχω τον κρυφό χώρο, μία κρυμμένη DIV δηλαδή. Επιπροσθέτως, θα χρησιμοποιήσω jQuery στο σημείο που θα έχω το portfolio. Όταν ο χρήστης πατάει πάνω σε μία φωτογραφία, αυτή να ανοίγει με ιδιαίτερο τρόπο μέσα στο λεγόμενο "lightbox". Αυτά γι' αρχή. Ας δημιουργήσουμε πρώτα το sliding panel μας με HTML και CSS και εν συνεχεία του προσθέτουμε ο,τι λειτουργικότητα θέλουμε. Δείτε παρακάτω ένα τελικό σχέδιο που βοηθάει στην κατανόηση των βασικών DIVs και κλάσεων που θα χρησιμοποιήσουμε.
Τελικές σημειώσεις και ξεκίνημα της υλοποίησης
Είμαστε έτοιμοι ουσιαστικά να αρχίσουμε. Θα ήθελα σε αυτό το σημείο να πω ότι το συγκεκριμένο tutorial θα μπορούσε να γίνει και με άλλους τρόπους. Απλά διαλέγουμε ένα και σας τον δείχνουμε, με σκοπό να πειραματιστείτε και εσείς μετά. Επίσης, θα χρησιμοποιήσουμε κάποια plugins της jQuery π.χ. για το "lightbox" και θα σας πούμε πώς τα ενσωματώνουμε στο site μας. Δε θα μπούμε όμως σε περαιτέρω λεπτομέρειες, για παράδειγμα λεπτομερές configuration, διότι θα χαθεί ο σκοπός του tutorial αυτού. Θα χρησιμοποιήσουμε και λίγο CSS3. Ας ξεκινήσουμε λοιπόν με τον HTML κώδικα αλλά και με CSS κώδικα για να δώσουμε από την αρχή το στυλ που θέλουμε.
Κώδικας HTML-CSS και εξηγήσεις
Σε αυτό το κομμάτι θα κάνουμε τον σκελετό του sliding panel και θα εφαρμόζουμε σιγά σιγά το CSS έτσι ώστε να δημιουργήσουμε την εμφάνιση που θέλουμε. Ας ξεκινήσουμε. Θα δημιουργήσουμε τo DIV wrapper το οποίο θα περικλείει τα πάντα. Μέσα σε αυτό θα τοποθετήσουμε τα εξής DIVs με:
1) id="socializeContainer": Αυτό το DIV ουσιαστικά περικλείει την περιοχή 1 - περιεχόμενα panel - που είδαμε στην πρώτη φωτογραφία.
2) id="socializetitle": Αυτό το DIV περιέχει τον τίτλο μας.
3.)id="portfolioTitle": Αυτό το DIV περιέχει τον τίτλο του portfolio μας.
Επίσης θα δημιουργήσουμε 4 DIVs για τα 4 social εικονίδια μας που θα έχουν μία κοινή κλάση όλα, αφού σε όλα θα εφαρμόζεται το ίδιο CSS στυλ. Η κοινή κλάση αυτή ονομάζεται ".socialIcons". Το κάθε ένα DIV από αυτά θα έχει διαφορετικό id καθώς θα έχει διαφορετικό εικονίδιο σαν background. Tέλος θα δημιουργήσουμε 3 DIVs με κοινή κλάση ".boxes" η οποία θα μας χρησιμεύσει στο να δώσουμε στυλ στις μικρογραφίες που θα έχουμε στο portfolio. Όσον αφορά το κρυφό DIV και το DIV με το κουμπί, θα το κάνουμε λίγο αργότερα. Ας δούμε λίγο κώδικα HTML και ένα στιγμιότυπο εφαρμόζοντας τα παραπάνω.
Δημιουργήστε ένα αρχείο HTML. Ονομάστε το "social.html". Ανάμεσα στα body tags τοποθετούμε:
>
<!-- το wrapper περιλαμβάνει τα πάντα -->
<div id="wrapper">
<!--To container μας -->
<div id="socializeContainer">
<!--O titlos sto container -->
<div id="socializetitle">Socialize with us..Stay in touch!</div>
<!--Ta eikonidia mas -->
Εδω μπαίνουν τα εικονίδια
<div class="socialIcons" id="rss" title="rssDiv"></div>
<div class="socialIcons" id="facebook" title="facebookDiv"></div>
<div class="socialIcons" id="twitter" title="twitterDiv"></div>
<div class="socialIcons" id="mail" title="mailDiv"></div>
<!--O titlos sto portfolio -->
<div id="portfolioTitle">Mini-Folio! Take a look..</div>
Εδώ μπαίνουν οι φωτό από το portfolio
<div class="boxes">Εδώ θα μπει η πρώτη μικρογραφία</div>
<div class="boxes">Εδώ θα μπει η δεύτερη μικρογραφία</div>
<div class="boxes">Εδώ θα μπει η τρίτη μικρογραφία</div>
<br />
</div>
</div>
Μερικές εξηγήσεις
Βλέπετε πόσο απλός είναι ο κώδικας; Δεν κάναμε κάτι ιδιαίτερο. Το μόνο που κάναμε είναι να «μεταφράσουμε» αυτά που είπαμε παραπάνω. Στις γραμμές 13-16 βλέπετε τα 4 DIVs που έχουμε δημιουργήσει με σκοπό να τοποθετήσουμε ένα μικρό εικονίδιο μέσα σε αυτά. Όπως παρατηρείτε, όλα έχουν μία κοινή κλάση, τη ".socialIcons" και 4 διαφορετικά id (όλα τα HTML στοιχεία έχουν πάντα διαφορετικά id). Επίσης, στις γραμμές 21-23 παρατηρείτε τα τρία DIVs που δημιουργήσαμε και ουσιαστικά είναι τα DIVs που θα μπουν οι μικρογραφίες.
Aς δούμε ένα στιγμιότυπο.
Όλα ΟΚ! Ήρθε η ώρα να εφαρμόσουμε λίγο CSS ώστε να δείξει καλύτερα αυτό που φτιάξαμε. Δημιουργήστε ένα αρχείο CSS και ονομάστε το "styles.css". Τοποθετήστε το μέσα στον ίδιο φάκελο που τοποθετήσατε το "social.html". Ανάμεσα στα head tags της "social.html" τοποθετήστε το link:
><link rel="stylesheet" href="styles.css"/>
Είμαστε έτοιμοι. Ξεκινάμε την εφαρμογή του CSS κώδικα.
Εφαρμογή CSS κώδικα στο πάνελ μας
Εφαρμόζουμε στυλ στα παραπάνω, εξηγούμε και βλέπουμε ένα στιγμιότυπο. Σημαντική σημείωση! Από τον παραπάνω κώδικα HTML, αφαιρούμε τα «σχόλια» που έχουμε γράψει, όπως για παράδειγμα στις γραμμές 16, 24 κλπ: «Εδώ μπαίνουν τα εικονίδια», «εδώ μπαίνει ο τίτλος» κλπ.
>
* { margin: 0; padding: 0; }
#wrapper {
width: 264px;
margin: 0 auto;
top: 0;
left: 300px;
position: absolute;
}
#socializeContainer {
height: auto;
z-index: 200;
border: 5px solid #585858;
overflow: hidden;
float: left;
width: 254px;
}
#socializetitle {
width: 100%;
background-color: #E9E9E9;
color: #3F3F3F;
padding: 0;
font-family: Kristen ITC;
font-size: 16px;
text-align: center;
border-bottom: 3px solid gray;
margin-bottom: 2px;
}
.socialIcons {
width: 36px;
height: 36px;
margin-top: 5px;
margin-bottom: 1px;
float: left;
margin-left: 20px;
border: 1px solid blue;
}
#portfolioTitle {
margin-top: 5px;
margin-bottom: 3px;
width: 100%;
font-family: Kristen ITC;
background: #E9E9E9;
color: #999999;
font-size: 18px;
text-align: center;
float: left;
}
Εξηγήσεις στο CSS κώδικα με ανάλυση στα πιο σημαντικά
Γραμμή 1: Επειδή όλα τα HTML στοιχεία (πχ DIVs, paragraphs, images κλπ.) έχουν προκαθορισμένα margins και paddings, χρησιμοποιούμε το '*' το οποίο ονομάζεται universal selector και αυτός «μηδενίζει» ουσιαστικά τα margins και τα paddings των στοιχείων. Με αυτό τον τρόπο κάνουμε reset στα margins και paddings των στοιχείων και εν συνεχεία μπορούμε να εφαρμόσουμε τα δικά μας paddings και margins.
Γραμμή 3: Εδώ δηλώνουμε κάποιους κανόνες CSS που θα εφαρμόσουμε στο wrapper DIV. Το wrapper DIV περιλαμβάνει και το panel και το κουμπί του. Με το "position: absolute;" δηλώνουμε ότι η τοποθέτηση του στοιχείου αυτού θα είναι «απόλυτη», δηλαδή θα την ορίσουμε εμείς χρησιμοποιώντας τις CSS properties "top", "left", "right" και "bottom". Αυτός είναι και ο λόγος που τοποθετούμε το wrapper DIV top: 0; και left: 300px;. Δηλαδή θα απέχει 0px από την κορυφή της σελίδας και 300px από αριστερά. Εάν θέλετε να μάθετε περισσότερα για τo position: absolute;, δείτε εδώ.
Γραμμή 10: Εδώ ορίζουμε το CSS στυλ που θα εφαρμόσουμε στο DIV με id = "socializeContainer". Είναι το container που περιέχει τα πάντα εκτός από το κουμπί του slider. Η ιδιότητα z-index: 200; κάνει το εξής: Ορίζει ποιο HTML element είναι πάνω από ένα άλλο. Το HTML στοιχείο με το μεγαλύτερο z-index μπαίνει πάνω από τα υπόλοιπα. Αυτό το ορίζουμε εδώ γιατί θέλουμε όταν ανοίγει αυτό το panel να φαίνεται ότι βρίσκεται πάνω από οποιοδήποτε άλλο HTML στοιχείο της σελίδας. Για παράδειγμα από κάτω από το sliding panel μπορεί να υπάρχει ένα DIV με navigation. Ρυθμίζοντας το z-index σε ένα αριθμό μεγάλο, εξασφαλίζουμε ότι όταν ανοίξει το panel προς τα κάτω θα εμφανιστεί από πάνω από το navigation. Να το καλύπτει δηλαδή.
Σε αυτό το DIV ρυθμίζουμε επίσης το border μας και το πλάτος του που είναι ουσιαστικά το πλάτος των περιεχομένων του. Το overflow: hidden; δηλώνει πως εάν βάλουμε κάτι στο DIV "socializeContainer" το οποίο θα έχει μεγαλύτερο πλάτος από αυτό, τότε ο,τι περισσεύει κόβεται. Το float: left; δηλώνει πώς το DIV αυτό είναι όσο πιο αριστερά γίνεται στο μέσα στο element που το περιέχει, δηλαδή στο "wrapper DIV".
Γραμμή 20: Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόσουμε στο DIV με id "socializetitle". Είναι το DIV που θα περιέχει τον τίτλο μας και θα βρίσκεται πάνω – πάνω στo socializeContainer μας. Δεν υπάρχει κάτι σημαντικό να εξηγήσουμε εδώ. Το width: 100%; μας δηλώνει ότι το DIV αυτό, στο σημείο που βρίσκεται, καταλαμβάνει το 100% του πλάτους του στοιχείου που το περιέχει - δηλαδή το div socializeContainer.
Γραμμή 33: Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόζονται σε όποιο στοιχείο έχει κλάση τη ".socialIcons". Δηλώνουμε τα margins που θέλουμε, το float κλπ. Παρατηρήστε ότι δίνουμε ένα border: 1px solid blue;. Αυτό το κάνουμε διότι, ναι μεν ορίζουμε την κλάση, αλλά από τη στιγμή που δεν έχουμε εικονίδια, δε θα δούμε κάτι εάν δούμε τη σελίδα μας σε ένα browser. Το border αυτό θα μας δείξει ουσιαστικά που θα βρίσκονται τα εικονίδια αυτά. Παρατηρήστε ότι ορίσαμε πλάτος και ύψος 32*32 pixels. Τέτοιο θα είναι το μέγεθος των εικονιδίων μας.
Γραμμή 44: Εδώ ορίζουμε το στυλ CSS που θα εφαρμόσουμε στο DIV το οποίο θα περιέχει τον τίτλο που θα έχουμε στο mini portfolio μας.
Μετά από όλα αυτά, ας δούμε ένα στιγμιότυπο:
Τέλεια! Βλέπετε που θα τοποθετηθούν τα εικονίδια; Λείπει κάτι όμως. Κάτω από τον τίτλο του portfolio δεν υπάρχει μέρος που θα τοποθετηθούν οι μικρογραφίες μας. Θυμάστε που είπαμε ότι οι τρεις μικρογραφίες θα μπουν σε 3 DIVs που θα εφαρμόζεται σε αυτές μία κλάση ".boxes". Ας την φτιάξουμε λοιπόν τώρα! Στον παραπάνω CSS κώδικα προσθέστε:
>
.boxes {
width: 64px;
height: 64px;
border: 5px solid #dadada;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 6px;
}
Εδώ προσθέσαμε και την κλάση "boxes". Για να δούμε τώρα πως μοιάζει η εφαρμογή μας:
Τέλεια. Μήπως να κάνουμε και το socializeContainer μας να έχει στρογγυλεμένες άκρες; Θα το κάνουμε με CSS3! Προσθέστε μέσα στο CSS που καθορίζει την εμφάνιση του socializeContainer DIV τις εξής εντολές:
> -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Αυτές οι εντολές πάνε πάντα μαζί και δηλώνουν ότι στο συγκεκριμένο στοιχείο που εφαρμόζονται, οι γωνίες του έχουν στρογγυλέψει κατά 10px. Για να δούμε τώρα την εφαρμογή μας:
Νομίζω ότι μία χαρά πάμε. Για να προσθέσουμε και εικονίδια τώρα και να δούμε πως θα μοιάζει τελικά.
Προσθήκη των εικονιδίων και μικρογραφιών στο sliding panel μας
Τα εικονίδια που θα χρησιμοποιήσουμε τα κατεβάσαμε από τη σελίδα 108 high resolution dark social media icons. Στη συνέχεια διαλέξαμε ποια θέλαμε και τα επεξεργαστήκαμε για να έχουμε μέγεθος 32*32px. Κατεβάστε τα και εσείς. Τα τοποθετούμε σε ένα φάκελο με το όνομα "img" και ξεκινάμε.
Αυτά είναι τα εικονίδια που θα μπουν στα DIVs με class="socialicons" και ανάλογα με το id του κάθε ενός DIV από αυτά, θα τοποθετήσουμε το ανάλογο εικονίδιο σαν background. Στο αρχείο μας CSS προσθέτουμε τις εξής γραμμές αφού πρώτα διαγράψουμε το border που υπάρχει στη class "socialIcons". Δεν το θέλουμε πλέον.
>
#rss {
background: url(img/rss_small.png);
}
#facebook {
background: url(img/facebook_small.png);
}
#twitter {
background: url(img/twitter_small.png);
}
#mail {
background: url(img/mail_small.png);
}
Για να δούμε τώρα:
Τέλεια. Ας τοποθετήσουμε και τις μικρογραφίες των φωτογραφιών. Εδώ θα λειτουργήσουμε ως εξής: Θα δημιουργήσουμε 6 εικόνες. Οι τρεις από αυτές θα είναι σε μέγεθος 64*64 (βλέπε class "boxes"). Οι άλλες τρεις θα έχουν ότι μέγεθος θέλουμε. Ουσιαστικά θα έχουμε 3 μικρογραφίες και 3 αντίστοιχες φωτογραφίες κανονικού μεγέθους. Όταν πατάμε σε μία μικρογραφία, θα ανοίγει η αντίστοιχη «μεγάλη» φωτογραφία. Θα κάνουμε τις μικρογραφίες "links", να πατιούνται δηλαδή. Αυτό το κάνουμε γιατί στο δεύτερο μέρος θα χρησιμοποιήσουμε και ένα jQuery plugin, το lightbox που αναφέραμε στην αρχή.
Στον HTML κώδικα που έχουμε θα κάνουμε το εξής: Θα προσθέσουμε σε κάθε DIV με class "boxes" μία μικρογραφία κάνοντας την link. Άρα στο σημείο εκείνος ο κώδικας HTML θα γίνει:
>
<!--Prwto image sto portfolio apo aristera -->
<div class="boxes">
<a href="img/large1.png" title="Tutorial created by akisplace.com"><img src="img/mini1.png"/></a>
</div>
<!--Deytero image sto portfolio apo aristera -->
<div class="boxes">
<a href="img/large2.png" title="Tutorial created by akisplace.com"><img src="img/mini2.png"/></a>
</div>
<!--Trito image sto portfolio apo aristera -->
<div class="boxes">
<a href="img/large3.png" title="Tutorial created by akisplace.com"><img src="img/mini3.png"/></a>
</div>
Για να δούμε τώρα τη σελίδα μας:
Να προσθέσουμε τώρα και το κουμπί του panel;
Προσθήκη κουμπιού sliding panel
Το κουμπί αυτό θα είναι ένα image ουσιαστικά το οποίο θα τοποθετηθεί αμέσως μετά το κλείσιμο του socialContainer DIV και πριν το κλείσιμο του wrapper DIV. Η εικόνα αυτή θα βρίσκεται μέσα σε ένα DIV με class=".handler". Στον HTML κώδικα προσθέστε την εξής γραμμή στο σημείο που είπαμε παραπάνω:
><div class="handler"><img src="img/socialh2.png"/></div>
και στο CSS αρχείο ας δημιουργήσουμε το CSS στυλ που θα εφαρμοστεί σε αυτή την κλάση:
>
.handler {
float: left;
margin-left: 30px;
}
Με αυτόν τον CSS κώδικα κάνουμε τη φωτογραφία μας να πάει όσο πιο αριστερά γίνεται και εν συνεχεία της δίνουμε 30px περιθώριο από αριστερά σε σχέση με το wrapper. Αποτέλεσμα; Aς δούμε λίγο τη σελίδα μας τώρα:
Επίλογος πρώτου μέρους και live demo
Δείτε ένα live demo σχετικά με αυτό που θα φτιάξουμε στα δύο μέρη του tutorial αυτού!
Το πρώτο μέρος έφτασε στο τέλος του. Ήταν λίγο κουραστικό αλλά άξιζε τον κόπο. Στο επόμενο μέρος θα δούμε τη δημιουργία της κρυφής περιοχής καθώς και τη λειτουργικότητα της «εφαρμογής» με χρήση jQuery. Επίσης, θα μπορέσετε να κατεβάσετε τα αρχεία που χρησιμοποιήθηκαν, καθώς και τις πηγές μας.
Δεύτερο μέρος: Δημιουργία κρυφής περιοχής του πάνελ
Αυτό είναι το δεύτερο μέρος του premium tutorial που ξεκινήσαμε σχετικά με τη δημιουργία ενός sliding panel το οποίο θα περιέχει κάποια ενδιαφέροντα πραγματάκια και θα έχει λειτουργικότητα με jQuery. Στο πρώτο μέρος είδαμε πώς μπορούμε να φτιάξουμε ένα sliding panel με HTML και CSS. Το μόνο που μένει να κάνουμε είναι να δημιουργήσουμε την κρυφή περιοχή για την οποία είχαμε μιλήσει στο πρώτο μέρος. Στο τρίτο μέρος θα δώσουμε στο panel αυτό λειτουργικοτητα με χρήση κώδικα jQuery (3ο μέρος του tutorial) αλλά και με την χρήση plugins της jQuery.
Σκέψεις και δημιουργία κρυφής περιοχής με HTML και CSS
Θυμάστε την κρυφή περιοχή; Είναι η περιοχή η οποία βρίσκεται ακριβώς κάτω από τα 4 εικονίδια και πάνω από τον τίτλο του
"portfolio" μας. Είναι μία περιοχή που θέλουμε όταν κλικάρουμε πάνω στα εικονίδια να ξετυλίγεται προς τα κάτω. Ανάλογα με το εικονίδιο που πατάμε, η περιοχή αυτή θα «γεμίζει» με διαφορετικό περιεχόμενο. Η περιοχή αυτή είναι 4 DIVs ουσιαστικά τα οποία είναι κρυμμένα και εμφανίζονται και εξαφανίζονται με jQuery. Ας θυμηθούμε λίγο την εικόνα:
Βλέπετε στα δεξιά που μιλάμε για 4 DIVs που έχουν κοινή κλάση content; Εκεί ακριβώς είναι η κρυφή περιοχή. Αυτά τα 4 DIVs θα έχουν μία κοινή κλάση και 4 διαφορετικά id, αναλόγως με το τι θα περιέχει η κάθε μία περιοχή. Ας δούμε τι θέλουμε ακριβώςQ
1) Εάν κλικάρω το εικονίδιο με το RSS, θέλω να εμφανίζεται η περιοχή η οποία μέσα θα έχει μία φόρμα που θα μπορεί κάποιος να βάλει το email του ώστε να λαμβάνει τα άρθρα μας. Δεν θα την κάνω λειτουργική τη φόρμα, απλά θα τη δημιουργήσουμε
2) Εαν κλικάρω το fb εικονίδιο, θέλω να εμφανίζεται μέσα στην περιοχή αυτή η σελίδα μου στο Facebook. Εδώ θα χρησιμοποιήσω τον κώδικα που μου δίνεται στο Facebook, στη σελίδα των developers. Θα το εξηγήσουμε παρακάτω
3) Eάν κλικάρω το twitter εικονίδιο, θέλω στην περιοχή αυτή να εμφανίζονται τα τελευταία 3 tweets μου. Για ακόμα μία φορά, θα μας λυθούν τα χέρια με τη βοήθεια από το επίσημο site του Twitter
4) Εάν κλικάρω το εικονίδιο με το mail, τότε στην περιοχή αυτή θέλω να εμφανιστεί μία φόρμα επικοινωνίας που θα μου ζητάει να τη συμπληρώσω
5)Κάθε DIV από τα παραπάνω θα έχει ένα link από κάτω που θα το κλείνει. Δηλαδή θα το πατάμε και θα το κλείνουμε
Αυτά. Για πάμε.
Ο HTML κώδικας κρυφής περιοχής
Ο παρακάτω κώδικας τοποθετείται αμέσως μετά το
><div class="socialIcons" id="mail" title="mailDiv"></div>
που υπάρχει στον HTML κώδικα μας της σελίδας "social.html":
> <div id="rssDiv" class="content"> <!-- I forma gia to rss!! --> <-- to link poy tha kleinei ti div ayti --> </div> <div id="facebookDiv" class="content"> <!-- O kwdikas apo to facebook developers center --> <-- to link poy tha kleinei ti div ayti --> </div> <div id="twitterDiv" class="content"> <!-- O kwdikas apo to twitter gia ta teleytaia tweets --> <-- to link poy tha kleinei ti div ayti --> </div> <div id="mailDiv" class="content"> <!--I forma epikoinwnias mas --> <-- to link poy tha kleinei ti div ayti --> </div>
HTML και CSS για τα DIVs με class "content"
rssDiv
Στο DIV με id = "rssDiv" δημιουργούμε μία φόρμα επικοινωνίας με ένα πεδίο για το mail. Άρα το DIV μας γίνεται:
><div id="rssDiv" class="content">
<form method="POST" action="" id="form">
<label for="name" id="mails">Email</label>
<input type="text" id="text" value="Your Email here"/>
<input type="submit" value="Submit" id="submit"/>
</form>
<div class="close"><a href="#">Close</a></div>
</div>
Αυτό ήταν. Παρατηρείτε που κάτω ακριβώς από τη φόρμα τοποθέτησα ένα link με κλάση "close"; Είναι το link που θα κλείνει το DIV αυτό όταν θέλουμε εμείς. Ας προσθέσουμε και τον αντίστοιχο κώδικα στο CSS αρχείο και μετά να δούμε πώς μοιάζει:
>
.content {
float: left;
background-color: #E4E4E4;
width: 100%;
margin-top: 2px;
padding: 2px;
overflow: hidden;
}
.close {
font-size: 10px;
padding-left: 1px;
width: 100%;
float: left;
}
.close a {
color: red;
font-weight: bold;
}
#rssDiv {
margin-bottom: -2px;
}
#rssDiv label {
padding-top: 5px;
font-size: 12px;
font-family: Kalinga;
display: inline;
}
#form #text {
padding-bottom:3px;
}
#form #submit {
font-family: Kalinga;
font-size: 11px;
color: white;
width: 40px;
background: #383838;
cursor: pointer;
border: 1px solid blue;
margin-bottom: 1px;
padding-top: 3px;
}
Γραμμή 1: Εδώ είναι οι κανόνες CSS που εφαρμόζονται σε όλα τα DIVs που έχουν την κλάση "content".
Γραμμή 11: Εδώ δημιουργούμε το στυλ που θα έχει το DIV που θα περιέχει το link μας το οποίο θα κλείνει το DIV. Επειδή το link αυτό θα το χρησιμοποιήσουμε 4 φορές, γι' αυτό και δημιουργούμε ουσιαστικά μία CSS class, την ".close".
Γραμμή 19: Εδώ ρυθμίζουμε την εμφάνιση του link μας που θα κλείνει τα DIVs.
Γραμμή 23: Εδώ ορίζουμε τα CSS στυλ του DIV που έχει id = "rssDiv".
Γραμμές 29, 36, 40: Σε κάθε ένα από αυτά τα block κώδικα, ελέγχουμε την εμφάνιση των στοιχείων της φόρμας επικοινωνίας. Ελέγχουμε την εμφάνιση του label, του input που είναι το πεδίο εισαγωγής του mail καθώς και του κουμπιού submit!
Ας δούμε ένα στιγμιότυπο:
Όμορφα. Έτσι ακριβώς θα δημιουργήσουμε και τα άλλα 3 DIVs και θα τα κρύψουμε προσθέτοντας στο τέλος τον CSS κανόνα display:none μέσα στο CSS της κλάσης ".content".
facebookDiv
Σε αυτό το DIV θα χρησιμοποιήσουμε τα εργαλεία που μας δίνει το Facebook για developers. Πάμε στη σελίδα
Facebook Plugins-Like Box και βλέπουμε ότι εκεί έχει μία εφαρμογή η οποία μας δίνει τη δυνατότητα να δημιουργήσουμε ένα like-box! Mας ζητάει το id της σελίδας μας στο fb, το πλάτος που θέλουμε να έχει το like box (εμείς ζητάμε 250px πλάτος) κλπ. Όταν τα δώσουμε αυτά και πατήσουμε "get code", αντιγράφουμε τον κώδικα και θα τον τοποθετήσουμε στο DIV με id ="facebookDiv".
Σημείωση: Κανονικά το like box περιέχει και μικρογραφίες από κάποιους θαυμαστές της σελίδας μας. Για κάποιο λόγο, τις τελευταίες μέρες κάποιες φορές περιέχει και κάποιες όχι.
Ας δούμε λίγο τα περιεχόμενα του DIV:
> <div id="facebookDiv" class="content"> <iframe src="http://www.facebook.com/plugins/likebox.php?id=125811164104079& width=250&connections=20& stream=false&header=true&height=287" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:287px; " allowTransparency="true"></iframe> <div class="close"><a href="#">Close</a></div> </div>
Δεν υπάρχουν κανόνες CSS για το id="facebookDiv" διότι δεν χρειάζεται. Όπως βλέπετε, ο κώδικας που μας δόθηκε περιέχει και CSS μέσα.
twitterDiv
Εδώ θα τοποθετήσουμε στο DIV αυτό τα τελευταία μας tweets. Πηγαίνετε στη σελίδα Τwitter profile Widget και από 'κει μπορείτε να ελέγξετε κάποιες παραμέτρους για το widget σας. Αφού τελειώσετε, πατήστε "grab code" και θα σας δoθεί ο κώδικας. Αυτόν τον κώδικα πρέπει να τοποθετήσουμε μέσα στο DIV με id ="twitterDiv". Εμείς όμως θα κάνουμε κάτι πιο έξυπνο από το να τοποθετήσουμε όλο αυτόν τον κώδικα μέσα στο DIV. Λοιπόν, ο κώδικας που μας δίνει στη σελίδα με το Twitter widget είναι ο εξής:
>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('akisplace').start();
</script>
Εμείς θα κάνουμε το εξής εδώ:
Βήμα 1:
Την πρώτη γραμμή του κώδικα αυτού θα την τοποθετήσουμε στο head της σελίδας μας. Αυτό μπορούμε να το κάνουμε διότι αν παρατηρήσετε στη πρώτη γραμμή καλείται ένα javascript αρχείο, το "widgets.js" από το widget.twimg.com. Οπότε, εάν τοποθετηθεί στη σελίδα μας, μπορούμε να καλούμε το αρχείο από το head μας. Ας δούμε λίγο το head μας:
> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Archimidis Mertzanos" /> <link rel="stylesheet" href="styles_test.css"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <title>Socialize with us!!</title> </head>
Βήμα 2:
Στον κώδικα που μένει, από τη γραμμή 2-31, θα τον τοποθετήσουμε σε ένα αρχείο Javascript το οποίο θα δημιουργήσουμε εμείς. Το αρχείο το ονομάζουμε "tweet.js" και το τοποθετούμε σε ένα φάκελο που δημιουργούμε και τον ονομάζουμε "js". Το αρχείο αυτό θα περιέχει τον κώδικα από τις γραμμές 2-31 χωρίς φυσικά τα script tags (αφού το αρχείο είναι Javascript έτσι και αλλιώς - τα script tags τα χρησιμοποιούμε σε σελίδα HTML για να δηλώσουμε ότι θα ενσωματώσουμε κάποιο script στη σελίδα μας). Αφού κάνουμε τα παραπάνω βήματα μέσα στο DIV "twitterDiv" τοποθετούμε το παρακάτω και το DIV μας θα μοιάζει ως εξής:
> <div id="twitterDiv" class="content"> <script src="http://www.disk.gr/public/js/tweet.js"></script> <div class="close"><a href="#">Close</a></div> </div>
Είδατε; Mε μία γραμμή κώδικα (γραμμή 2) καλούμε το Twitter widget πλέον!
mailDiv
Εδώ θα δημιουργήσουμε τα περιεχόμενα του DIV με id "mailDiv" που θα περιέχει την φόρμα επικοινωνίας μας. Ο HTML κώδικας:
>
<div id="mailDiv" class="content">
<form method="get" action="" id="contactform">
<label for="name">Name:<abbr>*</abbr></label>
<input type="text" id="name" name="name"/>
<br />
<label>Email:<abbr>*</abbr> </label>
<input type="text" id="email" name="email"/>
<br />
<label for="comments">Your Comments<abbr>*</abbr></label>
<textarea id="textarea" name="textarea" id="textarea"></textarea>
<br />
<input type="submit" value="Submit" id="button_validate"/>
<span id="validation_result" class="result"></span>
</form>
<div class="close"><a href="#">Close</a></div>
</div>
Ας το κάνουμε λίγο πιο όμορφο με τη χρήση CSS. Ας προσθέσουμε τον παρακάτω κώδικα στο CSS αρχείο που έχουμε:
>
#contactform label {
display: block;
margin-left: 2px;
font: Verdana;
font-size: 16px;
font-weight: bold;
color: black;
}
#contactform input {
font: Kalinga;
font-size: 12px;
color: black;
padding: 2px;
}
#contactform textarea {
width: 80%;
height: 60px;
padding: 2px;
text-align: left;
}
#contactform #submit {
font-family: Kalinga;
font-size: 14px;
color: white;
background: #383838;
cursor: pointer;
border: 1px solid blue;
margin-bottom: 1px;
margin-top: 2px;
padding-top: 3px;
}
abbr {
color: red;
}
ΝΑΙ. Είμαστε έτοιμοι, ένα βήμα πριν αρχίσουμε με την jQuery. Το παραπάνω CSS δε θα το εξηγήσουμε καθότι είναι πολύ εύκολο. Για πάμε στο τελευταίο κομμάτι και στην εφαρμογή της jQuery.
Η συνέχεια στο τρίτο μέρος.Εκεί θα βρείτε και τις πηγές μας και τα αρχεία μας.
Τρίτο μέρος - Λειτουργικότητα με jQuery
Φτάσαμε στο τελευταίο μέρος του tutorial!
jQuery λειτουργικότητα!
Σημείωση: Σε αυτό το μέρος θα αναλύσουμε την χρήση της jQuery και θα σας δείξουμε πώς μπορείτε να ενσωματώνετε ένα plugin στη σελίδα σας. Όμως δε θα μπούμε σε λεπτομέρειες όπως configuration του plugin σε βάθος. Θα έχανε όλο το νόημα του το tutorial αυτό.
Τι θέλω να ελέγχω
Το πρώτο πράγμα που θα κάνουμε εδώ είναι να δημιουργήσουμε ένα αρχείο με jQuery κώδικα και αυτό θα ελέγχει:
1) Εάν φορτώθηκε η σελίδα μας.
2) Τί θα συμβεί εάν πατήσουμε το κουμπί του slider.
3) Tί θα συμβεί εάν πατήσουμε το το link "close".
4) Τί θα συμβεί και πώς θα ελέγχουμε το περιεχόμενο της DIV που θα ανοίγει ανάλογα με το εικονίδιο που πατάμε.
Στον φάκελο "js" που προαναφέραμε, αποθηκεύουμε ένα αρχείο jQuery - το ονομάζουμε "hideDiv.js". Αφού δημιουργήσουμε το αρχείο αυτό, θα το καλέσουμε και στο head της σελίδας μας εννοείται! Αλλιώς δε θα τρέχει ο κώδικας. Επίσης, στο head της σελίδας μας θα καλέσουμε το αρχείο της jQuery βιβλιοθήκης το οποίο θα το τοποθετήσουμε στον ίδιο φάκελο και αυτό. Εάν είστε εντελώς αρχάριοι στη jQuery, δείτε αυτό το jQuery tutorial.
Δημιουργώντας τα jQuery αρχεία
Ας αρχίσουμε λοιπόν με το αρχείο μας "hideDiv.js".
1) Έλεγχος για τη φόρτωση όλων των στοιχείων της σελίδας μας:
>
$(document).ready(function() {
//edw tha mpei olos o allos kwdikas.Prepei panta na elegxoume an exei
fortwsei i selida mas prwta!!!
});
2) Ας ελέγξουμε λίγο το κουμπί μας που ελέγχει το slider. Aλλά πρώτα ας κρύψουμε το panel μας. Στο CSS αρχείο μέσα στο "#socializeContainer" προσθέστε μία γραμμή κώδικα ακόμα πριν το '}'. Την παρακάτω γραμμή:
>display:none;
Το ίδιο ακριβώς κάνουμε και στην κλάση ".content" ώστε να μην φαίνονται τα κρυφά DIVs.
Έτσι. όταν δούμε τη σελίδα μας και πάλι, θα φαίνεται μόνο το κουμπί του panel μας και όχι ολόκληρο το panel. Στη συνέχεια, στο αρχείο "hideDiv.js" προσθέστε τον κώδικα ώστε το αρχείο μας να είναι το εξής:
>
$(document).ready(function(){
$(".handler").click(function(){
$("#socializeContainer").slideToggle(1000);
});
});
Με την προσθήκη του παραπάνω κώδικα ελέγχουμε το εάν πατηθεί το κουμπί μας - το οποίο βρίσκεται σε DIV με class handler - Γραμμή 2. Εάν πατηθεί το κουμπί μας, το socializeContainer μας - Γραμμή 3 - θα ξετυλίγεται ή θα τυλίγεται με ταχύτητα 1 sec το πλήρες άνοιγμα και 1 sec το πλήρες κλείσιμο.
3) Ας κάνουμε κάτι πιο tricky εδώ. Θα ελέγχουμε ποιο socialIcon πατάμε και ανάλογα θα εμφανίζουμε το κρυφό μας DIV με τα ανάλογα περιεχόμενα. Όταν για παράδειγμα έχουμε πατήσει το rss εικονίδιο και εν συνεχεία πατάμε το twitter, θα γλυστράει προς τα πάνω το κρυφό DIV και εν συνεχεία θα κατεβαίνει και πάλι κάτω με τα νέα περιεχόμενα μας. Ας δούμε τον κώδικα που θα προσθέσουμε στο αρχείο "hideDiv.js" και θα εξηγήσουμε!
>
$(".socialIcons").click(function () {
$(".content").slideUp(700);
var show_the_div = $(this).attr("title");
$("#"+ show_the_div).slideToggle(800);
});
Γραμμή 1: Εδώ ελέγχουμε εάν πατηθεί κάτι που έχει κλάση "socialIcons", δηλαδή ένα από τα DIVs που περιέχει ένα από τα εικονίδια μας! Εάν πατηθεί, θα εκτελεστούν οι γραμμές 2-5.
Γραμμή 2: Αυτή η γραμμή κάνει slideUp, δηλαδή «ανεβάζει προς τα πάνω» το στοιχείο που έχει class = "content". Αυτή η κλάση είναι η κλάση που εφαρμόζουμε στα 4 DIVs που είναι κρυφά.
Γραμμή 4-5: Εδώ παίζεται όλο το παιχνίδι. Πατώντας πάνω σε ένα εικονίδιο, μας δίνεται η δυνατότητα με την jQuery να παίρνουμε την τιμή από κάποιο attribute (title, id κλπ.) του στοιχείου αυτού. Εδώ παίρνουμε τον τίτλο του στοιχείου που περιέχει το εικονίδιο αυτό. Δηλαδή τον τίτλο του DIV που το περιέχει. Στο παράδειγμά μας, όταν πατάμε σε ένα εικονίδιο, τότε παίρνουμε τον τίτλο του δηλαδή. Το (this) αναφέρεται στο DIV που έχει σαν background το εικονίδιο μας - ουσιαστικά το εικονίδιο που πατάμε. Ας θυμηθούμε λίγο τον HTML κώδικα για τα εικονίδια:
> <div class="socialIcons" id="rss" title="rssDiv"></div> <div class="socialIcons" id="facebook" title="facebookDiv"></div> <div class="socialIcons" id="twitter" title="twitterDiv"></div> <div class="socialIcons" id="mail" title="mailDiv"></div>
Παρατηρείτε ότι κάθε DIV από τα παραπάνω έχει ένα τίτλο; O τίτλος αυτός δεν είναι τυχαίος. Ο τίτλος "rssDiv" είναι ίδιος με το id του DIV που περιέχει τη φόρμα για το rss μας. Με τον κώδικα jQuery, κάθε φορά που πατάμε ένα εικονίδιο, παίρνουμε τον τίτλο και τον αποθηκεύουμε σε μία μεταβλητή, τη "show_the_div". Στη συνέχεια, στη γραμμή 5 είναι ολοφάνερο τί κάνουμε. Δημιουργούμε εμείς το HTML στοιχείο που θέλουμε να ελέγξουμε βάζοντας "#" που είναι το αναγνωριστικό του id ενός DIV και την τιμή που είναι μέσα στη μεταβλητή μας. Οπότε, αυτόματα ενεργοποιώ το DIV που θέλω να δείξω και με το "slideToggle" το κάνω ανάλογα είτε slideUp είτε slideDown.
Έμεινε μόνο το link που κλείνει το κάθε DIV. Ας δούμε πώς θα μοιάζει το αρχείο μας "hideDiv.js" ολόκληρο!
>
$(document).ready(function(){
$(".handler").click(function(){
$("#socializeContainer").slideToggle(1000);
});
//otan klikaroume ena eikonidio
$(".socialIcons").click(function () {
$(".content").slideUp(700);
var show_the_div = $(this).attr("title");
$("#"+ show_the_div).slideToggle(800);
});
$(".close").click(function () {
$(".content").slideUp(700);
});
});
Έτοιμος ο κώδικας.Για να δούμε λίγο το συνολικό head της HTML σελίδας μας μέχρι στιγμής:
> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Archimidis Mertzanos" /> <link rel="stylesheet" href="styles_test.css"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript" src="http://www.disk.gr/public/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.disk.gr/public/js/hideDiv.js"></script> <title>Socialize with us!!</title> </head>
Λειτουργία των plugins και ενσωμάτωση στον κώδικα!
Στο τελευταίο κομμάτι του tutorial θα μιλήσουμε λίγο για δύο plugins που χρησιμοποιήσαμε. Τα plugins είναι έτοιμες εφαρμογές που μπορούμε να ενσωματώνουμε στη σελίδα μας και να μας γλυτώνουν από το να γράφουμε περιττό κώδικα. Το ένα plugin από αυτά μας κάνει validate τη φόρμα επικοινωνίας, δηλαδή αν δε συμπληρώσουμε στοιχεία, δε μπορούμε να τη στείλουμε. Το άλλο plugin μας δημιουργεί ένα lightbox effect. Δείτε το effect αυτό στη σελίδα: jQuery lightbox plugin
Ενσωμάτωση του lightbox plugin
1) Κατεβάζουμε το plugin.
2) Στη σελίδα που κατεβάσαμε το plugin, εάν πατήσουμε στο link "how to use" θα δούμε αναλυτικές οδηγίες χρήσεως.
3) Μέσα στο φάκελο Zip που κατεβάσαμε υπάρχει ένας φάκελος με το όνομα "js" που περιέχει αρχείο το οποίο ονομάζεται "jquery.lightbox-0.5.js. Αυτό το αρχείο τo αντιγράφουμε και εν συνεχεία το τοποθετούμε στον δικό μας φάκελο με το όνομα "js". Είναι αυτός ο φάκελος που περιέχει και τα άλλα jQuery αρχεία μας. Επίσης, στο zip που κατεβάσαμε υπάρχει ένα αρχείο CSS, το "jquery.lightbox-0.5.css". Αυτό το αρχείο το τοποθετούμε στο φάκελο που έχουμε και το αρχείο CSS μας, το "styles.css". Στον ίδιο φάκελο τοποθετούμε και τον φάκελο images που βρίσκεται μέσα στο zip που κατεβάσαμε.
4) Το μόνο που χρειάζεται είναι να δούμε πώς θα κάνουμε - με jQuery κώδικα - κάθε φορά που πατάμε σε μία μικρογραφία να ανοίγει η κανονική φωτογραφία με το Lightbox effect. Εάν διαβάσουμε στη σελίδα "how to use" που υπάρχει στη σελίδα του plugin, θα δούμε ότι υπάρχει μια ενότητα - η ενότητα activate - στην οποία βλέπουμε πώς μπορούμε να το ενεργοποιήσουμε εύκολα. Εμείς λοιπόν βλέποντας τον κώδικα που χρειάζεται, θα δημιουργήσουμε ένα κενό jQuery αρχείο και θα το σώσουμε με το όνομα "mylightbox.js". Το αρχείο αυτό το τοποθετούμε στο δικό μας φάκελο "js". Μέσα σε αυτό το αρχείο θα τοποθετήσουμε τον κώδικα:
>
$(function() {
$('.boxes a').lightBox();
});
Με τον παραπάνω κώδικα που ουσιαστικά βρήκαμε έτοιμο στη σελίδα του Plugin, ορίζουμε όταν πατηθεί το link που υπάρχει μέσα στο HTML στοιχείο με κλάση ".boxes", να εφαρμοστεί πάνω του το lightbox. Τα link μας είναι ανάμεσα στα:
><a></a> tags
> <!--Prwto image sto portfolio apo aristera --> <div class="boxes"> <a href="img/large1.png" title="Tutorial created by akisplace.com"><img src="img/mini1.png"/></a> </div> <!--Deytero image sto portfolio apo aristera --> <div class="boxes"> <a href="img/large2.png" title="Tutorial created by akisplace.com"><img src="img/mini2.png"/></a> </div> <!--Trito image sto portfolio apo aristera --> <div class="boxes"> <a href="img/large3.png" title="Tutorial created by akisplace.com"><img src="img/mini3.png"/></a> </div>
Εννοείται ότι πρέπει να καλέσουμε το αρχείο που δημιουργήσαμε - το "mylightbox.js" - αλλά και το αρχείο "jquery.lightbox-0.5.js" στο head της σελίδας μας. Και είμαστε έτοιμοι!
Όσον αφορά την ενσωμάτωση του validate plugin, κάντε το εσείς σαν άσκηση. Εμείς φυσικά θα σας δώσουμε τα αρχεία του παραδείγματος και μπορείτε να δείτε πώς το τοποθετήσαμε και εμείς.
Ας δούμε λίγο συνολικά το head της σελίδας μας. Μη σας φοβίζει το σκριπτάκι που υπάρχει, είναι για το validation και χρησιμοποιείται με το validation plugin!
>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles_test.css"/>
<link rel="stylesheet" href="jquery.lightbox-0.5.css"/>
<script type="text/javascript" src="http://www.disk.gr/public/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.disk.gr/public/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://www.disk.gr/public/js/hideDiv.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript" src="http://www.disk.gr/public/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="http://www.disk.gr/public/js/mylightbox.js"></script>
<title>Socialize with us!!</title>
<!-- ayto to script elegxei to validation -->
<script type="text/javascript">
$(document).ready(function() {
$("#contactform").validate({
rules: {
name: "required",// simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
textarea: {
required: true
},
}
});
});
</script>
</head>
Επίλογος tutorial-live demo -πηγές
Εδώ κάπου τελειώνει το εξαντλητικό αλλά ωραίο premium tutorial.Μπορείτε να δείτε ένα live demo εδώ.
1) Τα εικονίδια μας τα κατεβάσαμε από το site 108 high resolution dark denim social media icons. Για social media icons μπορείτε επίσης να δείτε το freebie που έχουμε με 200 δωρεάν social media icons
2) To lightBox plugin μπορείτε να το βρείτε εδώ: jQuery lightbox plugin
To validation jQuery plugin μπορείτε να το βρείτε εδώ: validation plugin και μπορείτε να δείτε ένα tutorial χρήσης εδώ και εδώ.
Τα αρχεία μας μπορείτε να τα κατεβάσετε από εδώ
ΠΗΓΗ TUTORIAL: akisplace.com