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

Η επιλογή jQuery UI Tab στο Dreamweaver καθιστά εύκολο να προσθέσετε μια σειρά από πίνακες που εμφανίσετε ή να αποκρύψετε το περιεχόμενο που αντιστοιχεί σε μια σειρά από καρτέλες. Παρόμοια με τα πτυσσόμενα πλαίσια, αυτή η λειτουργία jQuery UI σάς επιτρέπει να προβάλλετε περισσότερες πληροφορίες σε λιγότερο χώρο μέσα σε ένα παράθυρο του προγράμματος περιήγησης.

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

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

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

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

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

   Εισάγεται μια σελίδα με ετικέτες στη σελίδα και τα αντίστοιχα αρχεία CSS εμφανίζονται στον πίνακα πηγής CSS Designer Source.

   

3. Στο κύριο χώρο εργασίας, επιλέξτε το tab1, Καρτέλα2, και Tab 3 κείμενο με τη σειρά του, και στη συνέχεια, αντικαταστήστε κάθε καρτέλα τίτλο με το κείμενο που θέλετε να εμφανίζεται στην καρτέλα του πίνακα περιοχή.

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

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

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

   

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

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

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

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

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

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

   

8. Για να προσθέσετε καρτέλες, κάντε κλικ στο εικονίδιο συν (+) στο πεδίο Επιθεώρηση ιδιοτήτων.

   Εμφανίζονται νέες καρτέλες στον χώρο εργασίας.

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

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

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

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

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

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

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

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