Πώς να δημιουργήσετε μια διεπαφή καρτέλας στο AJAX για HTML5 και CSS3 Προγραμματισμός - dummies

Μια σημαντική τεχνική στην ανάπτυξη ιστοσελίδων HTML5 και CSS3 είναι η χρήση μιας διεπαφής με καρτέλες στο AJAX. Αυτό επιτρέπει στον χρήστη να αλλάζει τα περιεχόμενα ενός τμήματος επιλέγοντας μία από μια σειρά καρτελών.

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

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

Αυτό συμβαίνει όταν ο χρήστης κάνει κλικ στην καρτέλα.

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

$ (init); λειτουργία init () {$ ("# καρτέλες"). καρτέλες ();} καρτέλες. html

Demo Tab

Βιβλίο 1
Βιβλίο 2
Βιβλίο 3


Βιβλίο I - Δημιουργία του HTML Foundation

Η διαχείριση των πληροφοριών με λίστες και πίνακες
Δημιουργία συνδέσεων με συνδέσμους
Προσθήκη εικόνων
Δημιουργία Φόρμες και Φόντα
Επίπεδα CSS
Βιβλίο ΙΙΙ - Χρήση των Θέσεων
Βιβλίο ΙΙ - Στυλ με CSS


Χρωματισμός στον Κόσμο

CSS για το Layout
Διασκέδαση με το Fabulous Float
Building Floating Page Layouts
Λίστες και μενού styling
Χρήση εναλλακτικής τοποθέτησης


Ο μηχανισμός για τη δημιουργία μιας διασύνδεσης με καρτέλες είναι πολύ παρόμοιος με αυτόν για Ακορντεόν:

Προσθέστε όλα τα κατάλληλα αρχεία.
Όπως και τα περισσότερα εφέ jQuery UI, χρειάζεστε jQuery, jQuery UI και ένα θέμα CSS αρχείο. Χρειάζεται επίσης πρόσβαση στον κατάλογο εικόνων για τα γραφικά φόντου του θέματος.
Δημιουργία HTML ως κανονικό.
Εάν χτίζετε μια καλά οργανωμένη ιστοσελίδα ούτως ή άλλως, είστε ήδη πολύ κοντά.

Δημιουργήστε ένα div που περιέχει όλα τα δεδομένα με καρτέλες.

1. Αυτό είναι το στοιχείο που θα κάνετε την jQuery μαγεία.

   Τοποθετήστε τις κύριες περιοχές περιεχομένου σε ονόματα divs.

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

   Προσθέστε μια λίστα τοπικών συνδέσεων στο περιεχόμενο.

3. Δημιουργήστε ένα μενού συνδέσμων. Τοποθετήστε το στην κορυφή της καρτέλας div. Κάθε σύνδεσμος θα πρέπει να είναι ένας τοπικός σύνδεσμος σε ένα από τα διαζύγια. Για παράδειγμα, ο δείκτης μοιάζει με αυτό:

   Βιβλίο 1

4. Βιβλίο 2

   Βιβλίο 3

5. Δημιουργήστε μια συνάρτηση init () ως συνήθως.

   Χρησιμοποιήστε τις κανονικές τεχνικές jQuery.

   
   Κλήση της μεθόδου tabs () στο κύριο div.
   Απίστευτα, μια γραμμή κώδικα jQuery κάνει όλη τη δουλειά.