Εισαγωγή στην jQuery
Σε αυτό το βοήθημα θα κάνουμε την εισαγωγή και θα δούμε κάποια βασικά πράγματα για την χρήση της πασίγνωστης βιβλιοθήκης javascript, με το όνομα jQuery. Με την βιβλιοθήκη αυτή μπορούμε να δημιουργήσουμε διαδραστικότητα μεταξύ της Javascript και της HTML σε μία ιστοσελίδα, και να προσθέσουμε διάφορα εφέ για να την κάνουμε πιο όμορφη.
Ανάλυση
Σε αυτό το πρώτο μέρος θα δούμε αναλυτικά:
- Κάποιες βασικές πληροφορίες
- Που θα βρούμε την jQuery
- Βασικές αρχές
- Η πρώτη μας συνάρτηση
Βασικές Πληροφορίες
Η jQuery πρωτοεμφανίστηκε τον Ιανουάριο του 2006 στο BarCamp από τον John Resig. Πρόκειται για μια βιβλιοθήκη(framework) Javascript ανοιχτού κώδικα, υπό τις άδειες MIT License και την GNU General Public License.
Που θα βρούμε την jQuery
Πριν αρχίσουμε να βλέπουμε όρους και χρήσεις της jQuery, θα δούμε από μπορούμε να την βρούμε και να την κατεβάσουμε. Αν επισκεφτούμε το http://jquery.com/ θα βρούμε ένα μεγάλο κουμπί με την ένδειξη Download.
Υπάρχουν 2 διαφορετικές εκδόσεις της βιβλιοθήκης. Μια που είναι για την απλή χρήση και ενσωμάτωση στον κώδικα μας, και μια που μπορούμε να την χρησιμοποιήσουμε για να δούμε τον πηγαίο κώδικα και να κάνουμε αλλαγές σε αυτόν.
Προς το παρόν εμείς θα χρησιμοποιήσουμε την Production έκδοση. Κατεβάζουμε λοιπόν την έκδοση μας, και την αποθηκεύουμε στον φάκελο που θα έχουμε όλα τα αρχεία που θα δημιουργήσουμε.
Βασικές αρχές
Ανοίγοντας τον αγαπημένο μας επεξεργαστή κώδικα, θα δημιουργήσουμε ένα νέο HTML αρχείο. Στο συγκεκριμένο βοήθημα θα χρησιμοποιήσουμε το Dreamweaver CS4 της Adobe.
Θα ονομάσουμε το αρχείο μας 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.net</title> </head> <body> </body> </html>
Για να μποροέσουμε να χρησιμοποιήσουμε την βιβλιοθήκη της jQuery, πρέπει να προσθέσουμε στο <head> μέρος του κώδικα μας την γραμμή
<script src=" jquery-1.3.2.min.js" type="text/javascript"></script>
Στο συγκεκριμένο βοήθημα θα δημιουργήσουμε ένα απλό μενού, με ένα πολύ όμορφο εφέ. Για το μενού μας θα χρησιμοποιήσουμε τον εξής κώδικα μέσα στο <body> tag της σελίδας μας
<ul id="slide" > <li><h3>Κεντρικό Μενού</h3></li> <li><a href="#">Αρχική</a></li> <li><a href="#">Σχετικά</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Επικοινώνια</a></li> </ul>
Πλέον έχουμε το μενού μας. Πρέπει να δημιουργήσουμε το αρχείο style ώστε να δώσουμε ιδιότητες στην λίστα μας, και να την κάνουμε πιο όμορφη. Έτσι δημιουργούμε ένα νέο αρχείο, με το όνομα style.css και προσθέτουμε τον εξής κώδικα
body
{
margin: 0;
padding: 0;
background: #162224;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 100%;
width:500px;
}
h2
{
color: #999;
margin-bottom: 0;
margin-left:13px;
background:url(navigation.jpg) no-repeat;
height:40px;
}
h2 span
{
display: none;
}
p
{
color: #ffff66;
margin-top: .5em;
font-size: .75em;
padding-left:15px;
}
a:link {color:#5cb5c9}
a:visited {color:#5cb5c9}
a:hover {color:#FFFFFF}
#nav {
position:relative;
top:200px;
left:200px;
}
#hide {
position:absolute;
top:30px;
left:-190px;
}
ul#slide
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}
ul#slide li.element h3,
ul#slide li.element a
{
display: block;
width: 150px;
padding: 5px 18px;
margin: 0;
margin-bottom: 5px;
}
ul#slide li.element h3
{
color: #fff;
background:#273d40 url(heading_bg.jpg) repeat-y;
font-weight: normal;
}
ul#slide li.element a
{
color: #999;
background:#222 url(tab_bg.jpg) repeat-y;
border: 1px solid #1a1a1a;
text-decoration: none;
}
ul#slide li.element a:hover { color: #ffff66; }
Μέσα στον παραπάνω κώδικα έχω συμπεριλάβει και τα styles της τελικής μορφής της λίστας οπότε αν ακόμα δεν βλέπετε το επιθυμητό αποτέλεσμα, μην πανικοβάλλεστε. Θα φτάσουμε εκεί.
Τώρα πρέπει να συνδέσουμε το αρχείο style.css με το αρχείο index.html. Αυτό το κάνουμε αν προσθέσουμε τον παρακάτω κώδικα στο <head> κομμάτι του κώδικα μας
<link rel="stylesheet" href="style.css" />
Τώρα πρέπει να δημιουργήσουμε την συνάρτηση που θα κάνει το animation όταν θα περνάμε τον δείκτη πάνω από το μενού μας.
Θα δημιουργήσουμε ένα αρχείο με το όνομα effect.js και μέσα θα γράψουμε τον κώδικα
$(document).ready(function()
{
slide("#slide", 25, 15, 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// δημιουργούμε τα paths
var list_elements = navigation_id + " li.element";
var link_elements = list_elements + " a";
// ξεκινάμε τον χρόνο του animation
var timer = 0;
// δημιουργούμε το animation για όλα τα στοιχεία
$(list_elements).each(function(i)
{
$(this).css("margin-left","-180px");
// ανανεώνουμε τον χρόνομετρητή
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}
Ας αναλύσουμε λίγο τον κώδικα
Με την εντολή $(document).ready(function() { } ); εξασφαλίζουμε ότι όταν αρχίσουμε να εφαρμόζουμε τα εφέ, όλα τα στοιχεία της ιστοσελίδας έχουν φορτώσει πλήρως.
Η συνάρτηση που θα κάνει όλη την δουλειά για μας είναι η function slide(navigation_id, pad_out, pad_in, time, multiplier). Οι 5 παράμετροι που έχουμε είναι το navigation_id, που είναι το ID του στοιχείου που θα έχει το εφέ μας, το pad_out, που είναι το νούμερο των pixel που θα μετακινηθεί το στοιχείο μας, το pad_in που είναι το νούμερο των pixel που θα μετακινηθεί το στοιχείο μας όταν δεν θα είναι πια ενεργό, το time που είναι ο χρόνο του animation σε milliseconds, και τέλος το multiplier που είναι ο χρόνος διαφοράς animation σε κάθε στοιχείο.
Τώρα πρέπει να συμπεριλάβουμε το αρχείο effect.js στην σελίδα μας. Αυτό το κάνουμε βάζοντας τον εξής κώδικα στο <head> κομμάτι του κώδικα της σελίδας μας
<script src="effect.js"></script>
Τώρα πρέπει να βάλουμε τα κατάλληλα tags στην λίστα μας ώστε να συνδέσουμε τα στοιχεία με την συνάρτηση μας, και το αρχείο του style.
Έτσι προσθέτουμε τα αντίστοιχα tags στην λίστα μας
<div id="nav"> <img src="background.jpg" id="hide" /> <h2><span>Εισαγωγή στην jQuery</span></h2> <p><a href="http://www.greektuts.net/" target="_blank">GreekTuts.net</a></p> <ul id="slide"> <li class="element"><h3>Κεντρικό Μενού</h3></li> <li class="element"><a href="#">Αρχική</a></li> <li class="element"><a href="#">Σχετικά</a></li> <li class="element"><a href="#">Blog</a></li> <li class="element"><a href="#">Portfolio</a></li> <li class="element"><a href="#">Επικοινώνια</a></li> </ul> </div>
Αν όλα έχουν πάει καλά, κάνοντας προεπισκόπηση της δουλειάς μας, θα δούμε ένα μενού με πανέμορφο εφέ χρησιμοποιώντας μόνο την βιβλιοθήκη jQuery.Μπορείτε να δείτε το τελικό αποτέλεσμα εδώ
Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ.
Για ποιο λόγο το δικό μου μενού είναι τελείως στατικό? Ο κώδικας είναι ο ίδιος με του tutorial. Τον ακολούθησα κατά γράμμα. Τι μπορεί να συμβαίνει? Μήπως δεν εγκαταστάθηκε σωστά η JQuery?