GreekTuts » jQuery http://greektuts.net Ελληνικά Βοηθήματα Thu, 22 Jul 2010 19:56:16 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 http://greektuts.net http://www.greektuts.net/images/favicon4.ico GreekTuts Βασικοί JQuery Selectors http://greektuts.net/basic-jquery-selectors/ http://greektuts.net/basic-jquery-selectors/#comments Fri, 25 Jun 2010 07:51:30 +0000 KrAp http://greektuts.net/?p=3995

Στο τέλος του οδηγού θα μπορούμε:

  • Να κάνουμε χρήση των κλασικών JQuery selectors
  • Να κάνουμε χρήση των ιεραρχικών JQuery selectors

Προαπαιτούμενα

Εισαγωγή στην JQuery:  Μέρος 1ο, Μέρος  2ο (του Παναγιώτη Γρηγορόπουλου)

Πριν ξεκινήσουμε…

… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.

Στη συνέχεια παρουσιάζεται ο τρόπος για να επιτευχθούν οι στόχοι που περιγράψαμε στην εισαγωγή. Θα παρατηρήσετε ότι το άρθρο ακολουθεί τη δομή:

Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)

Παράδειγμα κώδικα

Στο τέλος του άρθρου θα βρείτε συνημμένο ένα συμπιεσμένο αρχείο που περιέχει:

  • Τις δύο εκδόσεις της JQuery
  • Συγκεντρωμένα όλα τα παραδείγματα.

Για να χρησιμοποιήσετε ορθά το πακέτο, το μόνο που έχετε να κάνετε είναι να το αποσυμπιέσετε σε κάποιο κατάλογο του συστήματος σας και στη συνέχεια χωρίς να κάνετε καμία αλλαγή στο περιεχόμενο του…

  • Κάνοντας διπλό κλικ στα αρχεία τύπου html μπορείτε να δείτε το αποτέλεσμα των παραδειγμάτων.
  • Ανοίγοντας τα αρχεία τύπου html με τον αγαπημένο σας επεξεργαστή κειμένου (προσωπικά χρησιμοποιώ τον Notepad++ και ορίζω την γλώσσα προγραμματισμού σε Javascript) μπορείτε να δείτε τον κώδικα (html και JQuery).

Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…

Τι είναι οι JQuery Selectors;

Αναρωτηθήκατε ποτέ γιατί η JQuery ονομάστηκε έτσι; Πολλοί από εσάς ίσως αναγνωρίζουν το J σαν συντομογραφία της JavaScript αλλά, το Query που κολλάει;

Θα σας βοηθήσω. Η έννοια query είναι γνωστότερη στην περιοχή των βάσεων δεδομένων όπου περιγράφει μία ερώτηση, μία αναζήτηση αν θέλετε, του χρήστη ως προς τη βάση δεδομένων με σκοπό να του επιστραφεί το σύνολο των εγγραφών, των στοιχείων δηλαδή της βάσης δεδομένων, που ικανοποιούν το ερώτημα αυτό. Σε μία βάση δεδομένων με τα δημογραφικά στοιχεία μιας χώρας για παράδειγμα ενδεικτικά queries θα μπορούσαν να είναι: «Αναζητώ όλους τους άνδρες με ηλικία άνω των 50 ετών», ή «Αναζητώ όλους τους κατοίκους της περιοχής Άνω Πόλη» ή «Αναζητώ γυναίκες μεταξύ 25 και 35 ετών που είναι ανύπαντρες» (ΟΚ το τελευταίο ακούγεται κάπως αλλά εν πάση περιπτώσει αντιλαμβάνεστε πως λειτουργεί ένα query).

Στην JQuery ένα query λειτουργεί με παρόμοιο τρόπο. Αναλαμβάνει να συλλέξει ένα σύνολο από τα στοιχεία που βρίσκονται στην υπό ανάπτυξη ιστοσελίδα ώστε να μπορέσει στη συνέχεια, ο προγραμματιστής, να επέμβει σε αυτά (είτε αισθητικά, είτε λειτουργικά). Τον ρόλο των queries στην JQuery βιβλιοθήκη παίζουν δύο ομάδες συναρτήσεων που ονομάζονται Selectors και Filters αντίστοιχα. Σήμερα θα ασχοληθούμε με τους Selectors.

Κάτι μου θυμίζει…

Αν η παραπάνω συζήτηση σας φαίνεται γνώριμη τότε μάλλον έχετε παρακολουθήσει κάποιο από τα άρθρα που συνιστούμε ως προαπαιτούμενα στην αρχή του άρθρου. Σε αυτά τα δύο άρθρα, ο Παναγιώτης Γρηγορόπουλος έχει περιγράψει το μεγαλύτερο μέρος των βασικών σημείων της βιβλιοθήκης της JQuery και, όπως είναι φυσικό, έχει ασχοληθεί και με το θέμα των Selectors. Σε αυτό εδώ το άρθρο, θα δούμε το ζήτημα αυτό αναλυτικότερα και θα παρουσιάσουμε εξειδικευμένα παραδείγματα. Ακόμη και αν έχετε διαβάσει τα παραπάνω άρθρα, μείνετε μαζί μας. Σας υπόσχομαι ότι δεν θα βαρεθείτε J

JQuery selectors. Πλοηγηθείτε στα στοιχεία της ιστοσελίδας σας.

Για την καλύτερη κατανόηση των εννοιών που παρουσιάζουμε σε αυτό το άρθρο έχω ετοιμάσει ένα δείγμα ιστοσελίδας στο οποίο και θα δουλεύουμε για λίγο καιρό. Το αποτέλεσμα, όταν το ανοίξουμε με τον αγαπημένο μας browser μοιάζει κάπως έτσι:

Αντίστοιχα ο κώδικας του αρχείου χωρίς το κομμάτι της JQuery είναι ο ακόλουθος:

<html>

<head>

<title>JQuery Selectors | GreekTuts.net</title>

</head>

<body>

<h1 id="header">Μια επικεφαλίδα</h1>

<p>Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου.</p>

<p id="secondparagraph">Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος.</p>

<table>

<tr>

<td>Δεδομένο 1.1</td>

<td>Δεδομένο 1.2</td>

<td>Δεδομένο 1.3</td>

</tr>

<tr>

<td>Δεδομένο 2.1</td>

<td>Δεδομένο 2.2</td>

<td>Δεδομένο 2.3</td>

</tr>

<tr>

<td>Δεδομένο 3.1</td>

<td>Δεδομένο 3.2</td>

<td class="someclass">Δεδομένο 3.3</td>

</tr>

</table>

<p>3η παράγραφος...</p>

<p>4η <b>παράγραφος...</b> ( μπορεί να γίνεται <b>κουραστικό</b> αλλά είναι για καλό σκοπό :)  )</p>

</body>

</html>

Ας πάμε να εμπλουτίσουμε τον κώδικά μας με λίγο JQuery και να δούμε πως μπορούμε να επιλέξουμε κάποια από τα στοιχεία στην ιστοσελίδα μας. Υπενθυμίζω ότι ο κώδικας JQuery μπαίνει στο τμήμα <head> … </head> της ιστοσελίδας μας και αρχίζει πάντοτε με την συμπερίληψη της βιβλιοθήκης JQuery.

<script src="jquery-1.4.2.min.js"></script>

Στη συνέχεια πρέπει να δηλώσουμε στον browser ότι θέλουμε ο JQuery κώδικάς μας να εκτελεστεί όταν φορτώνεται η ιστοσελίδα. Για τον λόγο αυτό δηλώνουμε την παρακάτω συνάρτηση μέσα στην οποία θα πειραματιστούμε (τώρα και σε όλα τα υπόλοιπα άρθρα της σειράς)

<script>

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

//κώδικας

});

</script>

Μερικοί απλοί selectors

