Όταν πρόκειται για το styling ιστοσελίδες, τίποτα δεν είναι τόσο δύσκολο όσο οι μορφές. Και όταν πρόκειται για μορφές μορφοποίησης - σχεδόν - τίποτα δεν είναι τόσο δύσκολο όσο το
Μπορούμε να στυλ a
Σε αυτό το άρθρο θα χρησιμοποιήσουμε DropKick για να δημιουργήσετε το dropdown. Αυτό που κάνει το dropkick είναι να μεταμορφώσει το
Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε ένα
Μόλις δημιουργήσουμε το δικό μας
$('#mySelect').dropkick();Με αυτόν τον τρόπο μετατρέπουμε το HTML μας σε αυτό:
Όπως μπορείτε να δείτε, το DropKick μας έχει μεταμορφώσει
Μπορούμε τώρα να στυλ μας dropdown με CSS, ή να χρησιμοποιήσετε ένα από τα θέματα DropKick εάν προτιμούμε? κατά τη στιγμή της γραφής υπάρχουν τρία θέματα διαθέσιμα, η προεπιλογή, η σκοτεινή γυαλάδα και η ελαφριά γυαλάδα. Αλλά οι περισσότεροι άνθρωποι θα θελήσουν να χρησιμοποιήσουν τα δικά τους στυλ που ταιριάζουν με τις ανάγκες του έργου τους.
Η επέκταση του DropKick είναι μια απλή διαδικασία. Για παράδειγμα, αν θέλαμε να εντοπίσουμε πότε θα γίνει μια αλλαγή στο αναπτυσσόμενο μενού, μπορούμε να προσθέσουμε το χειριστήριο συμβάντων αλλαγής, όπως έτσι:
$('select').dropkick({change: function (value) {console.log('Option selected: ' + value);}});Είμαι βέβαιος ότι υπάρχουν χιλιάδες τρόποι να στυλ ένα μενού επιλογής χωρίς τη χρήση του jQuery, αλλά αυτά που χρησιμοποιούν μόνο CSS αγωνίζονται μια χαμένη μάχη ενάντια στις προεπιλογές του προγράμματος περιήγησης. Η απλότητα αυτού του plugin και η τεράστια ευελιξία που προσφέρει και η προοδευτική προσέγγιση βελτίωσης που παίρνει σημαίνει ότι το DropKick είναι μια εξαιρετική λύση.
Έχετε χρησιμοποιήσει το DropKick σε ένα έργο; Έχετε μια προτιμώμενη μέθοδο στυλ