Δημιουργήστε προσαρμοσμένα γραφικά με εικονίδια με το GridTab

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

Το φαινομενικό jQuery GridTab plugin είναι ένα καλό παράδειγμα. Σας επιτρέπει να δημιουργήστε ένα προσαρμοσμένο πλέγμα, καθορίστε τα σημεία διακοπής, και δημιουργήστε ένα προσαρμοσμένο γραφικό στοιχείο που ταιριάζει σε οποιονδήποτε ιστότοπο.

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

Η εγκατάσταση είναι ένα αεράκι και απαιτεί μόνο το jQuery βιβλιοθήκη ως εξάρτηση. Μόλις εγκατασταθεί, μπορείτε να τραβήξετε το GridTab από npm ή να το κατεβάσετε απευθείας από το GitHub.

Λάβετε υπόψη ότι αυτό το πρόσθετο widget με καρτέλες έχει ένα προεπιλεγμένο στυλ, έτσι έχει ένα ξεχωριστό φύλλο στυλ CSS στην κορυφή του αρχείου προσθήκης JS. Όμως, μπορείτε πάντα να συγχωνεύσετε αυτό το CSS με το δικό σας για να μειώσετε τις αιτήσεις HTTP.

Για να αρχικοποιήσετε το plugin, απλά περάστε το συνολικό μέγεθος πλέγματος μαζί με οποιαδήποτε προαιρετική παράμετρο (όλα αναγράφονται στο GitHub).

Εδώ είναι ένα απλό αρχικό σενάριο:

 $ (document) .ready (function () $ ('# gridtab-1')) gridtab (grid: 3); 

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

Ίσως να είστε περίεργοι να δείτε πώς όλα αυτά λειτουργούν και πώς φαίνεται στο πρόγραμμα περιήγησής σας. Ελέγξτε το “Demos” για να δείτε ένα μερικά παραδείγματα, συμπεριλαμβανομένου πρώτης πηγής κώδικα μπορείτε να αντιγράψετε.

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

Όλα όσα πρέπει να γνωρίζετε, συμπεριλαμβανομένων πλήρη τεκμηρίωση, μπορείτε να βρείτε στην κύρια σελίδα GridTab. Αυτό περιλαμβάνει επίσης μια σύνδεση με το GitHub repo έτσι ώστε να μπορείτε να περιηγηθείτε στην πηγή και να αρχίσετε να προσαρμόζετε τα δικά σας ανταποκρινόμενα tabbed grids.