Πριν ξεκινήσουμε 1 – 2 διευκρινήσεις:

  • HTML tag: Ένα html tag είναι μια λέξη κλειδί (εντολή) της html. Π.χ. <body>, <p>, <li>, <b>, κλπ.
  • .css(…): Συνάρτηση της JQuery που επεμβαίνει στο CSS του στοιχείου που προηγείται της τελείας και επιδρά με τον τρόπο που περιγράφουν τα ορίσματα της παρένθεσης. Στο σημερινό άρθρο θα συναντήσετε την δήλωση css(“border”, “thin solid red”). Αυτό που πρακτικά κάνει είναι να περικλείει το / τα επιλεγμένο(α) στοιχείο(α) σε ένα κόκκινο πλαίσιο ώστε να μπορείτε να δείτε το αποτέλεσμα του JQuery κώδικα κάθε φορά. Θα σας πρότεινα να αγνοήσετε τον τρόπο που λειτουργεί για την ώρα. Επικεντρωθείτε στους selectors.
  • Σχόλια JQuery ( // ): Όπως σε κάθε γλώσσα προγραμματισμού έτσι και στην JQuery υπάρχει η δυνατότητα δήλωσης σχολίων. Αυτή γίνεται με την προσθήκη των χαρακτήρων // μπροστά από τη γραμμή που θέλουμε να προσδιορίσουμε ως σχόλιο. Στο σημερινό παράδειγμά μας (που μπορείτε να κατεβάσετε στο τέλος του άρθρου) θα βρείτε συγκεντρωμένους όλους τους selectors που θα παρουσιάσουμε. Για να μην μπερδευτείτε, τους δίνουμε υπό μορφή σχολίων. Κάθε φορά που θέλετε να δοκιμάσετε κάποιον το μόνο που έχετε να κάνετε είναι να αφαιρέσετε το // μπροστά από τη γραμμή που σας ενδιαφέρει (και φυσικά να προσθέσετε // σε όλες τις υπόλοιπες) ώστε να είναι ενεργοποιημένος μόνον ένας selector κάθε φορά.

Επιλογή όμοιων tags

$("p").css("border", "thin solid red")

Ο παραπάνω selector θα επιλέξει όλα τα στοιχεία <p> που βρίσκονται στην ιστοσελίδα μας. Όπως παρατηρείτε ο selector δεν είναι τίποτε άλλο παρά το σήμα κατατεθέν της JQuery (δηλαδή το $) ακολουθούμενο από τον προσδιοριστή που θέλουμε, στην περίπτωσή μας το p κλεισμένο σε παρενθέσεις και διπλά εισαγωγικά. Παρατηρήστε ότι βάζουμε την περιγραφή του tag μόνο, χωρίς τα < > στα οποία περικλείεται κανονικά.

Επιλογή στοιχείων με ίδια κλάση 

$(".someclass").css("border", "thin solid red")

Πολλές φορές ρυθμίζουμε την εμφάνιση συγκεκριμένων στοιχείων κάνοντας χρήση κλάσεων CSS. Με τον selector $(“.myClass”) μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας που ανήκουν σε αυτήν την κλάση.

Επιλογή στοιχείου με βάση το id

$("#header").css("border", "thin solid red")

Ένας άλλος μηχανισμός που προσφέρεται από τα CSS είναι τα ids. Ο selector $(“#id”) μας επιτρέπει να διαχειριστούμε στοιχεία με ids μέσω της JQuery.

Επιλογή στοιχείων με βάση το tag και την κλάση

$("td.someclass").css("border", "thin solid red")

Είναι εφικτό να υπάρξουν συνδυαστικοί selectors. Ο παραπάνω επιλέγει όλα τα tags τύπου td που όμως ανήκουν στην κλάση someclass.

Επιλογή στοιχείων με βάση το tag, το id και την κλάση

$("p#secondparagraph.someclass").css("border", "thin solid red")

Σε αυτόν τον πολύ συγκεκριμένο selector γίνεται χρήση των μηχανισμών του id και της κλάσης. Πιο συγκεκριμένα θα επιλεγεί εκείνο το στοιχείο με id secondparagraph και κλάση someclass.

Selectors ιεραρχίας

Εκτός από τους παραπάνω selectors υπάρχει και μία ομάδα selectors που σχετίζονται  με την ιεραρχία των στοιχείων μέσα με μια ιστοσελίδα. Ας τους δούμε έναν – έναν.

Επιλογή στοιχείων παιδιών

$("tr > td").css("border", "thin solid red")

Ο selector $(“a > b”) επιλέγει όλα τα tags τύπου b που αποτελούν παιδιά του tag a (βρίσκονται δηλαδή ακριβώς ένα επίπεδο κάτω από το b). Στην προκειμένη περίπτωση θα επιλεγούν όλα τα td tags που είναι άμεσα παιδιά ενός tr tag (μην βιαστείτε να σκεφθείτε… «μα ένα td πάντα περιέχεται σε ένα tr» γιατί τα μάτια μου έχουν δει πολλά J ).

Επιλογή απογόνων

$("p b").css("border", "thin solid red")

Λειτουργεί όπως και ο a > b selector με τη διαφορά ότι δεν περιορίζεται σε άμεσα παιδιά. Με τον selector $(“a b”) μας επιστρέφεται μία λίστα με όλα τα tags b που αποτελούν απογόνους του a όσα επίπεδα κάτω και αν βρίσκονται από το a.

Επιλογή επομένου στοιχείου

$("table + p").css("border", "thin solid red")

Ο selector $(“a + b”) επιστρέφει το αμέσως επόμενο tag τύπου b που βρίσκεται μετά το tag a. Στο παράδειγμά μας θα επιστραφεί η αμέσως επόμενη παράγραφος μετά τον πίνακα.

Επιλογή συγγενικού στοιχείου (ή αδερφού κόμβου)

$("table ~ p").css("border", "thin solid red")

Ο selector $(“a ~ b”) επιστρέφει όλους τους αδερφούς κόμβους του a που είναι τύπου b. Στο συγκεκριμένο παράδειγμα θα επιστραφούν όλες οι παράγραφοι που αποτελούν συγγενικούς κόμβους του πίνακα της ιστοσελίδα μας.

Δοκιμάστε τα παραδείγματα που συνοδεύουν το άρθρο και πειραματιστείτε. Ως την επόμενη συνάντησή μας…

Να είστε καλά και να φροντίζεται τον εαυτό σας.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

download

]]> http://greektuts.net/basic-jquery-selectors/feed/ 0 JQuery. Ποια έκδοση μου ταιριάζει; http://greektuts.net/jquery-versions/ http://greektuts.net/jquery-versions/#comments Mon, 14 Jun 2010 07:47:37 +0000 KrAp http://greektuts.net/?p=3944 Στο πρώτο άρθρο μου για την JQuery επέλεξα να ασχοληθώ με μία συχνή παρεξήγηση.

Στο τέλος του οδηγού θα μπορούμε:

  • Να αναγνωρίζουμε τη διαφορά μεταξύ των δύο εκδόσεων της JQuery και
  • να τεκμηριώσουμε, σε πιθανό JQuery debate μεταξύ geek φίλων, τις εκάστοτε επιλογές μας

Προαπαιτούμενα

Εισαγωγή στην JQuery:  Μέρος 1ο, Μέρος  2ο (του Παναγιώτη Γρηγορόπουλου)

Πριν ξεκινήσουμε…

… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.
Στη συνέχεια παρουσιάζεται ο τρόπος για να επιτευχθούν οι στόχοι που περιγράψαμε στην εισαγωγή. Θα παρατηρήσετε ότι το άρθρο ακολουθεί τη δομή:

Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)
Παράδειγμα κώδικα

Στο τέλος του άρθρου θα βρείτε συνημμένο ένα συμπιεσμένο αρχείο που περιέχει:

•    Τις δύο εκδόσεις της JQuery
•    Συγκεντρωμένα όλα τα παραδείγματα.

Για να χρησιμοποιήσετε ορθά το πακέτο, το μόνο που έχετε να κάνετε είναι να το αποσυμπιέσετε σε κάποιο κατάλογο του συστήματος σας και στη συνέχεια χωρίς να κάνετε καμία αλλαγή στο περιεχόμενο του…

•    Κάνοντας διπλό κλικ στα αρχεία τύπου html μπορείτε να δείτε το αποτέλεσμα των παραδειγμάτων.
•    Ανοίγοντας τα αρχεία τύπου html με τον αγαπημένο σας επεξεργαστή κειμένου (προσωπικά χρησιμοποιώ τον Notepad++ και ορίζω την γλώσσα προγραμματισμού σε Javascript) μπορείτε να δείτε τον κώδικα (html και JQuery).

Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…

Επιλέγοντας τη σωστή έκδοση της βιβλιοθήκης JQuery (…και γιατί αυτό δεν είναι βίτσιο)

Όσοι από εσάς είχατε προηγούμενη εμπειρία με την βιβλιοθήκη JQuery, ή απλά διαβάσατε τα άρθρα που αναφέραμε ως «προαπαιτούμενα» νωρίτερα στο παρόν άρθρο, διαπιστώσατε ότι η JQuery έρχεται σε δύο εκδόσεις (production και development).

Από τα ονόματα και μόνο, αντιλαμβάνεται κανείς τον τρόπο χρήσης. Development κατά την διαδικασία ανάπτυξης, Production όταν δημοσιεύσουμε τη δουλειά μας. Στις τάξεις των προγραμματιστών κυκλοφορεί συχνά η θεωρία «Αν δουλεύει, άστο όπως είναι!». Η φιλοσοφία αυτή δουλεύει άψογα όταν αναλαμβάνουμε να τροποποιήσουμε μια εφαρμογή του ελληνικού δημοσίου (!) . Δεν είναι όμως πανάκια.

Πολλές φορές είναι καλό να χρησιμοποιούμε τα σωστά εργαλεία για τις σωστές δουλειές. Η προσωπική μου συμβουλή λοιπόν, όσον αφορά την JQuery προτιμήστε να αναπτύσσετε κάνοντας χρήση της έκδοσης development και να δημοσιεύεται κάνοντας χρήση της έκδοσης production.

Μα γιατί; Αφού δουλεύει!

Ας δούμε μερικές διαφορές μεταξύ των δύο εκδόσεων…

JQuery – Production

Η επίσημη έκδοση της JQuery για χρήση στον server, δηλαδή αφότου η ιστοσελίδα μας έχει δημοσιευθεί. Όπως πιθανότατα παρατηρήσατε και στην εικόνα που παραθέσαμε νωρίτερα στο άρθρο, το μέγεθός της είναι μόλις 24 kilobytes και αποτελεί μία minified έκδοση. Είναι κατασκευασμένη έτσι ώστε να διευκολύνει την εκτέλεση στο περιβάλλον των διαφόρων servers, ταχύτερα από ότι η development έκδοση. Θα μπορούσαμε να πούμε ότι βελτιστοποιεί την εκτέλεση σε επίπεδο server.

JQuery – Development

Και αυτή επίσημη έκδοση :p της JQuery όμως για τη φάση της ανάπτυξης. Αν και σαν μέγεθος αρχείου δεν μπορεί να θεωρηθεί μεγάλο (155 kilobytes), είναι περίπου 6,5 φορές η production έκδοση. Η ειδοποιός διαφορά με την production έκδοση θα έλεγα ότι έγκειται στον κώδικά τους. Όπως μπορείτε να δείτε στην εικόνα που ακολουθεί, η development έκδοση είναι γραμμένη με τρόπο κατανοητό από κάποιον που γνωρίζει JavaScript σε αντίθεση με την production έκδοση, της οποίας τον κώδικα δεν θα χαρακτηρίζαμε υπερβολικά «αναγνώσιμο».

Ας το πιστέψουμε… Πως χρησιμοποιώ τις διαφορετικές εκδόσεις στην πραγματικότητα;

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

Εάν κατεβάσετε αυτή τη στιγμή το .rar αρχείο που βρίσκεται στο τέλος του σημερινού μας άρθρου, και αφού το αποσυμπιέσετε, θα δείτε ότι περιλαμβάνει έναν φάκελο jquery_tuts_versions. Μέσα του μπορείτε να βρείτε τις τελευταίες εκδόσεις της JQuery:

•    jquery-1.4.2.js για την development
•    jquery-1.4.2.min.js για την προduction (το min από το minified)

Ανάλογα με το αν αναπτύσσετε ή δημοσιεύετε τη δουλειά σας, κρατάτε το αντίστοιχο αρχείο στον κατάλογο που είναι τοποθετημένη η ιστοσελίδα σας.

Όσον αφορά τον κώδικα της ιστοσελίδας σας τώρα. Σε περίπτωση που βρίσκεστε σε φάση ανάπτυξης (επομένως έχετε κρατήσει το jquery-1.4.2.js στον κατάλογό σας) ο κώδικας μιας hello world ιστοσελίδας που κάνει χρήση του JQuery θα μοιάζει με τον παρακάτω:

<html>
<head>
<title>Development phase example</title>
<!-- εδώ υποδεικνύουμε την έκδοση της JQuery που θα χρησιμοποιήσουμε -->
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<!-- λίγη JQuery... -->
<script type="text/javascript">
$("document").ready(function() {
alert("Η ιστοσελίδα βρίσκεται σε φάση ανάπτυξης");
});
</script>
</head>
<body>
…
</body>
</html>

Σε περίπτωση που η ιστοσελίδα σας είναι έτοιμη να δημοσιευθεί θα χρησιμοποιήσετε το αρχείο jquery-1.4.2.min.js και ο κώδικάς σας, σε σχέση με τον προηγούμενο θα είναι αλλαγμένος κατά μία γραμμή:

<html>
<head>
<title>Production phase example</title>
<!-- εδώ υποδεικνύουμε την έκδοση της JQuery που θα χρησιμοποιήσουμε -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!-- λίγη JQuery... -->
<script type="text/javascript">
$("document").ready(function() {
alert("Η ιστοσελίδα έχει δημοσιευθεί");
});
</script>
</head>
<body>

</body>
</html>

Σε αυτό το άρθρο αντιμετωπίσαμε το φιλοσοφικό ερώτημα, ελαφρώς ευκολότερο από το αίνιγμα της Σφίγγας, ποια έκδοση της JQuery μας ταιριάζει. Αν και τεχνικά, το δίλλημα αυτό δε λέει πολλά, ωστόσο, έχω την άποψη πως ότι μαθαίνουμε ένα προγραμματιστικό εργαλείο, οι λεπτομέρειες μπορεί να είναι σημαντικές. Σε περιπτώσεις όπως η JQuery, η χρήση της οποίας είναι συνυφασμένη με ανάπτυξη ιστοσελίδων για το διαδίκτυο, η τεκμηρίωση της παραπάνω θέσης είναι περιττή.

Δοκιμάστε τα παραδείγματα που συνοδεύουν το άρθρο και πειραματιστείτε ως την επόμενη συνάντησή μας…

Μην ξεχνάτε,

να είστε καλά και να φροντίζεται τον εαυτό σας.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

download

]]> http://greektuts.net/jquery-versions/feed/ 4 6 λόγοι για να μάθετε JQuery και ένας προβληματισμός http://greektuts.net/6-reasons-to-learn-jquery/ http://greektuts.net/6-reasons-to-learn-jquery/#comments Sat, 29 May 2010 07:00:43 +0000 KrAp http://greektuts.net/?p=3888 Θυμάμαι χαρακτηριστικά πως όταν συζητούσαμε με φίλους για εξεζητημένα θέματα (κανένα μενού με drop down εφέ ή κάποιον μετρητή επισκέψεων) καταλήγαμε… «θα πρέπει να το κάνουμε με JavaScript»…

Μετά το 2ο “big bang του διαδικτύου”, την εμφάνιση δηλαδή των δυναμικών ιστοσελίδων και αργότερα, των Web 2.0 υπηρεσιών, η JavaScript πέρασε για λίγο στο παρασκήνιο και τις πρώτες θέσεις στα “development charts” έλαβαν τεχνολογίες όπως η PHP, τα CSS, οι XHTML και XML, κλπ.

Εκεί λοιπόν που οι περισσότεροι είχαμε λησμονήσει την ύπαρξη της JavaScript, έκανε τη δυναμική της επανεμφάνισή της υπό την μορφή βιβλιοθηκών. Έτσι γεννήθηκε η JQuery. Πρόκειται για μια από τις γνωστότερες βιβλιοθήκες του είδους τους (κατά πολλούς μάλιστα η καλύτερη). Γιατί όμως να μπει κανείς στο κόπο να μάθει να την χρησιμοποιεί;

Τι είναι η JQuery;

Ο προγραμματισμός σε JQuery δεν αποτελεί ένα καινούριο θέμα για το GreekTuts.net. Ήδη υπάρχουν αρκετά και πολύ ενδιαφέροντα σχετικά άρθρα δια χειρός Παναγιώτη Γρηγορόπουλου, αρχισυντάκτη του GreekTuts. Σε όλους εσάς που ξεκινάτε τώρα να μαθαίνετε JQuery θα συνιστούσα τα δύο εισαγωγικά άρθρα που προσφέρονται στα ακόλουθα links [1] [2].

Δεδομένης της παραπάνω υποδομής σε θέματα JQuery τα άρθρα του υποφαινόμενου που θα ακολουθήσουν θα έχουν ως στόχο είτε να παρουσιάσουν σκοτεινά σημεία της διάσημης βιβλιοθήκης, είτε να καλύψουν ενδελεχέστερα βασικές περιοχές που απαιτούν ιδιάζουσα προσοχή.

Επίπεδο δυσκολίας

Θα έλεγα ότι η JQuery ακολουθεί ένα σχετικά απλό μοντέλο προγραμματισμού. Ωστόσο, η πείρα δείχνει ότι ό,τι είναι εύκολο για κάποιον, μπορεί να δυσκολεύει κάποιον άλλο. Σε κάθε περίπτωση αν ακολουθήσετε τη σειρά με την οποία δημοσιεύονται τα άρθρα μας και πειραματιστείτε αρκετά, θα καταλήξετε να γνωρίζετε JQuery σε πολύ καλό βαθμό.

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

6 λόγοι για να επιλέξετε να ασχοληθείτε με την JQuery…

  • Ακολουθεί την αρχή KISS (Keep It Simple Stupid): Η βιβλιοθήκη JQuery προσπαθεί να υπεραπλουστεύσει τον προγραμματισμό σε Javascript προσφέροντας πραγματικά απλούς μηχανισμούς και εντολές μέσω του framework της.
  • Παρέχει πλήρη και αναλυτικότατη τεκμηρίωση που συμπληρώνεται από την εκτεταμένη παρουσία ηλεκτρονικών βοηθημάτων (η παρούσα σειρά άρθρων αποτελεί ένα από αυτά): Εκτός από την πολύ καλοδουλεμένη τεκμηρίωσή του JQuery, οι ενδιαφερόμενοι μπορούν να ανατρέξουν και στην σελίδα του Visual JQuery όπου μπορούν να βρουν μία εναλλακτική αλλά πολύ βολική, από άποψη δομής, τεκμηρίωση. Δοκιμάστε το!
  • Υποστηρίζεται από μία πάρα πολύ ενεργή κοινότητα: Όπως για τα περισσότερα open source έργα λογισμικού, έτσι και για το JQuery η ύπαρξη μιας κατά το μέγιστο δυνατό ενεργής κοινότητας αποτελεί τον ακρογωνιαίο λίθο για την ανάπτυξη και ευημερία του. Εξερευνήστε το κεντρικό site του JQuery και θα ανακαλύψετε ότι υπάρχει πλήθος τρόπων με τους οποίους μπορείτε να διαδράσετε με την κοινότητα.
  • Η έλλειψη μεγέθους μετράει: Το γεγονός ότι το βασικό πακέτο της JQuery είναι μόλις 20Kb αφενός επιβεβαιώνει την πρώτη παρατήρηση, ότι δηλαδή η φιλοσοφία της έγκειται στην απλότητα και αφετέρου κάνει πολύ εύκολη την κατανόηση της αρχιτεκτονικής της.
  • Ποικιλία χαρακτηριστικών: Η JQuery δίνει τη δυνατότητα στον χρήστη να χρησιμοποιήσει σχεδόν το σύνολο των δυνατοτήτων που προσφέρει η γλώσσα JavaScript. Από απλά χαρακτηριστικά που σχετίζονται με βασικές λειτουργίες εμφάνισης / απόκρυψης, ως Ajax κλήσεις και σύνθετα εφέ.
  • Επεκτασιμότητα: Η λογική με την οποία είναι φτιαγμένη η JQuery είναι απλή πράγμα που αντικατοπτρίζεται και στον ίδιο της τον κώδικα. Αυτό κάνει πολύ εύκολη την επέκτασή / τροποποίησή της.

… και 1 προβληματισμός!

Παρά το σύνολο των εξαιρετικών χαρακτηριστικών που συγκεντρώνει, η JQuery εξακολουθεί να είναι απλά μια βιβλιοθήκη, ένα περιτύλιγμα αν θέλετε, της γλώσσας JavaScript. Τέτοιου είδους κατασκευάσματα είναι πιθανό να λειτουργήσουν σαν «σειρήνες» κάνοντας τον χρήστη να προσκολληθεί στις ευκολίες που παρέχουν με αποτέλεσμα να απομακρυνθεί τελείως από την φιλοσοφία της αρχικής γλώσσας (στην προκειμένη περίπτωση της JavaScript).

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

Αν λοιπόν τα κέρδη που περιγράφουμε παραπάνω σας φαίνονται πειστικά, ή αν δεν είστε άνθρωπος που προβληματίζεται εύκολα, ή και τα δύο σας προσκαλούμε να μας ακολουθήσετε στο εγχείρημα εξερεύνησης της βιβλιοθήκης JQuery που πρόκειται να ξεκινήσει από το επόμενο κιόλας άρθρο αυτής εδώ της σειράς.  Προμηθευτείτε λοιπόν τον αγαπημένο σας καφέ και μέχρι τότε…

Να είστε καλά και να προσέχετε τον εαυτό σας!

]]> http://greektuts.net/6-reasons-to-learn-jquery/feed/ 5 Μετακινούμενα Παράθυρα 2o Μέρος http://greektuts.net/movable-windows-css-jquery-part2/ http://greektuts.net/movable-windows-css-jquery-part2/#comments Sat, 15 May 2010 08:00:51 +0000 Pantso http://greektuts.net/?p=3773 Βήμα 1

Ξεκινάμε από εκεί που είχαμε μείνει στο πρώτο μέρος. Αφού έχουμε έτοιμη την σελίδα μας, επόμενο βήμα είναι να φορτώσουμε την βιβλιοθήκη jQuery και την επιπλέον βιβλιοθήκη jQueryUI. Στον οδηγό μας θα χρησιμοποιήσουμε αυτές τις δύο βιβλιοθήκες της Javascript για να προσθέσουμε την λειτουργία drag n drop στα παράθυρα μας. Επισκεπτόματε την ιστοσελίδα http://jqueryui.com/download και κατεβάζουμε το πακέτο ώς είναι. Έτσι θα έχουμε 2 αρχεία, το jquery-1.3.2.min.js και το jquery-ui-1.7.2.custom.min.js. Μετά τα αποθηκεύουμε μαζί με τα αρχεία της ιστοσελίδας μας αλλά σε έναν νέο φάκελο με το όνομα scripts.

Βήμα 2

Ανοίγουμε το index.html που φτιάξαμε χτές, και μέσα στο <head> γράφουμε

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Έτσι συμπεριλαμβάνουμε τα δύο αρχεία που κατεβάσαμε, και λέμε στην ιστοσελίδα μας να τα φορτώσει κατά την εκκίνηση.

Βήμα 3

Πρίν κάνουμε οτιδήποτε άλλο, ας προσθέσουμε το περιεχόμενο στην σελίδα μας. Στο <body> του αρχείου index.html και πιο συγκεκριμένα μέσα στο div content προσθέτουμε

<div class="column">
<div class="widget">
<h3>Τελευταία Άρθρα</h3>
<p><strong>Μαθήματα ECDL</strong><br />Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. <a href="#">Περισσότερα...</a></p>
<p><strong>Eiσαγωγή στην PHP Μέρος 2</strong><br />Σε αυτό το άρθρο θα δούμε το δεύτερο μέρος της εισαγωγής στην PHP, συνέχίζοντας από εκεί που είχαμε μείνει.<a href="#">Περισσότερα...</a></p>
<p><strong>Δημιουργήστε το δικό σας sticker</strong><br />Σε αυτό το βοήθημα θα δούμε βήμα βήμα πως μπορούμε να δημιουργήσουμε το δικό μας αυτοκόλλητο στο Photoshop.<a href="#">Περισσότερα...</a></p>
</div>
<div class="widget">
<h3>Γράψτε για το GreekTuts</h3>
<p>Θέλετε και εσείς να γράψετε άρθρα για το GreekTuts; Διαβάστε περισσότερα εδώ. Οποιοσδήποτε μπορεί να στείλει, γι'αυτό αδράξτε την ευκαιρία και στείλτε μας και εσείς.</p>
</div>
<div>
<h3>Συνεντεύξεις</h3>
<p><strong>Συνέντευξη με τον Γεράσιμο Τσιάμαλο</strong><br />O Γεράσιμος δέχτηκε να μας παραχωρήσει μια συνέντευξη στα πλαίσια του μήνα WordPress και να μοιραστεί μαζί μας τις εμπειρίες του και τις δουλειές του. <a href="#">Περισσότερα...</a></p>
</div>
</div>
<div id="featured">
<h2>Δωρεάν Μαθήματα ECDL</h2>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. Mέσα από την σειρά οδηγών που ξεκινάει τον Ιούνιο, θα μάθετε και εσείς να χρησιμοποιείτε σαν επαγγελματίες τον υπολογιστή στις κύριες εφαρμογές αυτοματισμού γραφείου και τις βασικές υπηρεσίες του διαδικτύου.</p>
</div>
<div class="column">
<div class="widget">
<h3>Γίνε Συνδορμητής Στο GreekTuts</h3>
<p>Κερδίστε πρόσβαση σε επιπλέον υλικό και άρθρα, αλλά και πολλές άλλες παροχές και προσφορές αγοράζοντας μία απο τις συνδρομές που σας προσφέρει το GreekTuts.</p>
</div>
<div class="widget">
<h3>RSS Feed</h3>
<strong>Μαθήματα ECDL</strong>
<p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL.</p>
</div>
<div class="widget">
<h3>Επικοινωνία...</h3>
<p>Επικοινωνήστε μαζί μας</p>
<input type="text" value="Όνομα..." />
<input type="text" value="Email..." />
<textarea rows="4" cols="20" value="Μήνυμα..."></textarea>
</div>
</div>
<div class="column">
<div class="widget">
<h3>Οι Φίλοι μας στο Twitter</h3>
<center><img src="styles/twitt.png"></img></center>
</div>
</div>

Έτσι δημιουργούμε 3 στήλες, με 3 blocks στις 2 πρώτες, και 1 block στην τρίτη. Columns είναι οι στήλες και widgets τα blocks.

Βήμα 4

Ανοίγουμε το screen.css στον φάκελο styles, και προσθέτοντας τον εξής κώδικα θα δώσουμε μορφή στο περιεχόμενο μας

#featured {
width:                    592px;
padding:                6px;
margin:                    6px;
margin-left:            18px;
margin-top:                16px;
float:                    left;
height:                    200px;
background:                #333333 url("accent.jpg") no-repeat scroll -200px -40px;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
}

#featured h2 {
margin-left:            340px;
color:                    #ffffff;
font-size:                20px;
font-weight:            bold;
}

#featured p {
margin-left:            342px;
color:                    #ffffff;
}

.column {
width:                    290px;
padding:                6px;
margin:                    0;
margin-left:            12px;
float:                    left;
min-height:                300px;
height:                    100%;
}

.widget {
position:                relative;
padding:                6px;
margin:                    0;
margin-top:                10px;
background:                #f3f3f3 url(grad1.png) no-repeat top right;
border-radius:            5px;
-moz-border-radius:        5px;
-webkit-border-radius:    5px;
min-height:                30px;
overflow:                hidden;
border:                    1px solid #C9C9C9;
}
.widget h3 {
margin-top:                -6px;
color:                    #0f57bb;
font-size:                1.6em;
line-height:            2em;
font-weight:            normal;
border-bottom:            1px solid #999999;
background:                transparent url(movable.png) no-repeat center left;
text-indent:            12px;
cursor:                    hand;
text-shadow:            0 1px 0 #FFFFFF;
}

Βήμα 5

Θα χρησιμοποιήσουμε τις εξής εικόνες

accent.jpg

grad1.png

movable.png

twitt.png

Βήμα 6

Τώρα που έχουμε τα πάντα έτοιμα, θα προσθέσουμε την λειτουργία drag n drop. Αυτό το κάνουμε προσθέτοντας στο <head> του index.html και κάτω από τα 2 scripts τον εξής κώδικα

<script type="text/javascript">
$(document).ready(function(){
$(".column").sortable({
connectWith: '.column',
cursor: 'hand',
handle: 'h3',
opacity: 0.2,
change: function(e, i) {
// Post data back to server or update cookie
}
});
$(".widget").append('<div></div>');
$(".close").click(function(){
if ($(this).parent().data("collapsed")=="yes") {
$(this).parent().data("collapsed","no");
$(this).parent().animate({height:$(this).parent().data("height")});
} else {
$(this).parent().data("height",$(this).parent().height());
$(this).parent().data("collapsed","yes");
$(this).parent().animate({height:30});
}
});

});
</script>

Βήμα 7

Στο screen.css θα προσθέσουμε τον παρακάτω κώδικα, για να διορθώσουμε κάποιες ατέλεις που δημιουργούνται

.widget .close {
width:                    25px;
height:                    25px;
position:                absolute;
top:                    0;
right:                    0;
cursor:                    pointer;
}

.ui-sortable-helper {
border:                    3px solid #0f57bb;
cursor:                    move;

}

Βήμα 8

Πλέον η σελίδα μας είναι έτοιμη. Κάθε block που υπάρχει σε αυτήν, μπορεί να μετακινηθεί, και να μικρύνει ή να μεγαλώσει πατώντας το μπλέ κουμπάκι στην επικεφαλίδα του.

Δείτε παρακάτω το τελικό αποτέλεσμα

Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος


Member Area
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

]]> http://greektuts.net/movable-windows-css-jquery-part2/feed/ 2 Μετακινούμενα Παράθυρα 1o Μέρος http://greektuts.net/movable-windows-css-jquery-part1/ http://greektuts.net/movable-windows-css-jquery-part1/#comments Fri, 14 May 2010 11:59:09 +0000 Pantso http://greektuts.net/?p=3754 Στο πρώτο μέρος λοιπόν θα “στήσουμε” την ιστοσελίδα μας, δομικά και στυλιστικά, στην οποία στο δεύτερο μέρος θα προσθέσουμε περιεχόμενο, και θα κάνουμε τα κουτιά που περιέχουν το περιεχόμενο να μπορούν να γίνουν drag n drop.

Βήμα 1

Ας ξεκινήσουμε πρώτα δημιουργώνας την σελίδα μας σε HTML. Ανοίγουμε ένα νέο αρχείο με το όνομα index.html και γράφουμε τον εξής κώδικα

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Μετακινούμενα Παράθυρα μέρος 1ο - GreekTuts.net</title>
<link href="styles/screen.css" rel="stylesheet" type="text/css" media="screen" />
<!--
Εδώ θα προσθέσουμε την Javascript στο 2ο μέρος
//-->
</head>
<body>

</body>
</html>

Βήμα 2

Ας προσθέσουμε λοιπόν την επικεφαλίδα την φόρμα αναζήτησης και το μενού πλοήγησης. Στο <body> γράφουμε

<div id="container">

<div id="header">
<h1>GreekTuts</h1>
<input type="text" id="searchbox" value="Αναζήτηση..." />
</div>
<div id="navigation">
<ul>
<li>Κεντρικη</li>
<li>Σχετικα</li>
<li>Blog</li>
<li>Υπηρεσιες</li>
<li>Επικοινωνια</li>
</ul>
</div>

</div>

Βήμα 3

Ας προσθέσουμε και το υποσέλιδο μας. Κάτω ακριβώς από τον παραπάνω κώδικα γράφουμε

<div id="footer">
<ul>
<li>Σχετικά</li>
<li>Υπηρεσίες</li>
<li>Blog</li>
<li>Επικοινωνία</li>
</ul>
<ul>
<li>Άρθρο 1</li>
<li>Άρθρο 2</li>
<li>Άρθρο 3</li>
<li>Άρθρο 4</li>
<li>Άρθρο 5</li>
</ul>
<ul>
<li>Όροι Χρήσης</li>
<li>Απόρητο</li>
<li>Sitemap</li>
</ul>

</div>
<div class="footP">
<p>Σχεδιασμός & Ανάπτυξη : <a href="http://pantso.gr" target="_blank">Pantso</a> για το GreekTuts.net</p>
</div>
</div>

Βήμα 4

Πλέον έχουμε την δομή της σελίδας μας έτοιμη. Ας προσθέσουμε λοιπόν και το στύλ μαζί με εικόνες. Δημιουργούμε ένα αρχείο με το όνομα screen.css και γράφουμε

body {
margin:                    0;
padding:                0;
background:                #9f9f9f;
color:                    #000000;
font-size:                62.5%;
font-family:            arial, helvetica, sans-serif;
}

h1 {
font-family:            helvetica, arial, sans-serif;
margin-left:            12px;
height:                    120px;
width:                    300px;
color:                    #ffffff;
text-indent:            -10000px;
overflow:                hidden;
background:                transparent url(logo.png) center left no-repeat;
}

a {
color:                    #0f57bb;
text-decoration:        none;
}

#searchbox {
position:                absolute;
bottom:                    10px;
right:                    22px;
font-size:                1.8em;
font-weight:            normal;
border:                    1px solid #660000;
color:                    #bdbdbd;
padding:                5px;
bottom:                    40px;
}

h2 {
color:                    #7FA9A5;
font-size:                1.6em;
font-weight:            normal;
}

p {
font-size:                1.2em;
line-height:            1.5em;
}

#container {
margin:                    0;
padding:                0;
position:                relative;
width:                    960px;
margin:                    auto;
background:                #ffffff;
border-left:            10px solid white;
border-right:            10px solid white;
border-bottom:            10px solid white;
top:                    -20px;
}

#header {
margin:                    0;
padding:                0;
position:                relative;
width:                    960px;
height:                    120px;
background:                #0f57bb url(headerbg.png) repeat-x top left;
}

#navigation {
background:                transparent url(navbg.png) repeat-x top left;
height:                    35px;
margin-top:                2px;
margin-bottom:            2px;
}

#navigation ul {
margin:                    0;
padding:                0;
}

#navigation ul li {
list-style:                none;
font-size:                1.7em;
text-transform:            uppercase;
float:                    left;
padding-left:            41px;
padding-right:            41px;
line-height:            35px;
color:                    #aeaeae;
border-right:            1px inset #cdcdcd;
cursor:                    pointer;
}

#navigation ul li:hover {
background:                #394eb8;
color:                    #ffffff;
}

#content {
margin-top:                1px;
padding-top:            12px;
background:                #dddddd;
float:                    left;
width:                    960px;
padding-bottom:            12px;
min-height:             300px;
}
#footer {
height:                    100px;
background:                #313131;
color:                    #ffffff;
border-top:                2px solid #ffffff;
clear:                    left;
}

#footer ul {
margin:                    0;
padding:                0;
margin-top:                10px;
float:                    left;
width:                    290px;
padding-left:            12px;
margin-left:            12px;
border-left:            1px solid white;

}

#footer ul li {
list-style:                none;
text-transform:            uppercase;
line-height:            2em;
font-size:                0.8em;
}

.footP {
margin:                    0 auto;
text-align:                center;
}

Βήμα 5

Οι εικόνες που θα χρησιμοποιήσουμε είναι οι εξής

logo.png

headerbg.png

navbg.png

Συμπεριλαμβάνουμε τις εικόνες και το screen.css σε έναν φάκελο με το όνομα styles και αυτό ήταν! Πλέον έχουμε έτοιμη την σελίδα μας τόσο δομικά όσο και στυλιστικά. Δείτε παρακάτω ένα demo του τι έχουμε κάνει μέχρι τώρα στο πρώτο μέρος.

Στο δεύτερο μέρος, αύριο, θα δούμε πως θα προσθέσουμε το περιεχόμενο μας, και πως θα κάνουμε τα διάφορα blocks να δέχονται drag n drop, ώστε να μπορούμε να τα μετακινούμε μέσα στην ιστοσελίδα, και να τα ανακατανέμουμε όπως εμείς θέλουμε.

Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος


Member Area
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

]]> http://greektuts.net/movable-windows-css-jquery-part1/feed/ 0 Εισαγωγή στην jQuery Μέρος 2 ScreenCast http://greektuts.net/jquery-intro-part2-screencast/ http://greektuts.net/jquery-intro-part2-screencast/#comments Wed, 05 May 2010 16:58:15 +0000 Pantso http://greektuts.net/?p=3619 Μέρος 1

Μέρος 2

Οι συνδρομητές μας μπορούν να κατεβάσουν τα αρχεία που χρησιμοποιήθηκαν σε αυτό το βοήθημα από εδώ


Member Area
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

]]> http://greektuts.net/jquery-intro-part2-screencast/feed/ 0 Εισαγωγή στην jQuery Μέρος 2 http://greektuts.net/jquery-intro-part2/ http://greektuts.net/jquery-intro-part2/#comments Tue, 04 May 2010 23:59:34 +0000 Pantso http://greektuts.net/?p=3600 Έχουμε ήδη δεί την εντολή που μας εξασφαλίζει ότι η σελίδα μας έχει φορτώσει πλήρως πρίν τρέξει οποιαδήποτε από τις εντολές μας, αλλά ας το ξαναθυμίσουμε για πρακτικούς λόγους στο βοήθημα μας.

$(document).ready(function() {

...(οι εντολές μας εδώ)...

});

Έτσι, πρίν τρέζξουν οι εντολές μας, είμαστε σίγουροι ότι όλα τα υπόλοιπα στοιχεία της σελίδας μας έχουν φορτωθεί (εικόνες,στύλ, κτλ.)
Όπως έχουμε δεί και σε προηγούμενο άρθρο, το σύμβολο του δολαρίου ($) ουσιαστικά είναι η jQuery. Αυτό σημαίνει ότι είτε γράψουμε

