Δημιουργία sliding panel με minifolio + jQuery:Mέρος 3

Anastasis · November 10, 2016

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.

Ας αρχίσουμε λοιπόν με το αρχείο μας “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 div που είναι κρυφές..

Γραμμή 4-5:Εδώ παίζεται όλο το παιχνίδι..Πατώντας εμείς πάνω σε ένα εικονίδιο μας δίνεται η δυνατότητα με την jQuery να παίρνουμε την τιμή από κάποιο attribute(title,id κλπ) του στοιχείου αυτού.Εδώ παίρνουμε τον τίτλο του στοιχείου που περιέχει το εικονίδιο αυτό.Δηλαδή τον τίτλο της div που το περιέχει.Στο παράδειγμά μας όταν πατάμε σε ένα εικονίδιο τότε παίρνουμε τον τίτλο του δηλαδή.Το (this) αναφέρεται στη div που έχει σαν background το εικονίδιο μας-ουσιαστικά το εικονίδιο που πατάμε..Ας θυμηθούμε λίγο τον html κώδικα για τα εικονίδια…

κώδικας:

Παρατηρείτε ότι κάθε 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="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="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

κώδικας:

<div class="boxes">
<a href="img/large1.png" title="Tutorial created by akisplace.com"><img src="img/mini1.png"/></a>
</div>

<div class="boxes">
<a href="img/large2.png" title="Tutorial created by akisplace.com"><img src="img/mini2.png"/></a>
</div>

<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 της σελίδας μας…Μη σας φοβίζει το scriptaki που υπάρχει--είναι για το 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="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/hideDiv.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/mylightbox.js"></script>
<title>Socialize with us!!</title>


<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>

Επίλογος-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 χρήσης εδώ και εδώ..

Τα αρχεία μας μπορείτε να τα κατεβάσετε από δω

Sign In

Δημιουργία sliding panel με minifolio + jQuery:Mέρος 3

Recommended Posts

Anastasis 48

jQuery λειτουργικότητα!!!

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity