Πώς να δημιουργήσετε συμπτυσσόμενα πλαίσια με JQuery στο Dreamweaver - ανδρείκελα

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

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

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

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

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

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

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

Τοποθετήστε το δρομέα σας σε μια σελίδα στην οποία θέλετε να εμφανίζονται οι πίνακες ακορντεόν.
Επιλέξτε Insert → jQuery UI → Accordion ή κάντε κλικ στο στοιχείο Accordion στο πλαίσιο jQuery UI Insert.

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

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

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

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

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

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

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

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

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

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

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

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

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