jQuery(document).ready(function() {

...(οι εντολές μας εδώ)...

});

είτε

$(document).ready(function() {

...(οι εντολές μας εδώ)...

});

θα εκτελεστεί ακριβώς το ίδο πράγμα. Βέβαια για προφανείς λόγους, θα χρησιμοποιούμε το δολάριο παρά την λέξη.

Ας δούμε λοιπόν τώρα πως κάνουμε σωστά τις επιλογές μας, ώστε να μπορέσουμε να εκτελέσουμε τις εντολές μας πάνω τους

Αν έχουμε τον εξής κώδικα

και θέλουμε να επιλέξουμε τo κείμενο μέσα στα span tags, το μόνο που έχουμε να κάνουμε είναι να γράψουμε

$('span')

Αυτό είναι αρκετά απλό. Τι γίνεται όμως όταν θέλουμε να επιλέξουμε ένα div ή ένα id;
Η jQuery μας λύνει τα χέρια, αφού δανείζεται μερικά στοιχεία από τα CSS και έτσι για τα divs χρησιμοποιούμε την τελεία (.) ενώ για τα id χρησιμοποιούμε την δίαιση (#), όπως ακριβώς στα CSS.

Έτσι αν θέλουμε να επιλέξουμε την κλασση του div γράφουμε για τον παραπάνω κώδικα

$('.wrapper')

ενώ άν θέλουμε να επιλέξουμε το Id γράφουμε

$('#header')

Τέλος ας δούμε τι κάνουμε αν θέλουμε να επιλέξουμε κάτι που βρίσκεται βαθιά μέσα στον κώδικα μας (κάτι πολύ συγκεκριμένο).
Αν έχουμε λοιπόν για παράδειγμα τον εξής κώδικα







Μήνας




Ιανουάριος

και θέλουμε να επιλέξουμε ένα συγκεκριμένο στοιχείο του πίνακά μας το μόνο που έχουμε να κάνουμε είναι να γράψουμε

$('.right th')

για την σειρά, ενώ γράφουμε

$('.right td')

για το κελί του πίνακά μας.

Κλείνοντας, ας δούμε και ένα ακόμα απλό script και ας εξηγήσουμε πως λειτουργεί. Ας επιλέξουμε ένα κουμπί, και ας το αποκρύψουμε(εξαφανίσουμε) όταν κάνουμε κλίκ επάνω του.
Έτσι έχουμε τον κώδικα μας

που είναι ένα απλό html κουμπί, με id hide

Για να επιλέξουμε το id γράφουμε

$('#hide')

Για να προσθέσουμε την συνθήκη του όταν ο χρήστης θα κάνει κλίκ γράφουμε

.click(function() {

});

Τέλος για να το αποκρύψουμε αφού το έχουμε επιλέξει γράφουμε

$('#hide').click(function() {
$(this).hide();
});

Το this υποδηλώνει πως θα εκτελέσουμε μια εντολή πάνω σε κάτι που έχουμε ήδη επιλέξει πιο πάνω. Το hide είναι μια εντολή που απλά αποκρύπτει την επιλογή μας. Αυτό ήταν. Το κουμπί εξαφανίστηκε.

Δοκιμάστε το και εσείς, και θα δείτε ότι είναι πολύ απλό
Αν θέλετε να μάθετε τα πολύ βασικά, όπως το πως να φωρτώσετε την jQuery, δείτε αυτό το παλαιότερο βοήθημα

]]> http://greektuts.net/jquery-intro-part2/feed/ 0 Προσθήκη Εικονιδίων Στους Συνδέσμους με jQuery http://greektuts.net/link-icons-with-jquery/ http://greektuts.net/link-icons-with-jquery/#comments Tue, 30 Mar 2010 10:19:57 +0000 Pantso http://greektuts.net/?p=3011 Ξεκινάμε επιλέγοντας τα εικονίδια μας. Τα εικονίδια που θα επιλέξουμε, θα ήταν σωστό να έχουν μέγεθος 16×16 pixels, έτσι ώστε να μπορούμε να τα προσθέσουμε και σε κείμενο παραγράφου, χωρίς να καταστρέψουμε το ύψος της γραμμής του κειμένου. Ένα πολύ καλό μέρος για να ψάξουμε τα εικονίδια που θέλουμε είναι το IconFinder

CSS

Στο αρχείο CSS που χρησιμοποιούμε, θα προσθέσουμε τις παρακάτω γραμμές κώδικα:

