Πώς να δημιουργήσετε πτυσσόμενα πάνελ με το jQuery στο Dreamweaver

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

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

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

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

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

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

Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε ένα σετ πάνελ ακορντεόν:

Τοποθετήστε τον κέρσορα σας σε μια σελίδα όπου θέλετε να εμφανίζονται οι πίνακες ακορντεόν.

Επιλέξτε Insert→jQuery UI→Accordion ή κάντε κλικ στο στοιχείο Accordion στον πίνακα jQuery UI Insert.

Στη σελίδα εμφανίζεται μια ομάδα πτυσσόμενου ακορντεόν jQuery UI με τρία πλαίσια.

Επιλέξτε τη λέξη Ενότητα στο επάνω μέρος κάθε πίνακα και αντικαταστήστε την με το κείμενο που θέλετε να εμφανίζεται στην περιοχή καρτέλας του πίνακα.

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

Επιλέξτε τη λέξη Περιεχόμενο στην κύρια περιοχή κάθε πίνακα και εισαγάγετε οποιοδήποτε κείμενο ή εικόνες θέλετε να εμφανίσετε.

Μπορείτε να επικολλήσετε κείμενο σε ένα πλαίσιο όπως ακριβώς θα επικολλούσατε κείμενο οπουδήποτε αλλού στη σελίδα. Ομοίως, εισάγετε εικόνες σε πίνακες όπως θα κάνατε οπουδήποτε αλλού σε μια σελίδα: Τοποθετήστε τον κέρσορα σας στον πίνακα, επιλέξτε Εισαγωγή→Εικόνα→Εικόνα και επιλέξτε το αρχείο GIF, JPEG ή PNG που θέλετε να εμφανίσετε. Μπορείτε επίσης να επιλέξετε ένα αρχείο Photoshop εάν θέλετε να χρησιμοποιήσετε το Dreamweaver για βελτιστοποίηση εικόνων.

Όταν επικολλάτε κείμενο σε ένα πλαίσιο, επιλέξτε Επεξεργασία→ Ειδική επικόλληση για να επιλέξετε την ποσότητα μορφοποίησης που θέλετε να διατηρήσετε στο κείμενο που επικολλάτε στο Dreamweaver. Ο περιορισμός του όγκου της μορφοποίησης που διατηρείται μπορεί να μειώσει τις πιθανές διενέξεις στυλ.

Για να αλλάξετε τις ρυθμίσεις του πίνακα, κάντε κλικ στην μπλε καρτέλα jQuery Accordion στο επάνω μέρος των πλαισίων στην περιοχή σχεδίασης.

Όταν κάνετε κλικ στην μπλε καρτέλα, οι ρυθμίσεις του πίνακα εμφανίζονται στο Property inspector. (Το σωστό κλικ στην μπλε καρτέλα μπορεί να είναι δύσκολο, επομένως βεβαιωθείτε ότι έχετε κάνει κλικ στην μπλε περιοχή.) Κάντε κλικ οπουδήποτε αλλού στη σελίδα και ο επιθεωρητής επιστρέφει στις προεπιλεγμένες ρυθμίσεις του.

Προσθέστε ή αφαιρέστε πάνελ χρησιμοποιώντας το πεδίο Πίνακες στον Επιθεωρητή Ιδιοτήτων.

Για να προσθέσετε ένα πλαίσιο, κάντε κλικ στο σύμβολο συν (+) στα δεξιά του πεδίου Πίνακες. Για να αφαιρέσετε ένα πάνελ από ένα σετ ακορντεόν, επιλέξτε πρώτα το όνομα του πίνακα στην αναπτυσσόμενη λίστα Panels στο Property inspector και, στη συνέχεια, κάντε κλικ στο σύμβολο μείον (@@min).

Μπορείτε να προσθέσετε ένα άλλο πλαίσιο κάνοντας ξανά κλικ στο σύμβολο συν.

Αλλάξτε τον τρόπο ανοίγματος των πλαισίων χρησιμοποιώντας το αναπτυσσόμενο μενού Συμβάν.

Οι ρυθμίσεις συμβάντος ελέγχουν εάν οι πίνακες ανοίγουν όταν ένας χρήστης κάνει κλικ σε μια καρτέλα πλαισίου (Κλικ) ή περνάει έναν κέρσορα πάνω από την καρτέλα του πίνακα (Μετακίνηση του ποντικιού).

Ορίστε άλλες επιλογές πίνακα, όπως θέλετε.

Οι επιλογές ακορντεόν στο Property inspector είναι προαιρετικές και περιλαμβάνουν τη δυνατότητα απενεργοποίησης οποιουδήποτε ή όλων των πλαισίων (Απενεργοποίηση) και κίνησης του τρόπου ανοίγματος και κλεισίματος των πλαισίων (αναπτυσσόμενη λίστα Animate).

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

Για να λειτουργήσουν οι λειτουργίες Spry, πρέπει να ανεβάσετε αυτά τα αρχεία στον διακομιστή ιστού σας όταν ανεβάζετε την ιστοσελίδα.

Για να αλλάξετε την εμφάνιση του πίνακα, όπως το πρόσωπο της γραμματοσειράς ή το χρώμα του κειμένου, επεξεργαστείτε τον αντίστοιχο κανόνα CSS.

Σημείωση: Δεν μπορείτε να επεξεργαστείτε τα αντίστοιχα στυλ για ένα πλαίσιο ακορντεόν μέχρι να αποθηκευτεί η σελίδα και το Dreamweaver να δημιουργήσει τα αντίστοιχα αρχεία CSS και JavaScript.

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

Όταν χρησιμοποιείτε τον υπολογιστή σας για να κάνετε προεπισκόπηση μιας σελίδας που έχει μια διαδραστική δυνατότητα που απαιτεί JavaScript ή άλλο προγραμματισμό, ορισμένα προγράμματα περιήγησης ιστού, συμπεριλαμβανομένου του Internet Explorer, θα εμφανίσουν μια προειδοποίηση που δηλώνει ότι πρέπει να επιτρέψετε στα στοιχεία ελέγχου ActiveX να προβάλουν τη σελίδα.

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