a.pdf {
background: url(images/pdf.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.txt {
background: url(images/text.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.zip {
background: url(images/zip.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.email {
background: url(images/email.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

a.external {
background: url(images/link.png) no-repeat left center;
padding-left: 20px;
line-height: 16px;
}

jQuery

Τώρα αυτό που χρειάζεται να κάνουμε είναι να δημιουργήσουμε το script της jQuery που θα αναλαμβάνει να ψάχνει τους συνδέσμους για καταλήξεις αρχείων, και να προσθέτει τις εικόνες μας. Γράφουμε λοιπόν στο <head> μέρος της σελίδας μας τον εξής κώδικα:

<script type="text/javascript">

$(document).ready(function() {

// Προσθέτει το εικονίδιο στα pdf
$("a[href$='.pdf']").addClass("pdf");

// Προσθέτει το εικονίδιο στα doc, rtf και txt
$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");

// Προσθέτει το εικονίδιο στα Zip αρχεία (zip και rar)
$("a[href$='.zip'], a[href$='.rar']").addClass("zip");

// Προσθέτει το εικονίδιο στους email συνδέσμους
$("a[href^='mailto:']").addClass("email");

//Προσθέτει το εικονίδιο στους εξωτερικούς συνδέσμους
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).addClass("external");

});
</script>

Επεξήγηση κώδικα
Ουσιαστικά ο κώδικας μας ψάχνει τα href tags για καταλήξεις. Αντιστοίχως λοιπόν όπoυ βρεί την κατάληξη που θα ψάξουμε, προσθέτει την αντίστοιχη κλάση, ώστε να μπορούμε μετά να αλλάξουμε την εμφάνιση του με τα CSS.

Ο παραπάνω κώδικας κάνει το εξής:
$(document).ready(function() – Ελέγχουμε ότι η σελίδα έχει φορτώσει πλήρως πρίν κάνουμε το οτιδήποτε
$(“a[href$='.pdf']“) – Ψάχνουμε τα a[href] tags. Όπου βρεί την κατάληξη .pdf
.addClass(“pdf”); – προσθέτει την κλάση pdf.

Τέλος πρέπει να κάνουμε την σελίδα μας να φορτώνει την βιβλιοθήκη της jQuery. Αυτό το κάνουμε γράφοντας στο <head> μέρος της σελίδας μας τον εξής κώδικα:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

]]> http://greektuts.net/link-icons-with-jquery/feed/ 0 Βασικές Έννοιες jQuery http://greektuts.net/jquery-explaine/ http://greektuts.net/jquery-explaine/#comments Tue, 16 Mar 2010 10:29:14 +0000 Pantso http://greektuts.net/?p=2905 Τι είναι η jQuery;

H jQuery είναι μια βιβλιοθήκη εντολών Javascript. Χρησιμοποιόντας την μπορούμε να κάνουμε πάρα πολλά πράγματα όπως:

  • Επιλογή HTML στοιχείων
  • Διαμόρφωση HTML στοιχείων
  • Διαμόρφωση CSS στοιχείων
  • Διεργασίες HTML γεγονότων
  • Εφέ JavaScript και animations
  • Διαμόρφωση του HTML DOM(Document Object Module)
  • Χρήση AJAX
  • Πληθώρα άλλων εφαρμογών

Πως χρησιμοποιείται;

Για να ενσωματώσουμε την βιβλιοθήκη σε ένα html αρχείο, προσθέτουμε στο <head> μέρος της σελίδας μας τον εξής κώδικα:

<script type="text/javascript" src="jquery.js"></script>

Όπως θα παρατηρήσετε, συνδέουμε το αρχείο jquery.js.  Το αρχείο αυτό είναι η βιβλιοθήκη με όλες τις εντολές, και μπορούμε να το βρούμε σε δυο διαφορετικές εκδόσεις, από το jQuery.com.

Για να σώσετε τα αρχεία, πατήστε δεξί κλίκ και Save As.

Σημείωση:

Μπορούμε επίσης να συνδέσουμε το αρχείο με την online έκδοση από την Google με τον εξής τρόπο:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

Η σύνταξη

Η σύνταξη είναι πολύ απλή

$(επιλογή).δράση()

  • Το δολλάριο είναι το σύμβολο που υποδηλώνει την jQuery
  • Ο (επιλογέας) είναι το ερώτημα(query) για το HTML στοιχείο που θέλουμε
  • H δράση(action) είναι ότι θα συμβεί στο στοιχείο που επιλέξαμε

Παραδείγματα

$(this).hide() – Κρύβει το επιλεγμένο αντικείμενο

$(“p”).hide() – Κρύβει όλες τις παραγράφους

$(“p.test”).hide() – Κρύβει όλες τις παραγράφους με class=”test”

$(“#test”).hide() – Κρύβει όλα τα στοιχεία με id=”test”

Η εντολή Document Ready

Για να διασφαλίσουμε ότι η σελίδα μας έχει φορτώσει πλήρως πρίν τρέξουν οι jQuery εντολές μας, χρησιμοποιούμε το εξής function:

$(document).ready(function(){

---Οι εντολές της jQuery εδώ----

});

Έτσι αποφεύγουμε προβλήματα όπως το να προσπαθούμε να κάνουμε επιλογή ενός στοιχείου που δεν έχει φορτώσει ακόμα, η να πάρουμε το μέγεθος μιας εικόνας που δεν έχει εμφανιστεί πλήρως.

Επιλογέας

Παραπάνω είδαμε πως στην σύνταξη της jQuery υπάρχει ο επιλογέας, που μας επιτρέπει να ψάξουμε και να βρούμε HTML στοιχεία στην σελίδα μας. Ας δούμε λοιπόν τι ακριβώς σημαίνει αυτό.

Επιλογέας Στοιχείων

Η jQuery μπορεί και χρησιμοποιεί τα ονόματα των CSS στύλ για να επιλέξει HTML στοιχεία. Έτσι:

Το $(“p”) επιλέγει όλα τα στοιχεία <p>

Το $(“p.intro”) επιλέγει όλα τα στοιχεία <p> με class=”intro”.

To $(“p#demo”) επιλέγει τα στοιχεία <p> που έχουν id=”demo”.

Επιλογέας Ιδιοτήτων

Η jQuery μπορεί επίσης να επιλέξει στοιχεία με συγκεκριμένες ιδιότητες. Έτσι:

Το $(“[href]“) επιλέγει όλα τα στοιχεία που έχουν την ιδιότητα href στην σελίδα μας.

Το $(“[href='#']“) επιλέγει όλα τα στοιχεία που έχουν την ιδιότητα href και την τιμή value=”#”.

Το $(“[href!='#']“) επιλέγει όλα τα στοιχεία που έχουν την ιδιότητα href  και επίσης την ιδιότητα <>”#”.

Το $(“[href$='.jpg']“) επιλέγει όλα τα στοιχεία που έχουν την ιδιότητα href και συμπεριέχουν το “.jpg”.

Τα γεγονότα της  jQuery (Events)

Η jQuery χρησιμοποιεί τα γεγονότα(συμβάντα-events) για να διαχειριστεί τα διάφορα στοιχεία που επιλέγουμε.

Τα βασικά γεγονότα στην jQuery

$(document).ready(function)   -  Ο έλεγχος ολοκλήρωσης φόρτωσης μιας σελίδας

$(selector).click(function)  -  Ο έλεγχος για το κλικ σε ένα στοιχείο

$(selector).dblclick(function)  -  Ο έλεγχος για το διπλό κλικ σε ένα στοιχείο

$(selector).focus(function)  -   Ο έλεγχος εστίασης σε ένα στοιχείο

$(selector).mouseover(function)  -  Ο έλεγχος για το hover του ποντικιού σε ένα στοιχείο

Τα εφέ της jQuery

Μπορείτε να δείτε παραδείγματα από το W3Schools παρακάτω, πατώντας στα ονόματα του κάθε εφέ.

jQuery hide() – Ένα απλό εφέ απόκρυψης.

jQuery hide() – Απόκρυψη μέρους κειμένου.

jQuery slideToggle() – Ένα απλό slide panel.

jQuery fadeTo() – Εφέ ξεθωριάσματος.

jQuery animate() – Δημιουργία animation.

Αναλυτικά

$(selector).hide() – Απόκρυψη επιλεγμένων στοιχείων
$(selector).show() – Εμφάνιση επιλεγμένων στοιχείων
$(selector).toggle() – Εμφάνιση/Απόκρυψη επιλεγμένων στοιχείων
$(selector).slideDown() – Slide-down
$(selector).slideUp() – Slide-up
$(selector).slideToggle() – Slide up/Slide down
$(selector).fadeIn() – Εμφάνιση (Fade in)
$(selector).fadeOut() – Απόκρυψη (Fade out)
$(selector).fadeTo() – Απόκρυψη (Fade out) σε συγκεκριμένο opacity
$(selector).animation() – Εφαρμογή animation σε επιλεγμένα στοιχεία

Μπορείτε να τις βρείτε ακόμα πιο αναλυτικά εδώ

Εδώ θα κλείσουμε το άρθρο για τις βασικές έννοιες της jQuery. Σε επόμενο άρθρο θα δούμε περισσότερα παραδείγματα πάνω στην jQuery, καθώς και κάποιες ακόμα έννοιες όπως τα callbacks, το append και το prepend και τις CSS λειτουργίες.

Για αυτόν τον οδηγό θα θέλαμε να ευχαριστήσουμε τα W3Schools

]]> http://greektuts.net/jquery-explaine/feed/ 0 jQuery Tools http://greektuts.net/jquery-tools/ http://greektuts.net/jquery-tools/#comments Sat, 27 Feb 2010 16:11:50 +0000 Pantso http://greektuts.net/?p=2721 Πρόκειται για μια απόλυτα εύκολη και χρήσιμη συλλογή από εργαλέια. Βρείτε και εσείς τα jQuery Tools εδώ

Τι μπορώ να φτιάξω με τα jQuery Tools;

Παρακάτω θα δούμε λίγα πράγματα για το τι μπορούμε να δημιουργήσουμε με τα jQuery Tools

Δημιουργήστε απίθανα Tabs

Μπορείτε να δημιουργήσετε δυναμικές καρτέλες με animation

Δημιουργήστε απίθανα Tooltips

Μπορείτε να δημιουργήσετε tooltips πάνω από κάθε στοιχείο που επιθυμείτε εσείς

Δημιουργήστε απίθανα Overlays

Μπορείτε να δημιουργήσετε ανακλεινόμενα παράθυρα με εφέ

Δημιουργήστε το απίθανο εφέ με το όνομα Expose

Μπορείτε να δημιουργήσετε σκίαση στο περιβάλλον γύρω από το στοιχείο που θέλετε με σκοπό να το κάνετε να έρχεται στο παρασκήνιο

Δημιουργήστε απίθανα scroll εφέ

Μπορείτε να δημιουργήσετε μετακινούμενα στοιχεία html

Μάθετε και έσεις πώς να χρησιμοποιείτε τα jQuery Tools και δείτε παραδείγματα εδώ

]]> http://greektuts.net/jquery-tools/feed/ 5